0

Which one is better and faster? why?

using only one file for styling:

css/style.css

or

using several files for styling:

css/header.css
css/contact.css
css/footer.css
css/tooltip.css

The reason Im asking it is that im developing a site for users who have very low internet speed. country uganda. So I want to make it as fast as possible.

  • 3
    This question has been asked many times before. Are you sure that you didn't find your answers in these questions? (look at the "Related" section, at the right side of this page) – Rob W Mar 18 '12 at 09:42
  • 4
    duplicate of: http://stackoverflow.com/questions/2336302/single-huge-css-file-vs-multiple-smaller-specific-css-files – Abhinav Pandey Mar 18 '12 at 09:42
  • sorry guys. Didnt see that. thanks for link. –  Mar 18 '12 at 09:48
  • This might be the answer you are looking for. http://stackoverflow.com/a/2336332/415057 – codef0rmer Mar 18 '12 at 09:44

5 Answers5

3

Using a single file is faster because it requires less HTTP requests (assuming the amount of styles loaded is still the same).

So it's better to keep it in just one file. Separating CSS should only be done if you want to keep for example IE specific classes separate.

justanotherhobbyist
  • 2,124
  • 4
  • 28
  • 38
3

As per Yahoo's Performance Rules [source], It is VERY IMPORTANT to minimize HTTP requests

From the source

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

It is quite uneasy to develop using combined files, so stick to developing with multiple files but you should combine the files once you are deploying the system on the web.

I really recommend using boilerplate's ant build script. You can find it here.

It Combines and minifies CSS

Starx
  • 77,474
  • 47
  • 185
  • 261
2

This is always a better solution to bundle or combine multiple CSS or JavaScript files into fewer HTTP requests. This causes the browser to request a lot fewer files and in turn reduces the time it takes to fetch them. With a proper caching, you can gain extra bandwidth and even fewer HTTP request.

Update: There's a new Bundling feature in ASP.Net 4.5 which you might be interested in. This allows you to have css files separated at compile-time, and in runtime gain benefit of combined resources into one resource

Kamyar Nazeri
  • 25,786
  • 15
  • 50
  • 87
2

One css file is better than multiple css files because of the overhead involved by the end user's browser to make multiple requests for each file. Other things you can do yo improve the performance include:

  • Enable gzip impression on your webserver e.g. on Apache so that the files are compressed before downloading
  • where possible host your files geographically as close to the majority of your end users as possible
  • use a CDN network for your static content such as css files
  • Use CSS sprites
  • Cache your content

Note that there are tools available to help you do this. See 15 ways to optimise css for more information

Andy Higgins
  • 247
  • 4
  • 12
1

One resource file is always the fastest approach since you reduce the number of HTTP requests made to fetch those files.

I would suggest to use Yslow which is a great extension for firebug that analyzes web pages and suggests ways to improve their performance.

Maxim Manco
  • 1,954
  • 1
  • 12
  • 19