4.7 KiB
title: The problem with minifying CSS author: 寮 date: 2022-07-22 06:30:00 tags:technology,internet,webdev threadid: ALjH3UGhXbR8STPgLw
I was going through the final code review yesterday before going on a little trip with my grandparents (I say that because if you won't see me appearing online over the next few days, it's probably because I have no time to get online).
And what annoyed me to no end was, a frontend developer made an error in CSS, and I had to fix it.
However, the file in question was minified CSS.
For those of you who don't know, minified CSS is basically a CSS file with literally everything put on a single line.
One example I can give is the following CSS files I just stole from TorrentFreak:
Original version | Minified version
So basically, they made a 3276 line long CSS file (probably generated, there's no way a human can possibly make a this bloated CSS file by hand!), and then ran a tool that strips out all the comments and white spaces.
Just for comparison, I made the CSS for this website that's only 1.7 KiB (so not even reaching the 2 KiB mark!) with just 116 lines (at the time of writing).
And that's without minification, mind you!
So what's the problem you're asking?
Just open the minified file in Vim or Neovim, or Gedit, or whatever other text editor you want, try to move the cursor around, and see what happens.
LAG!! FUCKING LAG!!
Not to mention the fact that it's totally unreadable.
The minified version is 82 KiB, while the original one is 95 KiB, meaning you're saving up 13 KiB so that you can fill up 20 MiB worth of trackers, ads, JS, cookie warnings, images, fonts, and whatever else in its place, wow, such an achievement!! (not)
To me as a webdev with almost 2 decades of experience, the whole idea of minification is totally alien.
Instead of minifying your CSS, I'd rather recommend you go through your webpage, take note of what you have, and try to rewrite your HTML and CSS so that you end up with the exact same design, but is far lighter in resources.
I can't really complain about a 95 KiB CSS, it's actually pretty impressive to fit this many lines of code in such a file, but you could as well just split this single file into a bunch of smaller files, and only load the files you need for the webpage you're viewing.
It makes no sense at all to load 100s of lines of CSS code specific to the frontpage while you're viewing a news article for example, so make 1 file for the frontend, 1 file for news particles, and load whichever you'll need to use.
I thought of doing that just to prove my point, but considering I'll be on the move in a few hours or so, I couldn't do that, and instead I might save that for another day.
Yes, I too load stuff what's not relevant to the page you're viewing, like table stuff or webring images, or videos, but if you look at my CSS file, it's just 32 lines of unused code, not thousands.
The file is still easily readable and editable, so in that case splitting the file up would basically mean I'd be resorting to something more complex just to save up on 200 bytes or so.
This bloated CSS stuff gets even worse if you ever loaded a Vue.js or React project.
Yes, I too have to do that from time to time, and that's almost always to remove the dependency on JS and convert the websoyte into a real website.
But seeing something like "app.js (15 MB), app.css (8 MB)" is pretty common while running npm run prod, but despite NPM warning you about the fact that it's far too much, nobody ever seems to do anything about it, often times soydevs even double down on that by spamming the node_modules folder even further...
I often even get handed over Node.js projects with more unused dependencies than used, because the soydevs installed a bunch of dependencies, then replaced dependencies for other dependencies, and never bothered removing any of the old dependencies.
This is why I always say how much JS is a disaster, not because the language itself is a disaster (or well, not until Chromium basically took over the entire web engine space), but rather because of the way the language is being abused these days.
It's actually pretty cute how many people are (rightfully so) worried about JS bloat, but at the same time they say no word about CSS bloat, which is quite a growing (pun unintended) problem.
One day, we'll find ourselves blocking both CSS and JS in order to get a sane web experience, just blocking JS alone is not going to be enough.
But before that happens, I really hope a feature will be implemented that lets you choose your color scheme like how the Gopher/Gemini browsers do, because staring at black text on a white page is going to burn my eyes down.