4 ms·

Why "variables" in CSS are harmful

7 points by jawngee 18y ago

trezor 18y ago
He used reusability as an argument. So having to retain the same values 100 different places in the stylesheet(s) makes them more reusable and maintainable than having the ability to define constants once? What a joke.
- halo 18y ago
  If you're using the same values in 100 different places in a stylesheet you're frankly using them wrong. There's actually a decent point there - adding variables will undoubtedly encourage that sort of thinking and create further constant abuse rather than encouraging people to use the cascade and inheritance. That said, I'm not sure if that potential problem alone justifies its lack of introduction - there are legitimate use cases as well where they will improve clarity, the ability to provide complex CSS as boilerplate and get people to change the constants to suit their needs would be useful (e.g. easy recycling of complex column code) and I think their argument about code reuse is pretty much nonsense too.
  - trezor 18y ago
    I'll have to agree and disagree with that statement. Sometimes your job is to further develop an existing solution with crappy CSS and poor design, leaving 50% or more of the CSS redundant compared to a more optimal solution. In this case, CSS has clearly been applied wrong, but if you want to be able to work with it consistently constants would have been a powerful tool in your toolkit. Sometimes you want whatever page or site you are working on to work with a defined palette. Maybe the same colour should be used for either foreground or background colour depending on its current state (inactive, selected, hovered) and so on. In many such cases, depending on complexity, trying to minimize the redundancy in the CSS practically makes the CSS unreadable or unmaintainable since the different attributes and settings for one selector is spread all across your CSS definitions. In other words: Solving one problem creates a new problem, maybe equally bad or worse. Some might suggests we should be able to reference selectors in selectors. Like "make this A:hover have the background colour of A:non-hover's colour-attribute". That however would make CSS much more like a programming language than a declarative layout language. It would also run the risk of recursiveness and add confuzion with regard to state-based behaviour. No matter what syntax is used, I can't imagine this resulting in more natural or readable CSS. As far as constants go, I can't see them making any more problems or any worse problems than the ones discussed above. Among many evils, I would consider constants one of the smallest. But who knows... Maybe I just lack imagination.
marijn 18y ago
The point that this can be done as a separate, server side processing phase has merit. Too bad it had to be wrapped in a ridiculously long, patronising article, containing such gems as the observation that style-sheets are rarely longer than a hundred lines. Right. And I'm not even going to comment on the choice of background.
- anon 18y ago
  Sometimes it can be done on the client side too. It's called XSLT.
- Tichy 18y ago
  I feel the server side thing is not a good argument, after all, there is not always a server side. HTML documents can be distributed standalone. Also, it is much harder to do CGI scripting than to deal with possible constants in CSS.
sysop073 18y ago
I tried to read the essay but as soon as I saw the page my eyes started burning
- Hexstream 18y ago
  Also, scrolling this page is surprisingly CPU-intensive. At least on Firefox 2 Ubuntu.
  - pistoriusp 18y ago
    When I used FreeBSD I had a lot of lag when pages had transparency, probably because Xorg wasn't accelerated.
  - sysop073 18y ago
    I had that problem too, I assumed it was my computer's fault. Anybody know what the page is doing that makes scrolling suffer so badly? Is it just the transparency like pistoriusp mentioned? It was bad on Firefox 2 on Gentoo; it seems to be fine on Firefox 3 on Windows XP
brianmckenzie 18y ago
It is rare that an essay makes its point in such an unintended fashion.
alexfarran 18y ago
tl;dr - "Because people are stupid and wouldn't understand them." How patronising.

7 points by jawngee 18y ago

He used reusability as an argument. So having to retain the same values 100 different places in the stylesheet(s) makes them more reusable and maintainable than having the ability to define constants once? What a joke.

halo 18y ago
If you're using the same values in 100 different places in a stylesheet you're frankly using them wrong. There's actually a decent point there - adding variables will undoubtedly encourage that sort of thinking and create further constant abuse rather than encouraging people to use the cascade and inheritance. That said, I'm not sure if that potential problem alone justifies its lack of introduction - there are legitimate use cases as well where they will improve clarity, the ability to provide complex CSS as boilerplate and get people to change the constants to suit their needs would be useful (e.g. easy recycling of complex column code) and I think their argument about code reuse is pretty much nonsense too.
- trezor 18y ago
  I'll have to agree and disagree with that statement. Sometimes your job is to further develop an existing solution with crappy CSS and poor design, leaving 50% or more of the CSS redundant compared to a more optimal solution. In this case, CSS has clearly been applied wrong, but if you want to be able to work with it consistently constants would have been a powerful tool in your toolkit. Sometimes you want whatever page or site you are working on to work with a defined palette. Maybe the same colour should be used for either foreground or background colour depending on its current state (inactive, selected, hovered) and so on. In many such cases, depending on complexity, trying to minimize the redundancy in the CSS practically makes the CSS unreadable or unmaintainable since the different attributes and settings for one selector is spread all across your CSS definitions. In other words: Solving one problem creates a new problem, maybe equally bad or worse. Some might suggests we should be able to reference selectors in selectors. Like "make this A:hover have the background colour of A:non-hover's colour-attribute". That however would make CSS much more like a programming language than a declarative layout language. It would also run the risk of recursiveness and add confuzion with regard to state-based behaviour. No matter what syntax is used, I can't imagine this resulting in more natural or readable CSS. As far as constants go, I can't see them making any more problems or any worse problems than the ones discussed above. Among many evils, I would consider constants one of the smallest. But who knows... Maybe I just lack imagination.

marijn 18y ago

The point that this can be done as a separate, server side processing phase has merit. Too bad it had to be wrapped in a ridiculously long, patronising article, containing such gems as the observation that style-sheets are rarely longer than a hundred lines. Right. And I'm not even going to comment on the choice of background.

anon 18y ago
Sometimes it can be done on the client side too. It's called XSLT.
Tichy 18y ago
I feel the server side thing is not a good argument, after all, there is not always a server side. HTML documents can be distributed standalone. Also, it is much harder to do CGI scripting than to deal with possible constants in CSS.

sysop073 18y ago

I tried to read the essay but as soon as I saw the page my eyes started burning

Hexstream 18y ago
Also, scrolling this page is surprisingly CPU-intensive. At least on Firefox 2 Ubuntu.
- pistoriusp 18y ago
  When I used FreeBSD I had a lot of lag when pages had transparency, probably because Xorg wasn't accelerated.
- sysop073 18y ago
  I had that problem too, I assumed it was my computer's fault. Anybody know what the page is doing that makes scrolling suffer so badly? Is it just the transparency like pistoriusp mentioned? It was bad on Firefox 2 on Gentoo; it seems to be fine on Firefox 3 on Windows XP

brianmckenzie 18y ago

It is rare that an essay makes its point in such an unintended fashion.

alexfarran 18y ago

tl;dr - "Because people are stupid and wouldn't understand them." How patronising.