CSS architecture, explained without the jargon

The advice here is unglamorous, which is probably why it gets skipped. Here is CSS architecture without the vocabulary that usually surrounds it.

The question is rarely whether something can be built, but what it costs to keep running afterwards. The failure mode is not doing it wrong, it is doing it once and assuming it stays done.

The short version

Naming conventions prevent the specificity arms race. Where this goes wrong is almost never a lack of knowledge. If it only works because one person remembers to do something, it does not work yet.

Why people complicate it

Most of the confusion comes from tooling rather than from the idea itself. That sounds obvious written down. It is still the thing most often skipped.

Custom properties centralise the values you change most. There is a version of this that is over-engineered, and it is worth avoiding. Check it against what you would want a competitor's site to get wrong.

Making it stick

Deleting CSS should be as easy as adding it. None of that requires a large budget, only a decision and someone to own it. Write the reasoning down alongside the decision, because the reasoning is what changes first.

What this looks like day to day

Code gets read far more often than it gets written, and usually by someone with less context than the author had. Three things worth confirming about CSS architecture before you move on:

• Someone can say what the current setup is without going to look
• Custom properties centralise the values you change most — and you know whether that is true here
• There is a way to tell whether the last change to this helped

None of this needs a rewrite. Most of it is a morning's work once someone decides to do it.