oliverdavies.uk/content/node.b892433b-6318-4716-9bb8-fc13e6a55fbb.yml

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: {  }