35 lines
1.8 KiB
Markdown
35 lines
1.8 KiB
Markdown
|
---
|
||
|
|
title: >-
|
||
|
|
Utility classes make global scope local
|
||
|
|
date: 2024-01-12
|
||
|
|
permalink: archive/2024/01/12/utility-classes-make-global-scope-local
|
||
|
|
snippet: |
|
||
|
|
Utility classes make global scope local, making things easier and quicker to work on - now and in the future.
|
||
|
|
tags:
|
||
|
|
- software-development
|
||
|
|
- css
|
||
|
|
- tailwind-css
|
||
|
|
---
|
||
|
|
|
||
|
|
In my [recent pair programming session]({{site.url}}/archive/2024/01/09/using-tailwind-css-is-a-great-way-to-learn-css), 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.
|