“Variables” in CSS are harmful (2008)

The arguments here don't really make sense.

The author says that a constant lookup table is extra implementation complexity while also saying it's simple and something every programmer should have done as an educational exercise. Considering the density of browser specifications, talking about symbolic constants as feature bloat is some serious windmill-tilting.

They then say that named constants make code harder to understand -- which is obviously an opinion, but one that goes against almost all standard practice. The benefits of naming constants and avoiding magic numbers are well documented, I think. Yes people can go overboard with this, but the solution isn't to not have named constants as an option at all.

The kicker I think is the sheer popularity of CSS preprocessors. When people are compiling to something you designed as an end-user interface, you've failed.

The problem with CSS variables isn't the concept, its that --this-syntax is ugly and unreadable af (admittedly bikeshedding here).

I get that this article is 10 years old now but I like the principle of it, to a certain extent. My biggest gripe with some of the newer usage of CSS (including BEM and SMACSS) is that it loses the separation of concerns that is supposed to make HTML/CSS modular. The intent of the web was for content and we're getting farther and farther away from that to the point where now even CSS can cause bit-rot. People are using CSS for everything as tightly-packaged modules that look great when the CSS is loaded correctly but that don't really function without the CSS/HTML as explicitly paired. I know that's what some people want now but I can't help but feel like this is contributing to the mess.

That being said, variables are useful. I have no problem using variables in a CSS preprocessor and don't really care one way or the other whether it's included in the CSS spec.

This is an article from 2008.

I'd take most arguments in this with a grain of salt, as it predates much of the progress that CSS (and things like Sass/Less/PostCSS) have made over the past decade.

The article fared little better at the time: https://news.ycombinator.com/item?id=267223.

> On the other hand, CSS style sheets are short. They are not much bigger than one editor window. Very few people (only professional designers, it seems) write style sheets longer than a hundred lines.

Even for 2008 this is just wrong. Very few people write any kind of CSS at all. But those who do surely write more.

In 2018 we write our CSS in JS. We also write HTML in JS. Then we wrap it in a browser and download as a standalone app.

I love that this highly opinionated article about the correct way to write css is styled just hideously.

CSS is getting 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.

CSS variables are useful if you're a professional web developer. But I would say websites are excessively designed now, especially the kind of ones I visit (other than this).

It's pretty incredible just what an arms race web design is. Web browsers should really not be chugging, ever, in 2018.

This is just an example of NIH syndrome.

And not having variables in CSS is more harmful than having them. In the form of a dozen preprocessors and alternative CSS languages that compile to CSS.

I like reading opinions and ideas on programming from the past and contrasting them to the current state of things. I wonder how the author sees things 10 years later.

I think he's wrong here: requiring that folks preprocess some CSS-variant-with-constants into CSS-without-constants just multiplies the number of entities (by however many CSS variants are then introduced). CSS's lack of constants is a glaring design error.

If we want to reduce the total number of entities, then we should examine unifying HTML, CSS & scripting. As I've indicated elsewhere, I think that something like this would be awesome:

    ;; adapted from https://www.w3schools.com/howto/howto_css_modals.asp
    
    (html
     (head
      (title "modal-box-example")
      (style
        ;; The Modal (background)
       (.modal
        ;; Hidden by default
        (display none)
        ;; Stay in place
        (position fixed)
        ;; Sit on top
        (z-index 1)
        (left 0)
        (top 0)
        ;; Full width
        (width "100%")
        ;; Full height
        (height "100%")
        ;; Enable scroll if needed
        (overflow: auto)
        ;; Fallback color
        (background-color (rgb 0 0 0))
        ;; Black w/ opacity
        (background-color (rgba 0 0 0 0.4)))
    
       ;; Modal Content/Box
       (.modal-content
        (background-color #x"fefefe")
        ;; 15% from the top and centered
        (margin "15%" auto)
        (padding 20px)
        (border 1px solid #x"888")
        ;; Could be more or less, depending on screen size
        (width "80%"))
    
       ;; The Close Button
       (.close
        (color #aaa)
        (float right)
        (font-size 28px)
        (font-weight bold))
    
       ((.close:hover .close:focus)
        (color black)
        (text-decoration none)
        (cursor pointer)))
    
      (script
       (with-elements-by-id
        ((modal "myModal") (btn "myBtn")) document
        (let ((span (aref (get-elements-by-class-name document "close") 0)))
          (setf (on-click btn) (lambda () (setf (display (style modal)) "block"))
                (on-click span) (lambda () (setf (display (style modal)) "none"))
                (on-click window) (lambda (event)
                                    (declare (ignorable event))
                                    (setf (display (style modal)) "none")))))))
     (body
       ;; Trigger/Open The Modal
      ((button id "myBtn") "Open Modal")
    
      ;; The Modal
      ((div id "myModal" class "modal")
    
       ;; Modal content
       ((div class "modal-content")
        ((span class "close") ×)
        (p "Some text in the Modal..")))))

Worth noting that this document is ~10 years old.

It’s hard to take an article with this kind of background seriously

Yea... and the background is so professionally readable. I suppose the arguments are as well, but I cannot read it. My eyes are bleeding.

Really missed an opportunity for the "considered harmful" trope.