(Re-)Learning CSS as a Backend Dev

Although my career in tech has been spent mostly on backend systems — servers, databases, and the like — I’ve always been interested in user interfaces.

When I set out to build a new website from scratch, I wanted to do my own styling. How hard can it be? I remember most of the HTML I learned back in the 1990s. I can copy-and-paste some CSS from a site I like, tinker until it looks right, and done!

Several months later, my tendinitis is acting up, my YouTube recommendations are all “17 Flexbox Secrets Doctors Don’t Want You to Know!” and my website is still mostly empty.

CSS isn’t hard. It’s deceptively easy. But it is utterly unlike any other kind of programming I know.

The way “programming” is typically taught, we’re always aiming for isolation. The history of programming languages is all about nudging programmers to write smaller, more-independent units: Structured programming, object-oriented programming, functional programming, etcetera. Global variables and non-local effects are frowned upon.

(Having learned this, then what do we do? We go to elaborate lengths to reinvent global variables and think we’re clever. But that’s a topic for another day.)

CSS — or, more accurately, the combination of CSS and HTML in a rendering engine — is confounding to a backend programmer like me because it’s all non-local effects. Everything on the page has the potential to influence everything else. Your paragraph is suddenly overflowing off the edge of the page because an image at the other end of the page is wider than its bounding box or something.

I’m no graphic designer but I’m just enough of a typography nerd that things like misaligned baselines and bad kerning grate on my nerves. I couldn’t tolerate them on my own site.

So I set out to write my own CSS for this page. By hand. From scratch.

I took inspiration from a few sources. I admire Tufte CSS, but due to the pervasive non-locality of CSS and the use of interacting rules to produce desired effects, it’s hard to copy an example and tweak it without breaking something else. Also, as an old-school web user, I still believe links should be blue, despite what any designer says. I found some blogs with designs I liked, such as Erin Kissane.

The results are … adequate. For now. I'll continue tinkering with it as I write. But at least the links are blue, the text is legible, and View Source will show you something that’s mostly readable. I’m sure a CSS expert could point out all sorts of redundancies and poor choices. It remains, like everything else on this site, a work in progress.