Utility classes make global scope local
In my recent pair programming session, building components with Tailwind CSS, we experienced another benefit of styling with utility classes.
CSS usually has a global scope, but utility classes change it to a local scope.
For example, having a card component with a card class on it, any changes to the styles will affect all instances of any card component that uses the card class.
How do you know you haven't broken something in a different component without re-checking every component manually?
How do you easily modify or extend it as requirements change or add more card types?
If you need to make a change in the future, you're likely to add more styles and modifiers and add to the CSS, causing it to grow rather than change the existing styles - in fear of breaking something else.
With utility classes, such as the ones generated by Tailwind CSS, you can see and understand what styles are applied to the HTML.
This also makes it easier to change, and because the classes and styles are added directly to that element, you don't need to worry about breakages elsewhere.
If you need to add a new class to that card type, you can do so knowing that it won't affect all card styles globally in your application - just the one you're working on.
This means you can change things more easily in the future but also work quicker now as you don't need to worry about all that additional context.
You can focus on what you're working on right now.
- Oliver
