How I learned to stop worrying and love CSS

I am, at heart, a C++ game engine developer. Even worse, I am primarily a UI / graphics / tools engineer who is therefore weirdly unfamiliar with modern concepts such as "client-server architectures", "package managers", "programming languages that do not hate you" or "quick iteration times". Obviously, this initially made web development very confusing and frustrating: but over the years I've found a number of tools to make it more palatable to my particular brain, notably Pelican and its dependencies. The last infuriating piece of the puzzle was CSS. But earlier this year, thanks to the good people at Geeks For Social Change, I started down a rabbit hole of finding a CSS methodology that actually doesn't suck (too much).

Do note: as helpful as some of the resources linked here are, some of them also include styling choices that I personally find harsh on the eyes. I have marked those links with an eyestrain warning and would recommend you apply caution before clicking if that can be a problem for you.

The core of my new approach is inspired by CUBE CSS. CUBE stands for "Composition Utility Block Exception", with each of those being a different "layer" of the approach. To paraphrase it roughly and badly:

• Embrace rather than fight the inheritance chain that is core to CSS.
• Think separately about semantics (HTML), layout (CSS) and styling (CSS).
• Website designs are fluid: design with resizing and flow in mind rather than trying to match a pixel-perfect mockup.
• Leverage the hell out of classes to avoid repeating yourself.
• Leverage the hell out of CSS variables to only tweak values in one spot.
• If something needs to be a special case, treat it as such instead of shoehorning it into more general selectors.

As nice as CUBE CSS sounds, it's also very abstract. The person behind CUBE CSS, Andy Bell, has however been busy and contributed to a web "book" called Every Layout (eyestrain warning) which includes some excellent free examples. They're a great help to make the link between the vague principles of CUBE CSS and actual code. You can see a version of Every Layout's sidebar (eyestrain warning) in action on this very website, in fact: try shrinking the window and behold how it just flows right. (Oh god I hope it doesn't break. Let me know if it breaks.)

Another head-scratcher was fonts. Sure, Google Fonts is convenient, but isn't it nice to not rely on the tech giants when you can? And also how do I pick something that is readable and pretty when I have the graphic design skills of a cooked oyster? Modern Font Stacks groups system fonts that are similar in style into easy copy-paste material, and saved me the headache. Also on the fonts front, the Utopia fluid scaling method has some interesting ideas but I plainly could not be arsed. I borrowed some of their ideas for spacer elements and otherwise kept things simpler.

A few additional resources found and used while on this dive:

• The start of the rabbit hole that led to CUBE CSS was an excellent website busting the myth of standard viewport sizes (eyestrain warning), linked by the equally excellent honor ash;
• Obviously I constantly referenced the Mozilla web developer documentation and guides;
• The CSS Tricks website is well-known and often provides suboptimal solutions, but sometimes it has that one bit of answer you needed.

This has all been put into practice here, to clean up a codebase that was a mediocre static-ification of the Wordpress theme I used all the way back in 2011 or the like. I've also applied it to a niche fandom project in order to host a static HTML version of about 200 Twitter threads chronicling a Let's Play, as you do. But of course, CSS is the last link of the chain: the Pelican and Jinja tricks will be shared in a different write-up.