2 ms·
I feel like utility classes had their moment and we can now start to pull back towards semantic CSS with the help of new features like CSS custom properties. I
by micromacrofoot 3y ago
I feel like utility classes had their moment and we can now start to pull back towards semantic CSS with the help of new features like CSS custom properties.
Instead of .f-green in your HTML you can do --f-green in your CSS.
<header class="f-green"></header>
would become
header {
color: var(--f-green);
}
or if you really hate CSS and must stay in HTML
<header style="var(--f-green)"></header>
Though the literal naming is a touch too specific anyway. Something like this is wonderful:
--f1-color: green;
header {
color: var(--f1-color);
}
then you don't have to do confusing things like
header .f-green {
color: red;
}
because you can do
header {
--f1-color: red;
}
So we can be less specific AND more modular... because you can have that f1 (font1) color be red in your header, and still do:
footer {
--f1-color: green;
}
We can make really flexible and extensible systems with modern vanilla CSS. No frameworks or preprocessors needed.