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

{
    "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": "\n          <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>\n\n<p>CSS usually has a global scope, but utility classes change it to a local scope.<\/p>\n\n<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>\n\n<p>How do you know you haven't broken something in a different component without re-checking every component manually?<\/p>\n\n<p>How do you easily modify or extend it as requirements change or add more card types?<\/p>\n\n<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>\n\n<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>\n\n<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>\n\n<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>\n\n<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>\n\n<p>You can focus on what you're working on right now.<\/p>\n\n        ",
            "format": "full_html",
            "processed": "\n          <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>\n\n<p>CSS usually has a global scope, but utility classes change it to a local scope.<\/p>\n\n<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>\n\n<p>How do you know you haven't broken something in a different component without re-checking every component manually?<\/p>\n\n<p>How do you easily modify or extend it as requirements change or add more card types?<\/p>\n\n<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>\n\n<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>\n\n<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>\n\n<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>\n\n<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>\n\n<p>You can focus on what you're working on right now.<\/p>\n\n        ",
            "summary": null
        }
    ],
    "feeds_item": [
        {
            "imported": "1970-01-01T00:33:45+00:00",
            "guid": null,
            "hash": "6dfe7f8c27fa0a23fdab4a3d3adf0676",
            "target_type": "feeds_feed",
            "target_uuid": "90c85284-7ca8-4074-9178-97ff8384fe76"
        }
    ]
}