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.