Fun is, when you get to fix the front-end made by a "front-end expert" consisting of bootstrap and a single "custom.css" of 3800 lines.

Peak sadism. 🤡

Yikes, good luck I guess 😅

FOR FUCKS SAKE YOU CAN FUCKING THEME BOOTSTRAP WHY IS NOBODY USING THIS FUCKING FEATURE

We have a library at work that did the exact same... it's a pain in the ass to use and extend

Importing multiple CSS files is stupid though, Keep CSS seperate but make it a single file while deploying.

@theabbie can be okay to have critical part inline if not too big, but yeah, one file to style them all is a good rule of thumb.

Also bootstrap lol, I have been forced to use it before, used it with themes and no overrides, but still feels like overkill to have all things that are not used in there.

I am trying to avoid those CSS frameworks like plague, the only good thing with them is to take a look in the actual code to see and learn some good practices, but honestly, I would rather write my own CSS than using bunch of utility CSS classes.

@devJs Libraries like Tailwind CSS allow you to compile CSS and only add CSS that will be used, still providing all features of Bootstrap, that's the future of CSS, since React/Angular will take over frontend soon.

Front-end expert Xd

@theabbie yeah, tailwind has that nice optimization option that we all needed from the beginning of time.

Before solutions like that I used to play CSS golf in huge codebases.

Becomes tedious pretty fast, especially when there is like around 60% of the classes not being used at all, two frameworks crammed in and written in some obscure CSS preprocessor with additional custom styling...

Fun times, happy days... xD

@theabbie why is it stupid tho? It's not like it's so much data to send over the network, and it allows for modularity for your css code?

@HitWRight Why would a browser care about modularity, it will make separate requests for each, which is always slower than a combined file, If it's for maintainability, you can keep it seperate but use a bundling tool to combine them all on production while deploying, and, critical CSS on main page is great to prevent that ugly flash of unstyled webpage.

@theabbie I mean different pages have different elements. Not all css is used. But as an optimization makes sense. Never used a bundler maybe it's smart enough 🤔

Thank you

@Marl3x Sending my regards from this project that uses material components, bootstrap, AND a bunch of custom .css files.

styles.js starts with // do not change import order.

I removed all .css files once to test, and the app barely looked different.

@HitWRight One situation where I use multiple stylesheets that are not bundled: a site where logged in users are a tiny fraction of site visitors, and there are elements on the logged-in side that don't exist for the drive-by visitors; also when there are 150k pages and only like 200 of them contain an unusual combo of data items that requires different styling.

By the way I was digging into some site the other day and found it had loaded 5 css files for a total of over 100k lines (also about that much JS in 6 or 7 files). The best part is the site doesn't have any fancy styling or functionality.

Buy one of those pens that zaps people when they click it.

Optionally give it to the dev who left you with that mess.

I'm sure they'll appreciate the gift.

@Marl3x any frontend developer worth their salt will be writing some fancy custom styling. theming only gets you so far (colors, shapes, and spacing really)

also apparently no one in these comments has heard of css modules