I need your opinion on CSS optimization

Lately I’m reading a lot of CSS optimization, and I notice that almost every article, recommend to put ALL your styles in ONE file.

I understand the thinking behind this, but this is practical? I mean I’m working in a fairly large project and by now I have a huge amount of styles. I think it will be very difficult to maintain with everything in one file.

My question is: the performance gain is that big to justify the complexity of having all in ONE file?

Thanks!

Edgar.

UPDATE

Just to clarify, I’m sure about the need to optimize the CSS. Actually, I have a process in place that minimize and compress the CSS files, and I do everything that I can to not repeat myself.

My doubt is exclusive about the practice of using one big file vs multiple files.

Let’s put this example:

My application has multiple modules, for example: contacts, projects, accounting, HHRR, etc.

I have one CSS file for each module, plus a couple of other general CSS files like: reset, layout, forms and so on.

When I’m using the CONTACTS module, I load the general files plus the contact.CSS file. I skip the rest of the CSS because they are not needed.

Now to the Math, let’s say that each CSS file is around 10KB,

My current way:

• About 50kb in general files About 5
• downloads request in general files
• About 10k in customer file One
• download request.

This is a total of about 60kb and 6 download request.

开发者_JAVA百科The one file Method:

• About 120kb (all the files together including styles that are not used at the moment) in one file
• One download request.

So, in your opinion, the beneficial gain of using one big file and only one download request, justify all the extra work of implementing a method of combining all the files together and all that hassle?

For development, keep them separate. CSS can quickly become a nightmare. For production you should build in a process to combine, minify and compress all your files into one.

It's a great idea to compress your CSS like that, as it saves bytes and makes the page load faster.

When you develop your site, of course don't minify the code. It's pointless, as your local webserver is as fast as can be. But when you deploy your site, minify the code. It saves you bandwidth and makes your site more responsive for the end user.

Here's a sample chunk of CSS that I would use:

/*  33 characters */
body {
  background-color: red;
}

When compressed, it's a bit smaller (81% of the original size):

/* 27 characters */
body{background-color:red;}   

You can make a script to compress the CSS, as you shouldn't do this by hand. Google "css minifiers" and I bet you'll find a ton.

Do both. Develop in multiple files, then just have a process which combines, compresses and minifies (removes comments, spaces, etc) them into one file when you deploy.

It's not really a performance gain so much as a bandwidth gain. Each file that the browser must fetch represents about 200 extra bytes. You can have a program that combines multiple CSS files into one for deployment, but most CSS minifiers will do that for you.

I`m surprised that nobody mention one very obvious reason to do that.

In a big site, you will have many elements to load, especially visual elements - images. Think about how many files your site is loading. You can load a limited number of files from a single domain at once. And CSS is bringing some background images and sprites. There is no point loading 2, 3 or more CSS file.

Minification as Blender suggests is a bonus to your bandwidth. 2K is more is noting for a single user, but multiplied by 1 000 or 10 000 is a lot. And if you minify a CSS, what about the HTML? I haven`t seen so many pages with minified HTML!