I feel like this is akin to "killing the patient to cure the disease." In the uses I can see for this, the way this framework solves the problem, to me, seems to be worse than any problem itself. Namely, I would like to know how this is any better than !important on your CSS properties.<p>Firstly, you're messing up your separation of concerns, you're also messing up an attribute with values that other developers will probably see as a bug — "why isn't this in a style tag?" It also won't work with JavaScript disabled (a few people will complain about that, they always do).<p>Why use classes at all? If the idea is to not rely on CSS, we could use a data attribute, like data-mimic or data-mimic-width="1", to apply to additional styles (although some CMS' will struggle with this).<p>(I realise its so easy to be negative, and HN submissions usually have their unfair share of criticism from people who think they know better. Although it obviously solves a problem for the author, at the crux of it, I'd refactor this if I found it in any projects I look after.)
When doing things like this, you should take ie into consideration
<a href="http://spaceninja.com/2015/03/31/ie-css-limits/" rel="nofollow">http://spaceninja.com/2015/03/31/ie-css-limits/</a><p>Using parker (<a href="https://github.com/katiefenn/parker" rel="nofollow">https://github.com/katiefenn/parker</a>) tool to analyze the css:<p><pre><code> curl http://peterchon.github.io/mimic/css/mimic.css -s | parker -s
PARKER-JS
Total Stylesheets: 1
Total Stylesheet Size: 126045
Total Rules: 2551
Total Selectors: 2611
Total Identifiers: 5292
Total Declarations: 3849
Selectors Per Rule: 1.0235201881615053
Identifiers Per Selector: 2.026809651474531
Specificity Per Selector: 19.89199540405975
Top Selector Specificity: 40
Top Selector Specificity Selector: .row\:12 .col\:1
Total Id Selectors: 0
Total Unique Colors: 6
Unique Colors: #3F3F3F,#3E49FF,#45497F,#1336CC,#CFCFCF,#CCCCCC
Total Important Keywords: 0
Total Media Queries: 1
Media Queries: screen and (max-width: 736px)</code></pre>
How do you handle advanced selectors? Or hover states? Or priority? Or inheritance?<p>There is a <i>lot</i> of reasons why separating content and styling is benefitial to both the designer and the developer. And why semantic classes, especially with tools like Sass where abstraction and reusability are key, allow to <i>describe</i> the content, not define its looks.<p>That's why we went from color="red" to style="color:red;" to class="red-text" to class="alert alert-red" to class="alert-danger".
Hey, this is a very radical approach. I have great respect for people who ship something (anything!), because they have the vision to see things differently and actually execute this vision.<p>This may take some getting used to, and a lot of debate if using this is really worth it, but it's something. Nice job! :)
As someone who is perpetually terrified to do a Show HN, congrats for shipping something. I also don't think this idea is much better than inline style attributes, but it's something different at least. You seem to take constructive criticism well and that's a good sign. My advice (worth nothing since I haven't shipped) is to learn from the feedback and come back with something else.<p>Also, I should mention I did have a use for something like this. On my site, I sanitize HTML generated by user plugins, and to ensure the HTML doesn't mess up other parts of the page, I would provide a set of allowed CSS classes, but disallow inline styles. The CSS classes would not include "position" properties, so "position: static" wouldn't be allowed. Later I was able to use phloc to parse the inline styles but prohibit "position", so I didn't need a huge set of CSS classes anymore.
Going to be honest.. this doesn't look too well thought out. Something like z-index you have a class for values of 0 up to 100. Not necessary IMO.<p>I'd recommend taking a look at Basscss for some inspiration. From my perspective, you're trying to create something similar to Basscss.
That's the equivalent of a front-end developper going into back-end, saying "screw this!" and hardcoding everything.<p>Urgh.<p>Also, you cannot use numbers as classes. That's not allowed and may mess up some browsers / devices.
It's sad that this reminds me to the worst CSS framework I've ever used (and was forced to use): <a href="https://github.com/EasyBoxModel/EBM" rel="nofollow">https://github.com/EasyBoxModel/EBM</a><p>Check <a href="https://github.com/EasyBoxModel/EBM/blob/master/app/assets/css/ebm.css" rel="nofollow">https://github.com/EasyBoxModel/EBM/blob/master/app/assets/c...</a> to get the idea.
I don't really want to be negative but I really can't see how this could be used for anything other than a quick prototype scenario. I'm never going to add 126kb of css to a project just for shortcuts like this, it just doesn't make sense given that the large majority of that added css weight will never be used.
Yahoo actually came up with something similar <a href="http://acss.io/" rel="nofollow">http://acss.io/</a><p>Benefits over just using inline styles:
1) support for pseudo-classes (:hover)
2) reduce markup bloat (shorter class declarations vs equivalent inline-style declarations)
I don't think this is a joke. I think this is just something that probably isn't useful as a library/framework/whatever + maybe an incomplete understanding of how CSS best fits into the puzzle.
There is something similar.
<a href="https://github.com/eduardo-costa/shortcutcss" rel="nofollow">https://github.com/eduardo-costa/shortcutcss</a>