Why I'm Excited About Native CSS Variables
philipwalton.com
Why I'm Excited About Native CSS Variables
1–10 of 33 posts
Re: Why I'm Excited About Native CSS Variables
#2I quite like the example of styling buttons in the header using a more component-like architecture, this could lead to some interesting developments. I look forward to seeing this progress.
Re: Why I'm Excited About Native CSS Variables
#3What I am most excited about is manipulating these using javascript, which is also something you cannot do with a CSS processor because the values are baked into the CSS.
Re: Why I'm Excited About Native CSS Variables
#4These look neat. I wonder what they will be like to debug. I spend a lot of my job fixing problems that the designers have left in the CSS, like "Why on this page is the button margin 2em, but on all the other pages it's 1.5em." I guess with variables thrown into the mix, it'll make this debugging harder.
Re: Why I'm Excited About Native CSS Variables
#5> In fact, I think it’s confusing to call them variables at all. They’re actually CSS properties, which gives them an entirely different set of capabilities and allows them to solve an entirely different set of problems.
I think this is the problem people have with them - they don't try to be a good solution to the problem people actually have. A better designed solution would have the most common case simple and elegant, and more esoteric use-cases, like the ones they are trying to solve, may have esoteric solutions like the proposed one.
Re: Why I'm Excited About Native CSS Variables
#6> In fact, I think it’s confusing to call them variables at all. They’re actually CSS properties, which gives them an entirely different set of capabilities and allows them to solve an entirely different set of problems. I think this is the problem people have with them - they don't try to be a good solution to the problem people actually have. A better designed solution would have the most common case simple and ele…
[deleted]
Re: Why I'm Excited About Native CSS Variables
#7What I am most excited about is manipulating these using javascript, which is also something you cannot do with a CSS processor because the values are baked into the CSS.
I'm very excited for dynamic, succinct templating.
Re: Why I'm Excited About Native CSS Variables
#8Being able to manipulate these from JS would be great. Then compile-to-js languages (Clojurescript & Elm) can use their (better) programming model for styles as well.
Re: Why I'm Excited About Native CSS Variables
#9> In fact, I think it’s confusing to call them variables at all. They’re actually CSS properties, which gives them an entirely different set of capabilities and allows them to solve an entirely different set of problems. I think this is the problem people have with them - they don't try to be a good solution to the problem people actually have. A better designed solution would have the most common case simple and ele…
CSS Variables have been in Firefox for a year and a half now, and I’ve been using them in my own projects for at least a year, while I’m producing the thing in the first place—then when I have it as I like it, if it’s not purely for me, I rewrite it for inferior browsers (though I believe I could use something like PostCSS instead; I just haven’t).
They really are a marvellous thing; my favourite example would be the construction of truly responsive interfaces, tweaked for optimality at many levels and continuous, rather than just things with three or four breakpoints; with preprocessors, it’s tedious and painful; with CSS variables it’s easy and obvious—it pushes you in a direction that is so much easier to make.
In essence, they are solving a substantially different set of problems, but one that is more useful and more general; the sorts of things people did with preprocessor variables can normally be done in better ways with CSS Variables; it helps guide you to a better position.
Re: Why I'm Excited About Native CSS Variables
#10These look neat. I wonder what they will be like to debug. I spend a lot of my job fixing problems that the designers have left in the CSS, like "Why on this page is the button margin 2em, but on all the other pages it's 1.5em." I guess with variables thrown into the mix, it'll make this debugging harder.
Why harder? Surely if people actually use them, you’ll at least have labels attached to things—semantic labels, hopefully, rather than simple and opaque values?
(I wish people would use `calc()` too where appropriate.)