Is it normal to deploy a 5.6MB main.css file?

Last week I had to change some shizzle on a website (externally developed).
Well, I was quite shocked...

We usually deploy a single stylesheet under 700 kB.
But also because we never use CSS "frameworks".

I bet that could be minimised somewhat, however and whatever tooling... It's quite much imho

Wh...what?

I just checked, the complete Lord of the Rings trilogy ebook has 1.5MB. I don't know what the hell one has to do for such a huge CSS file.

What the crap?
I feel bad for the poor browser.

My styles are usually around 32kb-64kb. The largest ever was probably 256kb.

Mine are typically 1-2k. 5.6mb is insane.

well, this might sounds obvious to many, but you can always minify+gzip this monstrosity....

I'm at 15 kB minified and 4 kB over the wire, and that contains everything I need anywhere on my small site to save roundtrips. That approach is fine as long as it doesn't blow up the overall size.

However, while 700 kB CSS looks nicer in comparison to insane 5.6 MB, it's also probably too much, especially if this is only one out of several stylesheets. Consistency is good UI design, after all.

That much CSS often means you either have lots of ever slightly different design inconsistencies, or you're doing stuff like complex CSS animations that shouldn't be used in real websites anyway, or you're still clinging to pixel perfect layout despite phone manufacturers shitting out a new form factor every 30 seconds.

Did they write css for every single element individually and not reuse a single class?

Because that's the only way I can think of, that you could end up with a css file that big😩

@CoffeeNcode 🤔I reckon you could do it with an e-commerce site if it had enough products and someone that learn what CSS is actually meant to be used for.

But yes that would either be one huge ass application or there's a hell of a lot duplication going on.

-
Every product it's own page (no templates), and every element it's own class, parented from an ID with the product I'd in it.

#product123 body .actions .button label{}

And so on.

@rEaL-jAsE yep

@C0D4 I also wonder what kind of people would do that. I reuse shit not necessarily because I'm a good developer, but a lazy one.

@Fast-Nop I forgot to include the word workaround, definitely not a medium+ term solution to just minify it...

@C0D4 Tailwind is like that, but you can let it compile by having some other plugin called PurgeCSS looking at your front-end resources and match only the needed stuff through that.

And if anyone is thinking about "above the fold" - That phenomenon never /really/ existed, as we have too much screen-sizes to work with. However, lazy loading based upon components, or just separating concerns (layout, theme, page, module, ..) is always a good way to go

That's pretty damn huge... Not normal at all. Well maybe for web 3.0 it is. I'd abandon that monstrosity and rewrite it from scratch.

@Root (To clarify, that was pre-minified, pre-compressed.)

How is it so large? Are you storing images as data URIs in there?

Just to clarify: The CSS has been deployed by the original developer and thankfully I did not have to touch it. 😄

Are you people insane? 😵

Hell, rendering the whole site into an SVG would result in less than 700 KB!

What on earth can require
SEVEN
HUNDRED
THOUSAND
FUCKING
CHARACTERS
???

That's pure cancer and such insanely huge css files are big evil throbbing tumors!

You guys realize, that the browser has to parse this shit and to build a tenfold bigger data structures from it?

And 5.6 MB? The resulting Memory consumption would be more than Windows 95 needed, so
WHAT THE FUCKING FUCK FUCK SHIT of unholy CRAP is in there?

Do you people define the color and position of every pixel in there???

It's a real slap in the face to anyone who doesn't have uncapped internet service.

@irene I don’t know much about web dev @-@

A CSS file that huge makes me wonder if they’re streamlining images as data URIs. Or maybe they have some fancy animation effect generated from a million iteration SASS loop.

@PonySlaystation link please?????
I seriaously want to see how one makes css file this big.

- happy to be a zip and not be the site its self.

This was posted a couple days ago. Is it you guys? 😂

https://quora.com/As-our-SCSS-files...

@C0D4 I just scrolled through it:
It contains minified Font Awesome Pro, which makes up about 95% of the file...

@toriyuno your image idea isn't that far fetched come to think of it.

data:base64 pngs will take up a good chunck of room in a css file, one of the things we used to do for icon files where they were small enough to get away with it.

@toriyuno lol that could actually be the original developer of the website. 😄
(He has nothing to do with my company, just to be clear. We would never deploy such garbage 😉)

@PonySlaystation 🤪
That's the kind of thing you add to the deferred list of resources and let the browser decide when it wants to deal with it.

@C0D4 Absolutely! 😄
Or just export the needed parts.

@PonySlaystation if there is a font in there my assumption about the memory consumption is luckily completely wrong.

But what does that mean? Can browsers skip loading the data if the font is already there? Or has it to be downloaded on every request?

@Yamakuzure Font Awesome is not a font but an icon pack, and its pro version requires putting a key of some sort in the include url I believe so it's downloaded once for each site.

@Lor-inc Thanks for explaining! 👍