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).
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).
(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.)
EDIT just actually read the post properly "More to come, including jQuery-less js components. Please stay tuned!" :-)
My motivation to write this is because I always have to go back and make quick margin/padding/etc changes and I hated trying to come up with more class names.
As mentioned, this isn't a framework. It was a way for me to add styles when writing styles to custom directives.
But, if this isn't a framework then it seems rather large. If it were to do only what you describe, simple classes for simple changes, then you are loading in lots of stuff in your inc imports that isn't required.
I don't necessarily have a problem with it, it's not a bad idea. Personally I wouldn't be against using something like this that's tailored to a design so that only the necessary classes are required. That way it isn't necessary to have stepping of 1 to 100 on each property.
But this speaks for the current state of frontend. We are willing to be open/accept a lot of crazy ideas about organizing the frontend, but thankfully there is a limit.
There is a lot 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 describe the content, not define its looks.
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".
I'm not trying to be bootstrap. I wanted a way for users to add css without using an inline-css. As for psudo selectors, it's still easy: .do-this-on-hover:hover { ... }
However, it is not "alert alert-red"... What if your client wanted to never use the colour red again because his competition is branded red? You need to go through all the CSS (a few lines of :red needs to be changed to :yellow). You however also need to go through all your view, templates, possibly some hardcoded parts of the code, to change "alert-red" to "alert-yellow"... simply have it "alert-danger".
I don't really see the point of all of this, either, though. Maybe it's satire?
I don't think it's a "better" way, I wanted to explore another way of adding quick styles without having to come up with a class name.
Urgh.
Also, you cannot use numbers as classes. That's not allowed and may mess up some browsers / devices.
The style definition might be ignored in some browsers. Some other might break when they see an invalid character and stop parsing your styles.
That being said, most modern browser will be able to parse the CSS without you needing to escape any characters.
Using parker (https://github.com/katiefenn/parker) tool to analyze the css:
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)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! :)
I'd recommend taking a look at Basscss for some inspiration. From my perspective, you're trying to create something similar to Basscss.
Check https://github.com/EasyBoxModel/EBM/blob/master/app/assets/c... to get the idea.
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.
Benefits over just using inline styles: 1) support for pseudo-classes (:hover) 2) reduce markup bloat (shorter class declarations vs equivalent inline-style declarations)