4 ms·
CSS is getting variables: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_v... a
by phyller 9y ago
CSS is getting variables: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_v... and I cannot wait to use them. This is the main reason I will be pushing to stop supporting all versions of IE. If you don't like them, you don't have to use them. But I'll give an example of why they are super super handy and long overdue.
Let's say I want to enforce a color palette across my app. I define color variables, and only use those predefined color variables. If the palette changes, I just change the variable, and everything changes. Great, an easy way to have simple and consistent colors on a large project with multiple devs. Even better, I can do this now, with prepocessors like SCSS. After years of using it in an increasingly large project I have zero regrets, I only wish we did it sooner.
But think of this further use case: we want to have different color palettes based on different situations. For the same markup. We want the user to be able to toggle between dark mode and light mode. We want to change the colors when the user is printing something (especially in dark mode). I can't do this in SCSS directly without native CSS variables. I have to compile multiple CSS files from our source ahead of time, and dynamically switch between them, which feels like a hack and causes a lag while the files are fetched.
With CSS variables, I can change the variable to another value inside a certain class. So to toggle between light or dark mode I can just add a class to the body element on the page. I can use the print @media rule to change the variable values when printing. I can do the same with sizes based on the screen dimensions.
This is so simple and clear. When devs are maintaining or adding code they don't need to think about it. Just use the right variable and everything will work out. The alternative to using variables (the new CSS ones or by generating multiple stylesheets using CSS preprocessor variables) is to redefine all the styling that you need to change under a new class. So I have a stylesheet for a feature, then a smaller one that changes all the colors for that feature when the "dark-mode" class is on the body tag, and another for @media print. And then every dev needs to be aware of that and maintain and check all 3 versions whenever they make a change.
Needless to say, I entirely disagree with this article :) I don't think I am the only one who has struggled to understand why CSS is so difficult to use. We've had a few decades to refine it, we should be in a better place by now.
- dbbk 9y agoYou can use them now with PostCSS if you don't mind restricting your variables to the root level (it can't polyfill the cascading nature). You could also use them natively if you don't care about IE, which is becoming more and more reasonable.