Evolving CSS

I recently built this site out from scratch. On this sort of rare occasion where I’m staring down a greenfield design opportunity, I try to re-examine my practices around CSS, how to organize it, and what tooling to use with it.

I’ve always seen CSS as fundamentally unsustainable. The story is always the same: it starts out perfectly fine as site and stylesheets are small, then growth and time take their inevitable toll, and suddenly development becomes CSS property whack-a-mole. Styles cascade in invisible and unintuitive ways, so making a change somewhere can lead to a regression somewhere else that might go unnoticed for days. Many ideas have been proposed over the years to address this problem – e.g. requiring explicit styling “modules” on every single element – but I’ve still never seen one I really liked. The vast majority of properties on the internet still just brute force their way through knowing that all style breakages will be found given enough eyeballs.

I sure didn’t solve that problem, but in my case that’s okay. This site’s going to stay small, and the same goes for its companion stylesheet, so I should always be able to keep it all in my head at once. That said, I did try a few tweaks to my standard practices now that new CSS features and improvements are widely available:

One thing I’d love to have is a good linter that would tell me things like if I’d forgotten a semi-colon, duplicated a style block, or was using a prefix I didn’t have to. It seems there’s a decent command line linter available in the Node ecosystem, but there’s no way I’m bringing NPM into my development loop, which currently takes on the order of 100s of ms end-to-end. So for the time being, I’ll be living without.

As software matures, it’s very common for it to evolve more layers of abstraction, arguably making the results more powerful, but wide side effects like expanding complexity, greater performance overhead, and making it more difficult to understand. I’m quite happy with this latest CSS iteration because it’s a rare example of the opposite – more than a few ungainly components and modules were cut loose, and the overall effect is a simpler system that’s just as effective.

September 4, 2020 (4 years ago) by Frey·ja