It is ok to say "CSS variables" instead of "custom properties"

Then 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.

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

I'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).

No 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

the happiest software developers are those who write apps that run in a single command line process on a local linux machine (:

Eh. 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.

[dead]

The <p> tag is red because it is inside of #alert. Anything inside of #alert has the color variable set to red.

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);
        }
    }

I 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.)

It's very straightforward. It doesn't matter whether the property name starts with -- or not, it behaves exactly the same way in terms of inheritance.

wow great example - I'm also baffled by this. is this just not a great example because it seems like it's reinventing the wheel

It 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.

It is one...

"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!!

This would make sense if we defined them by inheriting `HTMLComponent` (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/cr...).