Only load css that is actually needed

[rryter]

Hello there

I have a quick question. Let’s say we have a website, with a news and a product section. Now for development there are to files: news.css and product.css

And theoretically, in production, I want to load one single css file, which is optimized and compressed. But if I do that, I would have to load css rules, which do not apply either on the news or product page.

On the other hand, if I only want to load the needed css, then I am not able to have 1 optimized, compressed file for the whole site. I then would have to optimize and compress 2 files, 1 for each page, which kinda defeats the purpose…

I guess it’s best to load all the css rules, and have it cached by the browser, is that best practice?

Regards
Reto

[rryter]

Actually I don’t have a specific example right now, I was just wondering what you guys recommend, but to me it seems it’s probably better (almost all the time) to go for less requests…

[Kitty Giraudel]

If no mistake, having a 20Ko CSS file (minified/gzipped) is better than having 2* 6-8Ko CSS file (resulting in 12 to 16Ko of CSS).

What is costly is not parsing CSS, it’s doing a HTTP request. So I’d probably go with only one file minified and gzipped. If your CSS is clean, the parsing will be fast, then it’s browser cached anyway.

If you want to manage different files in production to ease the development, then use a pre-processor like LESS, Sass or whatever and their clean @import function.

[TreeRoot]

I’d go with one file, because you have to factor in what’s convenient for you. Trying to juggle multiple files eventually becomes more trouble than it’s worth. I tried it and hated it.

The only time I’d really justify having a separate file is if I knew it would only need to be served to one set of users, like a style.css for everybody, and a account.css for logged in users (which still piggybacks on style.css for the main styles) to style their account areas. And even for that, I’d cringe when doing it.

One file, minified, gzipped = easier to manage, less requests.

[JohnMotylJr]

@rryter,

I am actually in a situation right now where i find myself using one standard stylesheet.css for my website. Now i started incorporating in snippets and giving the user the option to switch between styles. I could easily use jQuery to removeClass() addClass() over and over and over…

But what i am doing is introducing two additional stylesheets local to my index.html that is calling the themes. Im using Google’s prettify so i am accessing A LOT of different classes in different states. So instead of messing around with everything i just keep one stylesheet (theme) as default and when the user clicks the button for the other i merely disables the stylesheet.

I have been contimplating symatics about this for a little while now and realized that im stressing about nothing because it works, its quick, and if JS is disabled (for god knows why) than there will be a default stylesheet without the option to change.

This is the jQuery i am using, well a tiny bit just to show you.

$('#dark_theme_changer').live("click", function(e) {

$('link[title=dark_style]').prop('disabled',false);

$('link[title=light_style]').prop('disabled',true);

e.preventDefault();

});

[Author]

Posts