Tachyons.css: http://tachyons.io/
Suddenly CSS became fun again and my time designing websites went down by a guessed factor of 5.
Suddenly CSS became fun again and my time designing websites went down by a guessed factor of 5.
Another problem I've encountered: functional CSS (such as Tachyons) is only good for minimal layout. I was recently converting a mobile+tablet+desktop PSD design to CSS with very complicated reordering rules (this <div> is full height on the right on desktop, floated bottom of the page on tablet, etc.) and all my elements had 20+ classes attached to them.
So I went back and converted regular 60+ lines of CSS. Still, for some reason, working with Tachyons was for some reason faster and "easier" to reason about.
I think it's a step in the right direction, but we're not there yet.
Also, if you're using something like React, you can share the style strings in variables.
Tachyons is different, it doesn't give you components but single-purpose classes and a font-relative layouting system:
http://tachyons.io/docs/layout/spacing/
It takes a while getting used to the names, but after that it's just awesome that you don't have to think about padding, margin and font-size values anymore. Just slap "pa1" or "pa2" there and everything looks pretty.
From experience, your method is easier to think through, but later on it is more time consuming to modify a layout. pa1 and the like should be treated the same as magic numbers.
But having 7 rem-relative steps, that fit together makes the common use-case way easier: Joe: "I need more padding on this, so I use pa2 instead of pa1".
If you feel the urge to check your code base it's easy to write scripts that count the occurences of "pa1..pa7". It's not so easy if you have to take into account "padding: 1px", "padding: 20%", "padding: 3em" etc.