Hands-On UX Design for Developers

Atomic CSS (ACSS)

This CSS methodology was first made famous by Yahoo!, and was popular in 2014. Its main approach was to focus on small atomic components, where you create classes for each of them and provide visual functions for those tiny components.

Atomic CSS is different in that it is known as a functional CSS, and compared to previous CSS methodologies that we discussed in previous sections, such as BEM, OOCSS, or SMACSS, the Atomic CSS approach is the complete opposite of them.

This approach received a negative reaction at first. No one wanted to follow it; consider an example of what a button looks like in the previous approaches:

<button class="search__button">Search</button>

Let's explore the preceding code in Atomic CSS:

<button ...