This content originally appeared on Go Make Things and was authored by Go Make Things
Yesterday, I wrote about how I ditched my Sass build step for vanilla CSS.
As part of that process, I ended up refactoring a lot of code in a way that made it simpler and more efficient. For example, my old Sass files were filled with code like this…
a:not(.btn):hover,
a:not(.btn):active,
a:not(.btn):focus,
.active a:not(.btn),
[aria-current="page"] {
border-bottom: 0.125em solid $color-secondary;
color: $color-black;
@media (prefers-color-scheme: dark) {
color: $color-white;
}
}Sass supports media query nesting, which vanilla CSS does not. Rewritten for vanilla CSS, it looks like this…
a:not(.btn):hover,
a:not(.btn):active,
a:not(.btn):focus,
.active a:not(.btn),
[aria-current="page"] {
border-bottom: 0.125em solid var(--color-secondary);
color: var(--color-black);
}
@media (prefers-color-scheme: dark) {
a:not(.btn):hover,
a:not(.btn):active,
a:not(.btn):focus,
.active a:not(.btn),
[aria-current="page"] {
color: var(--color-white);
}
}I had so many instance in my CSS file where I was switching from one color to another color for dark mode.
Often, white would become black, or black would become white. It was relatively trivial in Sass, but in CSS, it became tedious, especially for declarations with multiple, batched selectors like the example above.
So… I ended up creating some new CSS variables that handle the color switch automatically.
I setup a --color-{light color}-dm-{dark color} naming pattern for these common color switches, and update them in just one place: my _config.css file.
/* Automatic Dark Mode - Light Variants */
--color-black-dm-white: var(--color-black);
--color-white-dm-black: var(--color-white);
/* Automatic Dark Mode - Dark Variants */
@media (prefers-color-scheme: dark) {
--color-black-dm-white: var(--color-white);
--color-white-dm-black: var(--color-tertiary-dark);
}That example above then gets rewritten like this…
a:not(.btn):hover,
a:not(.btn):active,
a:not(.btn):focus,
.active a:not(.btn),
[aria-current="page"] {
border-bottom: 0.125em solid var(--color-secondary);
color: var(--color-black-dm-white);
}Across my entire project, this resulted in a massive reduction in CSS.
And this is another big benefit of using vanilla CSS over Sass. By no longer obfuscating the code that gets generated, you have the chance to write better, cleaner CSS.
🎉 Preorder Getting Sh!t Done today and get 40% off! Be more productive, get more done, and feel more in-control of your work and life. Click here to learn more.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2024-08-06T14:30:00+00:00) Vanilla CSS and efficiencies over Sass. Retrieved from https://www.scien.cx/2024/08/06/vanilla-css-and-efficiencies-over-sass/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.