Discovering and debating the merits of functional CSS
Marcelo Somers | October 7, 2016
When I first heard about the concept of functional CSS, it seemed crazy to me. “Why would I ever use this?” I thought. “I’m awesome at this.”
If you haven’t heard of it, functional CSS (otherwise known as atomic CSS, utility classes, immutable CSS — I could go on forever) is the idea that instead of writing big, monolith components in my CSS, I write small, single property, immutable classes that can be assembled into a larger component in HTML.
Your CSS might look like:
Which then gets constructed into your HTML as:
Crazy, right?
I loved writing really clever, powerful CSS classes. I argued for it because of “ease of developer consumption.” My goal was that a developer could add a single class to an element and it would automagically do everything for them. Basically, the opposite of functional CSS.