6 ms·
“Variables” in CSS are harmful (2008)
- dmitri1981 9y agoIt’s hard to take an article with this kind of background seriously
- reneherse 9y agoWorth a click through to see just how egregious it is, however! ;)
- Manfred 9y agoThankfully it's also a great example of how to write good markup so the page is perfectly usable and readable with styles turned off.
- mpr6 9y agopulled directly from their middle school music teacher's button up.
- disconnected 9y agoWorth noting that this document is ~10 years old.
- cantrip 9y agoReally missed an opportunity for the "considered harmful" trope.
- zeveb 9y agoI 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..")))))
- ChrisSD 9y agoPardon my ignorance but how is that different from putting <style> and <script> tags inline in HTML? Other than the syntax of course.
- Rotten194 9y agoThe 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).
- bvrmn 9y ago> When people are compiling to something you designed as an end-user interface, you've failed. CSS is a good end-user interface for many things without variables. And people will use preprocessors for CSS no matter how many features it will have because of many reasons including "ugly and unreadable" syntax. It's better to leave CSS and HTML as simple primitive bytecode for web UI with powerful compilers instead of developing epic w3 specs leading to numerous bugs in browser implementations.
- cormacrelf 9y agoThe arguments would seem more powerful if the author was aware of today’s preprocessing stack. I expanded references to “constants” to mean any additional language features, and it was a better argument, but I have no problem with improving CSS usability with nesting and variables. If it had those I wouldn’t use SCSS at all, just autoprefixer. It’s probably harder to write a buggy implementation of them than a correct one.
- sethrin 9y ago> It's better to leave CSS and HTML as simple primitive bytecode for web UI with powerful compilers instead of developing epic w3 specs leading to numerous bugs in browser implementations. Haven't we pretty much already crossed that bridge? I recall quite a few bugs in CSS specs.
- deleted 9y ago[deleted]
- thedz 9y agoThis 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.
- dsego 9y ago> 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.
- memco 9y agoI've been hand rolling CSS for pretty much every site I've built since 2001. I can't think of a single site with more than a few hundred lines. Most of the time I use a reset which adds more, but the actual site specific stuff has always been relatively small. Anecdata… mumble, mumble. With respect to the premise of the article: I appreciate having variables because it allows more specificity about what a color or unit is supposed to mean in a given context, which I find valuable.
- dbbk 9y agoI'm quite baffled by this... I'm presuming this was in the context of the time when tables were used for layout everywhere
- bryanrasmussen 9y agoin my experience tables were hardly used anywhere for layout in 2008.
- zimpenfish 9y agoA single example, sure, but quite a high profile site: news.bbc.co.uk was using tables for layout in 2008 - https://web.archive.org/web/20080306220511/http://news.bbc.co.uk/ https://web.archive.org/web/20080306220511/http://news.bbc.c...
- bryanrasmussen 9y agoOk maybe I was just lucky in where I worked.
- dsego 9y agoIn 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.
- dang 9y agoThe article fared little better at the time: https://news.ycombinator.com/item?id=267223 https://news.ycombinator.com/item?id=267223.
- pleasecalllater 9y agoYea... and the background is so professionally readable. I suppose the arguments are as well, but I cannot read it. My eyes are bleeding.
- Shorel 9y agoThis 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.
- trevorstarick 9y agoExcept CSS variables have existed nativity for a while now: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_v...
- dkonofalski 9y agoI 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.
- GuiA 9y agoThe HTML/CSS/JS split is great ideologically, but have you looked at the source code of any web app lately? It’s a jumble of all 3, with modern frameworks like react encouraging you to work with the whole, injecting things as needed here and there. I remember learning CSS in the early 2000s, with the book showing how one could have separate stylesheets for on screen display vs printing. You’d think this approach would have aged nicely, now that websites need to render on a large variety of screen densities/sizes/aspect ratios/etc. Well no, now we have huge bloated CSS files full of media queries and weird things that are impossible to make sense of unless you’ve spent a few weeks in the codebase. So yes, nice in theory but completely outdated in practice given the horrible Beast DOM has become. Perhaps that approach was too idealistic all along, and only sort of worked in the beginning, when the web was really basic and most people were on a 1024x768 display. The form is the function and also the medium and the message, and it’s impossible to place abstract boundaries on where the content vs presentation vs interaction lie.
- meesterdude 9y agoI work with rails basically every day, and your experience does not match mine. In the codebases I've worked with, almost all of them are cleanly and clearly separated. HTML is in one directory, css and js in another. It's true react has a... different approach, but it's certainly not the only way to do it.
- Nickersf 9y agoI 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.
- aalleavitch 9y agoI love that this highly opinionated article about the correct way to write css is styled just hideously.
- phyller 9y agoCSS 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.
- kenning 9y agoCSS 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.