My CSS stylesheet is now less than 1kb and it makes me happy

When I moved my blog from Squarespace to Blot, I did it mostly for speed reasons. I will once again link to Craig Mod’s excellent Fast software, best software piece for you to read if you haven’t already. I like speed too, for my apps, for my website. I like when the performance is as strong as the design is light, efficient, minimal; like a digital Lotus sports car.

When I started to customise the Diary template to make the Jolly Teapot look and behave the way I wanted to, I think I did a good job making it not look terrible, but I did a terrible job making it good. The CSS code was bad, the stylesheet was a mess, and the file weighted around 8kb then. Pretty small, but considering the minimal amount of design I needed, it seemed overkill.

As days and weeks went by, I started to feel the need of cleaning this code that was just sitting there, dirty, nonsensical, inefficient. This feeling transformed into action in June, when I started to work on my stylesheet. I’ll spare you most of the details because yes, code is boring as hell: I had mostly merged a few classes, got rid of some noise, and turned a few knobs around to see what if anything broke (it did, a lot).

I got to 4kb then, happy to cut the size in half in one weekend, but I soon realised that the further you go, the shorter the steps become, and the harder it gets.

Something started to grow inside me, something like an obsession, like an urge to clean the code a little more, and then a little more again. Since June, I have basically worked on my CSS stylesheet a few hours every week or so. CSS moments replaced the usual TV show and book moments, and now the weight of the content of the file is less than 1kb: precisely 999 bytes, according to this tool made by Lea Verou, tool I must have used a thousand times now.

Editing the code relaxes me, that much I’ve discovered about myself. At least I think it does, as CSS is both the most frustrating thing one can do in its spare time, but also weirdly rewarding and satisfying. Going from 2.3kb to 2.22kb thanks to an instant clever idea is a great feeling, and it is pretty easy to become addicted to it.

2.22, 2.1, 1.89, 1.32, 1.08… Every time I felt that I had reached the bottom of the pile, every time I found myself digging a little more, surprised to see I could not see the bottom yet. Sure, I had to leave some things out on the way, I had to compromise a lot, but I think the end result looks just as good as I aimed for in the original version, and improved in many ways. The code is now cleaner, works better on mobile, looks decent enough on Windows, and is also way easier to maintain and modify.

Every step of the way I made sure I did not do something stupid by regularly checking the website’s score on Lighthouse. Many times it alerted me of some contrasts that were not strong enough for readability, or some touch targets or font sizes that were too small. I may have used a few bad words at times.

The end result is good, and I’m happy about it: the website is now seriously faster than before, it looks the way I want — at least on a Mac — and I even managed to keep the auto-switch-to dark-mode thing, which I now cherish.

But the result is not what matters the most.

What I loved about this experience is the experience itself, the journey. It felt very healthy for my brain and my mind to work on this, like a strange sudoku, or some structural meditation. I also learned a lot about CSS. I didn’t know much to start with, but I learned a ton along the way, and I still learned something as recently as this morning, going from 1.08kb to 999b.

Thankfully the online ressources were a big help, and the amount of guides available on the web is amazing; all of this for free, which is nice. I cannot talk about help without thanking those who assisted me from day one: from tips on using system fonts to warnings about inline CSS to name a few, I cannot thank you all enough. You know who you are.

Thanks also to all of you who answered my few polls on Twitter, to those who did not mute my tweets about this very boring topic, and to Olga, who patiently listened to me describe the CSS of a website as the wallpapers of a house, and what I was doing as saving wallpaper by removing the hidden bits behind the furniture. True story.