oliverdavies.uk/content/node.400a0b92-7c40-43b0-883d-5f199fb5471f.yml

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 {
        &amp;-wrapper {
          a {
            &amp;:hover,
            &amp;: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="/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 {
        &amp;-wrapper {
          a {
            &amp;:hover,
            &amp;: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>

              
    summary: null
field_daily_email_cta: {  }