diff --git a/source/_daily_emails/today.md b/source/_daily_emails/2024-07-07.md similarity index 100% rename from source/_daily_emails/today.md rename to source/_daily_emails/2024-07-07.md diff --git a/source/_daily_emails/2024-07-08.md b/source/_daily_emails/2024-07-08.md new file mode 100644 index 00000000..bbc6fa90 --- /dev/null +++ b/source/_daily_emails/2024-07-08.md @@ -0,0 +1,63 @@ +--- +title: Back to Sass and traditional CSS +date: 2024-07-08 +permalink: daily/2024/07/08/back-to-sass-and-traditional-css +tags: + - software-development + - css + - tailwind-css +cta: ~ +snippet: | + I'm currently working on a project without atomic CSS styles. +--- + +I'm currently working on a project that doesn't use any atomic or utility-first CSS. + +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. + +## Specificity and cascading + +With utility styles, there are no specificity or cascading issues as styles are added to each element and provide a local scope. + +With global styles, your element can be overridden or altered by another part of CSS elsewhere in the stylesheet. + +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. + +## Easier to read and understand + +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. + +With generic class names or IDs, I'm not able to do that. + +## Context switching + +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. + +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. + +## Concatination and nesting + +[Something I've avoided with Sass][nesting], 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. + +If there was this CSS: + +```css +.sidebar { + &-wrapper { + a { + &:hover, + &:focus { + } + } + } +} +``` + +If I tried searching for `.sidebar-wrapper` or `.sidebar-wrapper a:hover`, they wouldn't be found and it would take me longer to find it. + +## Here's the thing + +It's taken me a while to get back into this way of working with CSS, but it does remind me [why I prefer to use utility styles][talk] for my own projects. + +[nesting]: {{site.url}}/daily/2024/07/08/back-to-sass-and-traditional-css +[talk]: {{site.url}}/talks/taking-flight-with-tailwind-css