Robin Rendle: So a couple of years ago if we needed to style a simple element with CSS we might’ve written code like this:
We would’ve created a new class and added our styles within it. Lately however, it appears that a consensus is forming around “functional” CSS. The idea is to make separate classes for color, background-color, and pretty much any other CSS property. Then we can work more quickly by adding those tiny classes straight into the markup (Tachyons and Basscss are toolkits that take this approach to heart.)
Here’s an example of what we might write instead:
We wouldn’t even have to touch a CSS file because we’d already have those classes ready to go!
In fact, the very idea of this “functional” approach is to stop designers from having to write CSS in the first place, but it also lets us read HTML a whole lot faster. What happens if you remove the c-red class, you might ask? Well, the text will simply no longer be red.
There are all sorts of arguments to be made for these two approaches (and the many other methods of writing CSS), however for me, using functional CSS has changed the way I think about designing on the web. It’s encouraged me to write smaller, more readable chunks of CSS, to think in maintainable systems, and to start making tiny lego bricks of code that I can use to collaborate with other tiny bricks.