From b5e306b6b4762de554aa996f7ddbd6f1f251a6a7 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Sat, 13 Jan 2024 00:05:00 +0000 Subject: [PATCH] Add daily email for 2024-01-12 Utility classes make global scope local --- source/_daily_emails/2024-01-12.md | 34 ++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 source/_daily_emails/2024-01-12.md diff --git a/source/_daily_emails/2024-01-12.md b/source/_daily_emails/2024-01-12.md new file mode 100644 index 000000000..dfcb2dab7 --- /dev/null +++ b/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.