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.
You can either pay a web developer to update your fully static site once a year, or you can pay them five times a year to clean up your Wordpress install when it inevitably gets popped because that one mailback form plugin you demanded... you know the one that has never received a single non-spam submission... hasn't been updated in ten years... and also you're too cheap to pay someone to maintain your Wordpress site because "why would I do that the site is finished?"
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 :)
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.
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.
E.g: aspect-ratio: attr(width px) / attr(height px);
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.
: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>
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.
Variables don't use specificity like CSS selectors. I prefer to create a few layers for variables; one for color names, one that maps color name variables to global semantic names (i.e. --primary-cta-color: var(--blue-50) or something), and maybe go so far as to add another that maps component-specific semantics to global specific semantics (i.e. --date-picker-hover-color: var(--primary-cta-color)).
That way, you can add something like
.theme-1 {
--primary-cta-color: var(--blue-50);
}
.theme-2 {
--primary-cta-color: var(--brown-40);
}
@media (prefers-color-scheme: dark) {
.theme-1 {
--primary-color: var(--grey-30);
}
.theme-2 {
--primary-color: var(--brown-10);
}
}
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.)
#alert { color: red }
* { color: blue }
Also, this guy is calling HTML a programming language. Make of that what you will...
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.
Web components = custom elements
:shrug: