Add daily email for 2024-01-12

Utility classes make global scope local

source/_daily_emails/2024-01-12.md

@@ -0,0 +1,34 @@
+---
+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.