CSSWind: bloat-free component styling

Published on , 1045 words, 4 minutes to read

What you need when even HTMX is too much.

An image of A photograph of fields on the ground shot from an airplane
A photograph of fields on the ground shot from an airplane - Photo by Xe Iaso

I'm trying to consolidate my hosting for this website onto my cloud Kubernetes cluster as much as I can. Today I moved the part of my website that serves stickers into the Kubernetes cluster. I wanted to see how minimal I could make it. Turns out, it can be way more minimal than I thought.

In the process I discovered how to get all the advantages of Tailwind with none of the bloat. I'm calling this CSSWind and it's the next best thing since canned bread.

Here's an example of a Tailwind component:

Mimi is happy
Mimi

Have you ever been far even as decided to use even go want to do look more like?

Tailwind makes you style components inline using classnames. This ends up making giant chungus monsters like this:

Numa is disgust
Numa

Eww. There's so many classes I can't think straight.

Even worse, in order to add Tailwind to my simple Go services, I have to mangle them and force Tailwind into the mix with go generate. Every time I do this, I just keep thinking "it would surely be simpler if I could just write CSS, right?"

Yep, you can. Here's a semantically identical version of the Tailwind component in CSSWind:

Mimi is happy

<Mimi> Have you ever been far even as decided to use even go want to do look more like?

Here's the HTML for that:

This gives you all the advantages of Tailwind without any of the bloat, installing things from NPM, or anything else. It even works with Xess!

As an example of how simple this is in practice, here's the sticker testing page I made when I was working on this:

This is the actual website embedded into another page with an <iframe> tag. You can type in character and mood names and then see what the stickers look like in isolation as well as in conversation snippets. It's everything I need in order to test that things look nice and nothing 404s.

I was gonna use HTMX for it, but even that was too much bloat. I just ended up using a normal HTML form because that's all I needed. When you hit submit in that iframe, the page reloads and the server responds with new HTML. That's all you need. Anything more is bloat.

Oh also, there's an "error image" when it can't find a sticker. I had to make it an image because if you make it text when the browser expects an image, things get sad and you get a broken picture icon. I'd rather have my own branded broken picture icon than some sad browser default one that makes the UX bad.

A red x in a circle with 'Not Found' over it in white text.
A red x in a circle with 'Not Found' over it in white text.

I made this with Image Playground out of curiosity to see if I could actually get something usable out of it in any fashion. I was genuinely surprised to see this as the first output:

A red x in a circle.
A red x in a circle.

My prompt was "x, no symbol, white background, simple background". I expected to get a waste of my time and then make it myself in Affinty, but this is totally usable. This is shockingly usable even because in ideal circumstances nobody should ever see this. All it took to make it prod-ready was turning the white into transparency and adding text over it to get that error message.

This is the only time I've ever had a positive experience with Image Playground. I don't know what this says about the product. "Image Playground is better than stock vectors"?

If you want to see the source code of the sticker server, look here in my /x/ repo. It's really simple. It just forwards requests to a presigned URL. There's nothing else really complicated about it. It does what it needs to do and runs fine in Kubernetes.

Enjoy liberation from CSS complexities!

Facts and circumstances may have changed since publication. Please contact me before jumping to conclusions if something seems wrong or unclear.

Tags: