What I really like about having a personal web page, is that it can be ground zero for testing out ideas. If something feels right, it'll likely carry over to other projects I work on.
Time to drop Tailwind?
This has been a thought I've been having a lot in mind recently.
Its mainly come from a combination of focus on simplifying web development, and having fun again with basic pure CSS.
Also, a big wish is the idea of skipping build steps. Tailwind is basically my only build step, and I sure like the idea of skipping it.
One topic that has come up often in my Tailwind projects lately is the lack of good options for fluid designs. It all feels very rigid on breakpoints. I've ended up using a lot of custom fluid text-sizes, but it doesn't exactly spark joy to config these things in Tailwind.
Thoughts on Cube CSS
I really enjoy the writing (and thoughts) of Andy Bell, and CUBE css has been on the radar ever since I heard about it back in 2020.
More recently I saw his talk at Hey Presents called Be the browser’s mentor, not its micromanager.
I really enjoy a lot of the foundational ideas, and basically the whole concept of "less is more", and letting the browser do more of the work, instead of stripping it all away as I've been doing with Tailwind projects the last couple of years.
So I thought I'd try – with this newfound focus on pure CSS – to remove Tailwind from this personal web page (I know, not really a massive layout challenge…). But just to get the feel back for writing CSS "the old way". (As an aside, I made my first webpages twenty years ago, so "the old way" shouldn't be that unfamiliar)
My main issue with pure CSS in 2023
The main problem I have with CSS right now, is the lack of good include / import options. Pure css @import is unfortunately bad for performance. How bad? I don't know. But I do know all audits will flag it as bad practice, so it kind of feels like a bad option.
I was never really into SCSS, SASS, LESS etc. Similarly to how Tailwind tries to "fix css", the preprocessors helps with a lot of things, but also adds complexity.
When I finally manage to remove my node modules and Tailwind, I don't want to add in SASS..
CSS without build steps is my goal. Of course I'm talking smaller projects, and not cnn.com.
What I decided to do
I've removed tailwind from this page now, and gone super simple one style.css file, and tried to take a few approaches like Andy Bell has suggested in CUBE css (very loosely).
Not very clean CSS this far, but still, it definitely felt fun again to write cleaner html and work with the cascade. CSS has really come so far the last years!
Oh, and even with the added prism css styles (compressed at 2kb), my uncompressed total css weight is at 9kB. The previous Tailwind css (minified and purged) was at 26kB.
Why not minify the style.css you say? It gives me 7kB instead of 9kB, but to be honest, I'm not gonna add any minifying step to shave off 2kBs.
This way the css is also perfectly readable for whoever feels like peeking – compared to the Tailwind compressed css. This perfectly aligns with DHH's idea on Paying tribute to the web with View Source. This is how I learned web development 20 years ago. I know, times have changed with GitHub, browser tools etc. But still I feel the "view source" is an underestimated learning tool.
I love it. No node modules. No build steps. A simple css file. More of a Greenfield project.