65 lines
3.1 KiB
YAML
65 lines
3.1 KiB
YAML
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: { }
|