7 ms·
It is ok to say "CSS variables" instead of "custom properties"
- trvz 11mo agoThe happiest software developers are those who write HTML, CSS, PHP, and just a sprinkle of JS like they used to do 20 years ago.
- andrei_says_ 11mo agoCSS has been steadily improving across browsers, addressing pain points and real world scenarios. CSS grid and subgrid, nesting, variables, container queries, css layers… In 2025 it’s a pleasure to work with. Props to the amazing people involved in pushing the standards forward.
- JacobThreeThree 11mo agoTotally agree. There's no real complaints, and the coalescing around the Chrome layout engine means far less compatibility issues in general.
- ayaros 11mo agoI can't argue with this. Then again, writing stylesheets is still one of those things where, if you're not careful, everything spirals out of control. Often I'll make changes and wonder why nothing's happening and realize something was overridden by another rule somewhere, or I was mixing up two properties, or some other silly thing... I also find it's a bit awkward to write var(--foo) every time... I wish I could just write --foo... I suppose there's a grammar issue somewhere, or maybe it would have increased the complexity of implementations of CSS.
- brazukadev 11mo agoI dont mind the var(--foo) but I wish I could do var(attr(foo)) to use a var defined in the attribute foo.
- Latty 11mo ago`attr()` is being updated to basically do that, the modern spec lets you specify a datatype and access any attribute (with some exceptions, you can't get URL types for security reasons), then use it generally. E.g: aspect-ratio: attr(width px) / attr(height px);
- silverwind 11mo agoInterestingly, the bug for this feature is already 17 years old (https://bugzilla.mozilla.org/show_bug.cgi?id=435426 https://bugzilla.mozilla.org/show_bug.cgi?id=435426).
- alwillis 11mo ago> Then again, writing stylesheets is still one of those things where, if you're not careful, everything spirals out of control. Often I'll make changes and wonder why nothing's happening and realize something was overridden by another rule somewhere… It doesn't have to be this way; just write your CSS using Inverted Triangle CSS (ITCSS) [1] and these issues go away. [1]: https://matthiasott.com/notes/how-i-structure-my-css https://matthiasott.com/notes/how-i-structure-my-css
- interstice 11mo agoTo a large degree yes, but it blows my mind how complex some of the new features are when what seems like basics are still nonexistent. Root level variables for example (think media queries).
- zem 11mo agothe happiest software developers are those who write apps that run in a single command line process on a local linux machine (:
- bragr 11mo agoHave you ever actually met backend Linux engineers? They are, typically anyways, a very salty and unhappy bunch. I definitely include myself in that lot as something I'm working on.
- zem 11mo agoyeah, I work on commandline based compilers and code analysis tools and I'm very happy doing it! apart from the work itself being interesting, I find it really nice to just have to care about stdin, stdout, and filesystem access. I enjoy working on desktop gui apps too, but at least to my mind IPC and networking add a layer of unpleasantly error-prone concerns to deal with, and web apps dial that up to eleven.
- marssaxman 11mo agoHear, hear. Compilers are so much fun: you get data in, you put data out, and in between it's all algorithms and data structures. Nothing but the good stuff.
- afavour 11mo agoEh. I've found that increasing use of CSS variables / custom properties has made me a much happier developer. Sometimes new things aren't necessarily bad.
- ayaros 11mo agoBecause you can actually parameterize things. It's wonderful!
- graemep 11mo agoI would say that is all the more reason for writing HTML and CSS with a sprinkling of JS - you need less JS for the same result, you need CSS frameworks less. I am not so sure about PHP, but I think the intent is more "do it in the backend where possible" which i agree with.
- mystifyingpoi 11mo agoThen they drag-and-drop the project folder into FileZilla connected to their FTP shared hosting and send the invoice to the client. Although... while this seems like heaven at first, seeing this being done in practice, it is hell. It's just people don't know they are in hell. They got used to it.
- elaus 11mo agoMy job requires the whole modern pipeline with Vue front ends, Quarkus services and k8s deployments and it's suitable for what we do in our teams. But I have dozens of websites I built and am still building today in the way described and it works just as well for me. As a single developer with "simple" websites it's just great to have so little mental load when fixing some small things. Admittedly I have a small script to upload stuff via ftp (if ssh/rsync is not available), so no FileZilla anymore :)
- serial_dev 11mo agoI, too, settled on a minimalist process for deploying my blog, just build it with a Hugo, copy the files over to a cheap server, and there you go, deployed. It's the right tool for the job (for me).
- lelanthran 11mo ago> I, too, settled on a minimalist process for deploying my blog, just build it with a Hugo, copy the files over to a cheap server, and there you go, deployed. Meh. That's over-engineered[1] /s :-) -------------------- [1] I have a bash script that produces the site from markdown snippets, commits it to a repo and the VPS pulls master periodically.
- Firehawke 11mo agoOr, for that matter, using GitHub Actions to do the final Hugo build and remote deployment when you do a git push.
- 11mo ago
- Minor49er 11mo agoNo way. There have been so many nice improvements to all of those languages over the last two decades that make development so much safer to implement, faster to code, and easier to test. I personally would lose my mind if I had to go back to the way things were running 20 years ago
- draw_down 11mo ago[dead]
- GaryBluto 11mo agoI'd also say HTML4 is much nicer to write than HTML5. I know it's technically "obsolete", but it was more pleasant to work with (and allows your site to be accessible on almost every browser/version).
- foldr 11mo agoThere must be some confusion here. HTML 5 simplified doctypes, codified rules for interpreting malformed HTML, and added some new tags. Unless you’re using some crazy deprecated tags, you should just be able to write HTML4 and update the doctype.
- GaryBluto 11mo agoBy HTML4 I mean non-use of HTML5/CSS3 features. I'd also add that, while still supported by browsers, HTML5 deprecated lots of elements and parameters that I find handy.
- MarsIronPI 11mo agoWhich deprecated HTML4 features do you use? Also, what do you think of the more semantic elements in HTML5 such as <date>?
- GaryBluto 11mo agoI occasionally use font tags. As an example, this: <p><font face="font">Your text here</font></p> Looks way better than: <p style="font-family: 'font', sans-serif;"></p> to me.
- MarsIronPI 11mo agoMay I ask why you compare the <font> element to using inline style rather than giving the <p> a class and styling it in a separate stylesheet? Doing it this way also allows users to override your style with extensions like Stylus. (Again, not trying to criticize, just trying to understand.)
- paulddraper 11mo agoFunnily enough, I did all that. And it made me want to claw my eyes out. Browser idiosyncrasies, horrendous security vulnerabilities, the blood sacrifices to do basic things with CSS, trying to debug in IE, the daily “maybe Flash isn’t that bad” introspection. There are many good things about this world. 2005 web dev is not among them.
- lelanthran 11mo ago> Browser idiosyncrasies, horrendous security vulnerabilities, the blood sacrifices to do basic things with CSS, ... > There are many good things about this world. 2005 web dev is not among them. Maybe, but the 2005 process will work better now, because the current process was started as a way to paper over all those > Browser idiosyncrasies, horrendous security vulnerabilities, the blood sacrifices to do basic things with CSS, Now that those things are smaller issues, "Write JS, copy it to the server" is not so stupid. Especially if you've got mostly web components.
- paulddraper 11mo agoYou can pry flexbox out my cold dead hands. Go and vertically center a div in whatever way you see fit.
- lelanthran 11mo agoThat was my point, with the tech improvements we now have in frontend many of the reasons for abandoning the 2005 process becomes moot. New tech makes the old process more viable, not less.
- paulddraper 11mo agoThe article is about CSS properties. Is that new tech or new process?
- lelanthran 11mo ago
- bossyTeacher 11mo agoGiven the ageist in tech, I would guess most devs actually writing code were still children 20 years ago and some were still babies so I don't think they are used to life before build tool JS. And writing plain js is outrageous like stepping outside in your underwear.
- mrcsharp 11mo agoSwap PHP with C# and we're in full agreement. I'm not a CSS expert but being able to do so much with it before having to reach for JS is fantastic. And with Blazor, some of that JS sprinkle isn't even needed anymore.
- ayaros 11mo agoI've just been calling them that anyway since I found out they existed. Also, this guy is calling HTML a programming language. Make of that what you will...
- dentemple 11mo agoIt is a language, just not a turing complete one. Pidgen is a type of language, too, but you wouldn't be writing Shakespeare in it. There's nothing to be pedantic about HTML here, and it just seems so absolutely pointless to me that people try to find a way to be.
- wk_end 11mo agoIt's not that it's not a language, it's that it's not a programming language. You don't write programs in it.
- ayaros 11mo agoThat's where I'm coming from.
- deleted 11mo ago[deleted]
- nashashmi 11mo agoIt is just a syntax language, used in programming web pages. that would be a better descriptor
- MrJohz 11mo agoWhy is that a better descriptor? I don't understand this desire to demarcate between programming languages and whatever a "syntax" language is. All languages have syntax, even natural languages - it's one of the terms we've borrowed from linguists. HTML is one of the languages I use when I am programming. In the sense, I really struggle to see the argument that it isn't a programming language, unless someone is using a very precise definition of "programming language" that I'm not privy to. There's a bunch of well-defined stuff it _isn't_ (e.g. Turing-complete), and a bunch of well-defined stuff that it is (e.g. declarative, or a markup language), but as far as I can tell there's no better definition of "programming language" than "language used for programming", and it certainly seems to fit that bill.
- afavour 11mo agoCSS variables = custom properties Web components = custom elements :shrug:
- graypegg 11mo ago"Web Components" is a term I do try to avoid though. "Components" is a word loaded with very specific meaning to a lot of JS folk, and it can be really hard to describe the ways in which a "Web Component" does not behave like a "React Component" for example. "Custom Elements" is meaningfully useful to push for!!
- brazukadev 11mo agoThe same for Web Components (in place of Custom Elements).
- lcnPylGDnU4H9OF 11mo agoThis would make sense if we defined them by inheriting `HTMLComponent` (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) and registered them with the DOM using `document.createComponent` (https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement https://developer.mozilla.org/en-US/docs/Web/API/Document/cr...).
- nashashmi 11mo agoLooking at example 5: :root { --color: blue; } div { --color: green; } #alert { --color: red; } * { color: var(--color); } <p>I inherited blue from the root element!</p> <div>I got green set directly on me!</div> <div id='alert'> While I got red set directly on me! <p>I’m red too, because of inheritance!</p> </div> Excuse my negativity, but this is messed up. I am trying to rationalize whyyyy???. It seems every object is given variables (--abc). And then there are global variables and local variables. I guess this is the "cascading" feature. var is a function computed at the time of instantiation. And refers to local variables first. Then looks at global variable. Inheritance comes from ?? The p tag seems it is not root so therefore it is not blue. Having explained it, I think about it better, but this really messes up how I thought of CSS. CSS is where the second stanza overwrites the first stanza. Yet global and local variables really hurts my head. A few complex CSS files later, it is bound to be unusable to determine result without getting a computer program to help.
- wrs 11mo agoI think you are demonstrating the title of this article. The --color variable is inherited through your style sheet cascade, just like any built-in property would be. In other words, CSS variables are pretty much custom properties. In the last line of CSS, you went on to equate a built-in property with the value of the variable everywhere. So you’ve essentially made a new “property” that works just like the builtin color property. (Disclaimer: I’m not an expert in modern CSS, so this could be imprecise.)
- zdragnar 11mo agoIn OP's example, the <p> would be colored blue, because the * selector directly targets it, taking priority over the inherited value from the #alert parent element if the CSS had been normal assignment: #alert { color: red } * { color: blue } Variables behave slightly differently, in that they don't follow specificity rules. The definition of the variable / property behaves like a scope, and affects everything within it, hence the <p> being colored red instead of blue.
- 11mo ago
- cantSpellSober 11mo agoand the name of the function we use to access them is var()! Not customProperty().
- marcosdumay 11mo agoThe idea of naming the stuff you use with a "var" keyword as "properties" is really bad.
- 9dev 11mo agoWhy so? By adding --foo: bar to a selector, you’re actually adding a new, custom, property named --foo to it, just as the display in display: block would be another property. It’s not a bad analogy, but how the spec intends it to work.
- marcosdumay 11mo agoIf you don't want people to universally call them "variables", you should use another keyword. Or you can keep the keyword and change the name. Either one is fine, the combination is bad.
- o11c 11mo agoDo CSS variables let you count arbitrarily-deep nesting levels? That is, can a rule for `x` defined a variable that matches the number in the immediate text here? <x>1<x>2<x>3</x></x></x>
- lcnPylGDnU4H9OF 11mo agoVariables are defined and cascade the same as any other property. You can define variables and other properties on the third-level x element in your markup like so: x > x > x { --my-variable: 'my-value'; display: inline; /* etc. */ } It would be used by defining the value of another property as the value of the variable. Note the selectors don't have to match; in this case all x elements will have their content properties set to the --my-variable value but only the third-nested x element will have a --my-variable value set. x { content: var(--my-variable); } Not that this is a particularly coherent example but hopefully you get the idea.
- o11c 11mo agoSo, the answer is "no", since that's just old-school finite depth counting.
- kizmarh 11mo agoNot by themselves, at least today, as we can't currently modify the value of a custom property by using itself in the calculation. But in the future we will have an `inherit()` functional notation that will unlock this (and at least Chrome implemented it in Canary already — https://blog.kizu.dev/play-with-inherit-function/ https://blog.kizu.dev/play-with-inherit-function/). It is possible to use style queries and some hacks (https://kizu.dev/self-modifying-variables/ https://kizu.dev/self-modifying-variables/) to achieve this today, but that doesn't bring this closer to production, as Firefox still does not support them (but will be soon).