Jay Freestone avatar Jay Freestone

The perils of functional CSS

Screenshot of “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.

  1. Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

    Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?