Before you invest in CSS architecture

It comes up on almost every project, usually later than it should. Before you spend anything on CSS architecture, it is worth confirming a few things are already true.

The question is rarely whether something can be built, but what it costs to keep running afterwards. The teams that stay on top of it are the ones who put it on a calendar rather than a wish list.

Prerequisites

• You can describe the outcome you want in one sentence
• Someone owns it after the work is done
• Naming conventions prevent the specificity arms race
• You have a way to tell whether it worked

Where it usually goes wrong

Custom properties centralise the values you change most. The cost of getting this wrong is rarely visible on the day it happens. The failure mode is not doing it wrong, it is doing it once and assuming it stays done.

Deleting CSS should be as easy as adding it. In practice this is a scheduling problem more than a technical one. It rarely shows up as a line item, which is exactly why it slips.

The short version

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 any of that sounds like a description of your current setup, it is fixable.