88 lines
4.3 KiB
YAML
88 lines
4.3 KiB
YAML
uuid:
|
|
- value: b892433b-6318-4716-9bb8-fc13e6a55fbb
|
|
langcode:
|
|
- value: en
|
|
type:
|
|
- target_id: daily_email
|
|
target_type: node_type
|
|
target_uuid: 8bde1f2f-eef9-4f2d-ae9c-96921f8193d7
|
|
revision_timestamp:
|
|
- value: '2025-05-11T09:00:22+00:00'
|
|
revision_uid:
|
|
- target_type: user
|
|
target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
|
|
revision_log: { }
|
|
status:
|
|
- value: true
|
|
uid:
|
|
- target_type: user
|
|
target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
|
|
title:
|
|
- value: 'Utility classes make global scope local'
|
|
created:
|
|
- value: '2024-01-12T00:00:00+00:00'
|
|
changed:
|
|
- value: '2025-05-11T09:00:22+00:00'
|
|
promote:
|
|
- value: false
|
|
sticky:
|
|
- value: false
|
|
default_langcode:
|
|
- value: true
|
|
revision_translation_affected:
|
|
- value: true
|
|
path:
|
|
- alias: /daily/2024/01/12/utility-classes-make-global-scope-local
|
|
langcode: en
|
|
body:
|
|
- value: |
|
|
<p>In my <a href="/daily/2024/01/09/using-tailwind-css-is-a-great-way-to-learn-css">recent pair programming session</a>, building components with Tailwind CSS, we experienced another benefit of styling with utility classes.</p>
|
|
|
|
<p>CSS usually has a global scope, but utility classes change it to a local scope.</p>
|
|
|
|
<p>For example, having a card component with a <code>card</code> class on it, any changes to the styles will affect all instances of any card component that uses the <code>card</code> class.</p>
|
|
|
|
<p>How do you know you haven't broken something in a different component without re-checking every component manually?</p>
|
|
|
|
<p>How do you easily modify or extend it as requirements change or add more card types?</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>With utility classes, such as the ones generated by Tailwind CSS, you can see and understand what styles are applied to the HTML.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>You can focus on what you're working on right now.</p>
|
|
|
|
|
|
format: full_html
|
|
processed: |
|
|
<p>In my <a href="/daily/2024/01/09/using-tailwind-css-is-a-great-way-to-learn-css">recent pair programming session</a>, building components with Tailwind CSS, we experienced another benefit of styling with utility classes.</p>
|
|
|
|
<p>CSS usually has a global scope, but utility classes change it to a local scope.</p>
|
|
|
|
<p>For example, having a card component with a <code>card</code> class on it, any changes to the styles will affect all instances of any card component that uses the <code>card</code> class.</p>
|
|
|
|
<p>How do you know you haven't broken something in a different component without re-checking every component manually?</p>
|
|
|
|
<p>How do you easily modify or extend it as requirements change or add more card types?</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>With utility classes, such as the ones generated by Tailwind CSS, you can see and understand what styles are applied to the HTML.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>You can focus on what you're working on right now.</p>
|
|
|
|
|
|
summary: null
|
|
field_daily_email_cta: { }
|