I have been writing CSS for so long now that I can't even recall how many years it is anymore 😆! In that time I've been through the various ways in which we're supposed to write scalable CSS and I've tried probably all the ways that have been recommended over the years.

From my ever-worsening recall:

• inline styles
• separate stylesheets
• LESS/SCSS pre-processing
• Block - Element - Module (BEM) naming for SCSS
• CSS Modules
• Atomic CSS
• CSS-in-JS (Styled Components)
• Tailwind / Utility Classes
• Styled-System / Chakra

Quite the list now that I reflect on it!

Over that time I've been on a journey that happens in most development where a trend kicks off and it feels like the right way to build things in a way that's sane for developers to handle whilst offering benefits to the end user. This may not have been the case in all instances but the tradeoffs felt right at the time. With us having a mostly evergreen set of browsers these days, it's easy to forget the pains of having to handle edge cases and unsupported features across the browser engines of the past.

These days, I'm long past worrying about the Twitter battles over which is the best approach to take and have settled into using Chakra-UI for getting things built quickly. I love it's Tailwind-esque approach to styling and would love to have written a post with tests comparing speed/bundle size etc but I'm here to share my thoughts not try and convert you to my way of thinking!

Safe to say that it feels like a great combination of being productive whilst helping you fall into the pit of success that I'm happy with. That is until the next shiny, seemingly better option comes along!