Do You Need That CSS?
Marc on 2021-11-09
Web browsers are surprisingly good at rendering pages, you owe it to your readers to make the most of that.
Viewport-sized typography, key framed animations, carefully crafted drop shadows; what if we instead focused on just the essentials when it came to web design? A few weeks ago Drew DeVault published a post discussing what he saw as software developers having stopped caring about reliability in their work. It's an interesting article and one that echoed a lot of issues I've noticed myself with modern technology from wonky input boxes to bizarre crashes.
It came as a surprise then that during my recent move to permanently locking in the design for this site I noticed how reliability had fallen by the wayside in my own work. Trying to keep things minimal had always been a focus but this instead resulted in over engineering the smallest components. What should have been a clean, responsive design instead resulted in unexpected edge-cases or inconsistencies across devices.
Frustrated by this, I stripped out all CSS leaving just the raw default style sheet presented by the browser. What should have followed was shock at how ugly the unformatted page was but instead it looked...fine?
Going back to basics it became clear how redundant CSS was for most cases. It may come as a surprise but web browsers are surprisingly good at rendering pages with minimal additions. Headings and text look just fine without seamlessly scaling font sizes; paragraphs are formatted neatly without precision measured line heights; lists look fine without bespoke Unicode bullet points. In fact, depending on how extreme you want to go, it's possible to get by with just 58 bytes of CSS.
It's reassuring to see communities crop up around cutting down on CSS and web bloat in general. The likes of the 1MB club or the 'This Page is Designed to Last' manifesto make an excellent case for just how much can be achieved with what the browser already gives you.
CSS is fun to use and incredibly powerful but sometimes it's best to show restraint. Just because you can add seamless animations and responsive typography doesn't mean you should. If your site is primarily text-based then the focus should be on your content; anything else is excessive. That's not to say that taking pride in the design of your site is wrong however. What I'm instead advocating is careful consideration when it comes to web design. Each style adds just a little bit more page weight, just a little bit more complexity, just a little bit more uncertainty that pushes you closer to things breaking in unexpected ways. Sometimes it's best to make do with what the browser has already given you.