A CSS preprocessor that provides a simplified object orientated approach to css. The syntax is very similar to CSS but encourages better reuse of classes and discourages high specificity.
BREAKING CHANGES IN v1.0
- element classes are no longer prefixed with
//.in generated output
- mixins are now prefixed with
$to avoid escaping in generated output.
BREAKING CHANGES IN v2.0
- mixins are back to a
$prefix and are no longer exported to generated css (can only be used by other styles)
A bit of background
I think there comes a time in any front-end web developer's life when CSS stops being "the most amazing powerful design language on earth" and changes to become the skeletons in our closet that we prefer not to think about too much. This was certainly my experience.
CSS is undoubtedly powerful, but it's too powerful. It encourages you to do things that seem efficient and clever at the time but eventually turn in to absolute maintenance nightmares.
One night I couldn't sleep, I was thinking about the new redesign and how many things would start to break or have to be hacked around to do the new CSS. I realized that I would probably have to completely start again with the CSS on the page. But how should I structure it so that this wouldn't happen again?
I got reading on the internets, trying to find better ways to do it - preprocessors, frameworks, etc. I'd used SASS/SCSS in the past, and while the nesting functions were nice, it was still far too easy to make a mess. I came across Stubbornella's Object Oriented CSS project. I really liked some of the ideas and concepts. Things like writing for reuse and avoiding specificity. For me OOCSS it wasn't the answer though, it just didn't click for me, so I started to think about how I could twist CSS to be less unwieldy.
I wanted to be able to define objects, but not have to worry about where those objects were on the page. I wanted those objects to have multiple elements but not have those styles spill into other objects. I wanted to be able to add classes to objects as tags/flags - only applying if the object were a particular type. I wanted to be able to create mixins that could be applied to multiple elements, but not used on their own. CSS can do all of these things fairly easy, but it just doesn't encourage it.
So this was the point I realized I was going to have to come up with my own CSS subset that forced these things, but made them far easier to do, and much more manageable/readable. One of my design goals was to make the class attributes in the HTML very easy to understand, using the single class field for assigning object type, meta data flags, and mixins.
Here's some HTML we want to style:
HTML5 Rules, but css is still just css...Post TitleSubtitle
And some MCSS to do the styling:
It's almost a schema for your HTML
You'll notice that MCSS provides an easy way to view an overall structure of your page. In fact I almost always write the MCSS first to figure out how the page will be laid out then write the HTML to match.
$ npm install micro-css -g
When installed globally execute:
$ mcss filepaths... -o outfile.css
Or it can be used by API in Node.js:
var microCss =var finalCss = // read from file or hardcoded like this
Because semicolons always annoyed me...
Object classes start with uppercase
The following MCSS:
Good old fashioned element selectors are there - just like normal css
As long as it starts with a lower case letter... otherwise it'll see it as an Object class.
Nested Rules always use
Makes it not so IE6 friendly, but it's so worth it (then again IE6 doesn't even support multiple classes!)
If you really have to, you can still opt-out of '>'
Add flags to specific types of objects
back textred textstill black text as '-special' is not defined for 'AnotherItem'
So I can use the
-special flag wherever I like and not worry about stepping on another namespace.
Specify multiple possibilities [OR]...
Itemh1, h2, h3, h4
... or multiple requirements [AND]
This text will be orangeThis text will be redThis text will be greenAnd this div will be transparent
Mixins for reusing a particular style... when Object classes aren't enough
A way to reuse styles in multiple places.
Element classes - basically how most people currently use classes
Except severely limited so you can't hurt yourself.
And we can use it like this in our HTML:
I am some main textI am a standard divI am an extra div
They can only be used with an element selector, and never on their own. And generally should be avoided if they have a better pure element alternative.
The svg is automatically inlined as a data url.