Should I keep storing all css in one file?

Question

I used to think that more advanced web developers (gee, when was that again ?;)) that we should avoid managing multiple CSS files and stick to one per project . This helped improve page loading speed and avoid stupid mistakes when working with multiple CSS rules.

My question is, is this approach still valid?

The argument for page loading performance does not seem to be much at the moment with amazing broadband internet and smart web browsers with even more amazing caching capabilities. CSS cascading can really be error prone, but just for an inexperienced developer and having one CSS style sheet doesn't really make us bulletproof.

I think I'd rather have a set of default stylesheets neatly separated by components, and then connect them to a single CSS @import rule. It would also allow me to enable the default reset stylesheet.

Anyone with me?

Answer 1

This is not about bandwidth speed, but about the number of HTTP requests, it is of great importance for a mobile connection.

However, the approach of having different css files to keep the project modular is strong, as it helps you maintain your CSS site the way you want it, without having all the code in just one file. You can then use the css / minifiers preprocessors to combine and compress all your css files in one for production.

in this article http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/

there is a paragraph on a mobile phone that explains well why this is good practice:

you are much better at loading all CSS content at a time for the initial, pre-warmed connection. By doing so, you will also help the user extend battery life. If there is one optimization here, it's simple: concatenation and compression.

Answer 2

Yes, this approach is still valid. There are dozens of articles about loading optimization, but the general idea is this:

Fewer files = less HTTP requests made by the server = better performance

The main thing that has changed over time is that now there are many tools that support combining several files into a single one at runtime. Thus, you have separate style sheets for better organization, debugging during development, and these tools combine, minimize, and set the right cache headers for production.

Answer 3

I agree with you, I see no reason to leave only one css sheet, at the moment I am doing exactly what you just said, separation by component, as well as lazy loading :) (php if statements, etc.).