The perils of functional CSS

Functional CSS (sometimes referred to as atomic CSS) is the practice of using small, immutable and explicitly named utility classes to construct components.


Functional CSS can be seen as a rebellion against the age-old best practice of the ‘semantic’ class name – such as ‘news-item’ or ‘greeting’ – long espoused by sites such as the famous CSS Zen Garden and notable developers such as Jeffery Zeldman.

There are a few advantages to atomic (or functional) CSS, like performance thanks to a very lighter CSS code, but there are also a lot of drawbacks clearly shown here by Jay.

If you want to share an error or suggest an enhancement of this content, please edit the source on GitHub.