138 lines
6 KiB
YAML
138 lines
6 KiB
YAML
uuid:
|
|
- value: 400a0b92-7c40-43b0-883d-5f199fb5471f
|
|
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:10+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: 'Back to Sass and traditional CSS'
|
|
created:
|
|
- value: '2024-07-08T00:00:00+00:00'
|
|
changed:
|
|
- value: '2025-05-11T09:00:10+00:00'
|
|
promote:
|
|
- value: false
|
|
sticky:
|
|
- value: false
|
|
default_langcode:
|
|
- value: true
|
|
revision_translation_affected:
|
|
- value: true
|
|
path:
|
|
- alias: /daily/2024/07/08/back-to-sass-and-traditional-css
|
|
langcode: en
|
|
body:
|
|
- value: |
|
|
<p>I'm currently working on a project that doesn't use any atomic or utility-first CSS.</p>
|
|
|
|
<p>It uses Sass, which I haven't used for some time, but it has reminded me of some of the reasons I like the utility-first approach to CSS.</p>
|
|
|
|
<h2 id="specificity-and-cascading">Specificity and cascading</h2>
|
|
|
|
<p>With utility styles, there are no specificity or cascading issues as styles are added to each element and provide a local scope.</p>
|
|
|
|
<p>With global styles, your element can be overridden or altered by another part of CSS elsewhere in the stylesheet.</p>
|
|
|
|
<p>I've also had situations where I've had to "undo" unwanted styling that was added elsewhere, such as on a hover or focus state.</p>
|
|
|
|
<h2 id="easier-to-read-and-understand">Easier to read and understand</h2>
|
|
|
|
<p>With utility styles, I can read the classes on an element and understand straight away what styles are applied to it and start to make changes - especially when using a framework, such as Tailwind CSS.</p>
|
|
|
|
<p>With generic class names or IDs, I'm not able to do that.</p>
|
|
|
|
<h2 id="context-switching">Context switching</h2>
|
|
|
|
<p>To make changes to an element, once I've found it in the HTML, I then need to find the stylesheet (or stylesheets) that add the styling and switch between the HTML and CSS files as many times as needed.</p>
|
|
|
|
<p>Usually with utility styles, I rarely need to edit the stylesheet and can work almost exclusively in the HTML and not need to switch between files.</p>
|
|
|
|
<h2 id="concatination-and-nesting">Concatination and nesting</h2>
|
|
|
|
<p><a href="/daily/2024/07/08/back-to-sass-and-traditional-css">Something I've avoided with Sass</a>, as well as newer versions of CSS, is the over-use of nesting styles, which makes it harder to find them when searching for the correct stylesheet.</p>
|
|
|
|
<p>If there was this CSS:</p>
|
|
|
|
<pre><code class="css">.sidebar {
|
|
&-wrapper {
|
|
a {
|
|
&:hover,
|
|
&:focus {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</code></pre>
|
|
|
|
<p>If I tried searching for <code>.sidebar-wrapper</code> or <code>.sidebar-wrapper a:hover</code>, they wouldn't be found and it would take me longer to find it.</p>
|
|
|
|
<h2 id="here%27s-the-thing">Here's the thing</h2>
|
|
|
|
<p>It's taken me a while to get back into this way of working with CSS, but it does remind me <a href="/presentations/taking-flight-with-tailwind-css">why I prefer to use utility styles</a> for my own projects.</p>
|
|
|
|
|
|
format: full_html
|
|
processed: |
|
|
<p>I'm currently working on a project that doesn't use any atomic or utility-first CSS.</p>
|
|
|
|
<p>It uses Sass, which I haven't used for some time, but it has reminded me of some of the reasons I like the utility-first approach to CSS.</p>
|
|
|
|
<h2 id="specificity-and-cascading">Specificity and cascading</h2>
|
|
|
|
<p>With utility styles, there are no specificity or cascading issues as styles are added to each element and provide a local scope.</p>
|
|
|
|
<p>With global styles, your element can be overridden or altered by another part of CSS elsewhere in the stylesheet.</p>
|
|
|
|
<p>I've also had situations where I've had to "undo" unwanted styling that was added elsewhere, such as on a hover or focus state.</p>
|
|
|
|
<h2 id="easier-to-read-and-understand">Easier to read and understand</h2>
|
|
|
|
<p>With utility styles, I can read the classes on an element and understand straight away what styles are applied to it and start to make changes - especially when using a framework, such as Tailwind CSS.</p>
|
|
|
|
<p>With generic class names or IDs, I'm not able to do that.</p>
|
|
|
|
<h2 id="context-switching">Context switching</h2>
|
|
|
|
<p>To make changes to an element, once I've found it in the HTML, I then need to find the stylesheet (or stylesheets) that add the styling and switch between the HTML and CSS files as many times as needed.</p>
|
|
|
|
<p>Usually with utility styles, I rarely need to edit the stylesheet and can work almost exclusively in the HTML and not need to switch between files.</p>
|
|
|
|
<h2 id="concatination-and-nesting">Concatination and nesting</h2>
|
|
|
|
<p><a href="http://default/daily/2024/07/08/back-to-sass-and-traditional-css">Something I've avoided with Sass</a>, as well as newer versions of CSS, is the over-use of nesting styles, which makes it harder to find them when searching for the correct stylesheet.</p>
|
|
|
|
<p>If there was this CSS:</p>
|
|
|
|
<pre><code class="css">.sidebar {
|
|
&-wrapper {
|
|
a {
|
|
&:hover,
|
|
&:focus {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</code></pre>
|
|
|
|
<p>If I tried searching for <code>.sidebar-wrapper</code> or <code>.sidebar-wrapper a:hover</code>, they wouldn't be found and it would take me longer to find it.</p>
|
|
|
|
<h2 id="here%27s-the-thing">Here's the thing</h2>
|
|
|
|
<p>It's taken me a while to get back into this way of working with CSS, but it does remind me <a href="http://default/presentations/taking-flight-with-tailwind-css">why I prefer to use utility styles</a> for my own projects.</p>
|
|
|
|
|
|
summary: null
|
|
field_daily_email_cta: { }
|