15kb of CSS is all you’ll ever need ⚡️
Philip Ardeljan

I’ve been using atomic css style for a while and I agree with the author. Although for me it only makes sense to use it combined with a component based approach.

For example, it’s awful having to to write <button class="pa10 tc ba1 ...">Click me!<button> whenever you need a button. Libraries like React.js (or even better, languages like Elm) can help you to easily encapsulate all those classes into the <Button /> component.

On the other hand, for layouts it’s great, especially when using the flexbox:

<div class="flex align-center">...</div>

I find it very explicit and easy to maintain. Specially compared with:

<div class="my-wrapper">...</div>

my-wrapper doesn’t convey any meaning.

Like what you read? Give Luismahou a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.