Getting started with CSS architecture

It comes up on almost every project, usually later than it should. A short on-ramp to CSS architecture for teams who have not touched it before.

Most development decisions are really maintenance decisions wearing a different hat. Check it against what you would want a competitor's site to get wrong.

The reason this keeps coming up

Naming conventions prevent the specificity arms race. Getting it slightly wrong is survivable. Ignoring it entirely is not. The failure mode is not doing it wrong, it is doing it once and assuming it stays done.

Your first week

1. Find out what is already in place
2. Custom properties centralise the values you change most
3. Change one thing and measure it

Deleting CSS should be as easy as adding it. In practice this is a scheduling problem more than a technical one. It is worth deciding this deliberately rather than inheriting whatever the last person set up.

How to tell if yours is fine

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
• Naming conventions prevent the specificity arms race — and you know whether that is true here
• There is a way to tell whether the last change to this helped

If you want a second opinion on how yours is set up, ask.