When you write CSS, do you create classes that reflect the UI? Classes like card, button, title, sidebar or link. Your classes have every possible element defined in that class.
What if you didn’t write your CSS that way? Utility-first CSS creates a series of helper classes or utilities. A utility class does one thing really well. For example, you might write a class that changes the background color to blue. Then, you would use to change the background color on buttons, cards and CTA boxes. Use it wherever you want. You mix and match these utilities to create the look you want.
Where can you learn more about it?
Start by checking out these articles:
- In Defense of Utility-First CSS – Why you should learn more about it
- Best Practices for Utility-First CSS – Tips and Techniques for applying utility-first
- Growing Popularity of Atomic CSS – Why you can mix utility frameworks with your other CSS
What CSS Methodologies can I use?
You can look at these couple popular methodologies:
- Cube CSS – a CSS methodology that focuses on simplicity, consistency and works with whatever medium you are using.
- Tailwind CSS – a CSS framework that helps you rapidly build modern websites.
- Atomizer – a CSS utility library that integrates with the most popular web frameworks.
Software development consistently changes. A developer needs to experiment with new tools and new ideas. You need to pick the tools that best suit your project and users.