React Design Patterns and Best Practices - Second Edition

Atomic CSS modules

It should be clear how composition works and why it is a very powerful feature of CSS modules. At YPlan, the company where I worked when I started writing this book, we tried to push it a step further, combining the power of composes with the flexibility of Atomic CSS (also known as Functional CSS).

Atomic CSS is a way to use CSS where every class has a single rule.

For example, we can create a class to set the margin-bottom to zero:

  .mb0 {     margin-bottom: 0;   }

We can use another one to set the font-weight to 600:

  .fw6 {     font-weight: 600;   } 

Then, we can apply all those atomic classes to the elements:

  <h2 class="mb0 fw6">Hello React</h2>

This technique is controversial, and particularly efficient at the same time. ...