uuid:
  - value: 41754bbf-ade6-41a3-97f6-90f101c65265
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:46+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: |
      With utility styles, your CSS stops growing
created:
  - value: '2023-03-22T00:00:00+00:00'
changed:
  - value: '2025-05-11T09:00:46+00:00'
promote:
  - value: false
sticky:
  - value: false
default_langcode:
  - value: true
revision_translation_affected:
  - value: true
path:
  - alias: /daily/2023/03/22/with-utility-styles-your-css-stops-growing
    langcode: en
body:
  - value: |
      <p>When working with traditional CSS, the first thing you do when you need to style a new page or component is to open a stylesheet and start writing new CSS.</p>

      <p>Also when editing existing styles, sometimes you'll write new styles to avoid breaking the existing pages in unexpected ways in other parts of the page. This is why I've not seen many projects where the styling is maintained or refactored over time - only added to.</p>

      <p>By writing new CSS for every new page or component, the size of your stylesheets will continue to grow and be less performant and harder to maintain over time.</p>

      <p>With utility styles and frameworks like Tailwind CSS, this happens a lot less or sometimes not at all.</p>

      <p>If you need to use a class like <code>flex</code> or <code>grid</code> and you already use that in your project, there's no new CSS to add and the stylesheet doesn't grow. Because these type of classes are so specific, they're much more reusable which means less duplication of CSS rules and less CSS in total.</p>

              
    format: full_html
    processed: |
      <p>When working with traditional CSS, the first thing you do when you need to style a new page or component is to open a stylesheet and start writing new CSS.</p>

      <p>Also when editing existing styles, sometimes you'll write new styles to avoid breaking the existing pages in unexpected ways in other parts of the page. This is why I've not seen many projects where the styling is maintained or refactored over time - only added to.</p>

      <p>By writing new CSS for every new page or component, the size of your stylesheets will continue to grow and be less performant and harder to maintain over time.</p>

      <p>With utility styles and frameworks like Tailwind CSS, this happens a lot less or sometimes not at all.</p>

      <p>If you need to use a class like <code>flex</code> or <code>grid</code> and you already use that in your project, there's no new CSS to add and the stylesheet doesn't grow. Because these type of classes are so specific, they're much more reusable which means less duplication of CSS rules and less CSS in total.</p>

              
    summary: null
field_daily_email_cta: {  }