CSS - Advantages of Single Image File Vs Multiple Files

CSS - Advantages of single image file vs multiple files

Is this for performance reasons? If so why?

1. A single request means fewer concurrent connections to the server meaning other things can be loading. A TCP connection also costs resources on the server. Fewer total connections per user means more users can use it at once (if your performance is really connection bound).

2. A single sprite usually has a slightly smaller filesize than a bunch of single images, though this is not guaranteed and different formats vary.

3. Object states are all loaded at once meaning interaction is much more immediate than if you loaded another state on demand.

4. Even if part of the sprite isn't used on the current page, by loading it (and the browser caching it), this would speed up the browsing experience for the user later on when the user views other pages.

Sprites don't fix everything and you probably shouldn't get too anal about it until you're forecasting heavy traffic and/or you're moving to a CDN where you're charged per request.

Of course if you have a whole load of 16x16 icons that get used in a single place, you could sprite them up very quickly. I find having several sprites for specific things like that actually makes the CSS a lot cleaner too.

Single huge .css file vs. multiple smaller specific .css files?

A CSS compiler like Sass or LESS is a great way to go. That way you'll be able to deliver a single, minimised CSS file for the site (which will be far smaller and faster than a normal single CSS source file), while maintaining the nicest development environment, with everything neatly split into components.

Sass and LESS have the added advantage of variables, nesting and other ways to make CSS easier to write and maintain. Highly, highly recommended. I personally use Sass (SCSS syntax) now, but used LESS previously. Both are great, with similar benefits. Once you've written CSS with a compiler, it's unlikely you'd want to do without one.

http://lesscss.org

http://sass-lang.com

If you don't want to mess around with Ruby, this LESS compiler for Mac is great:

http://incident57.com/less/

Or you could use CodeKit (by the same guys):

http://incident57.com/codekit/

WinLess is a Windows GUI for comipiling LESS

http://winless.org/

One big css file vs multiple small css files

There is pros and cons of both approaches.

Having multiple CSS files will allow you to organize and group your CSS files properly in development. However, this also means that there are multiple HTTP requests to make. HTTP requests are more expensive in terms of loading time as it has to contact the server and fetch the file.

Also once a file is loaded, it is cached by the browser. Which means, even-though it might be initially slower to load the huge.css, it doesn't need to be loaded again when you navigate around the site.

In my experience and adapted by most of the developers, you could do something like below to get most of the both worlds.

Use css pre-processers like SASS or LESS. Don't ask me which one is better, there is already enough arguments going around the web on that topic. Just pick one which you are comfortable with. My preference is SASS.

CSS pre-processers allows you to divide your CSS files into smaller more organized files. For example, you could have a main.sass which includes menu.sass, footer.sass, etc.

main.sass

include _menu
include _footer
include _header
...

_ tells sass not to compile seperate files for each of these sass files. So they all will only be compiled to a one main.css. These pre-processors come with a functionality to compile the given sass files into a css file that browser can read. You can also use tools like [livereload][4] to compile them in real-time.

You will have these sass files in your development code. But in your production code, you can simply use the compiled single css file.

If you are feeling more advantageous and want to take things further, you can use tool like Grunt or Gulp. They allow to automate your development tasks or build processes. So ideally, in development you could have a grunt task that watches all your sass files and automatically compiles them into the main.css file. In your index.html you can have reference to this main.css. Once you are happy, you can also have another task called build task, which can automatically compile all your css files and minimize them.

To clarify your question:

It depends what is best in case by case basis, what kind of site you have and how you have built it.

If you have a website where visitors are most likely to never navigate around the site than some particular pages, then its better to load css specific to that particular page and not combine it. You can load these css files in the partials specific to these page.

In my experience building many many sites,

1. its almost always best to load one combined css.
2. if a particular page requires css is not likely to be visited often, include a page specific css in its templete seperately with a conditional script tag.
3. Minimize all css files almost 100% of time

Also, I will suggest you to spend more time improving efficiency of your server side code or database, then worrying too much about the css. It will be more productive as most of the in-efficiency lies in server side.

One CSS file vs multiple for different pages

Advantages of one CSS file

• Only one HTTP request is needed to fetch it, which improves the first page load time for most users and will speed up subsequent page loads, especially if users are expected to visit more than one different page type during their visit. This can also decrease server load.

Advantages of multiple CSS files

• Reduces bandwidth, particularly if any given user is not likely to view many of the different page types on your site during their visit (which may be the case if your site is divided into almost completely unrelated sub-sites). Note that multiple CSS files will increase HTTP requests, which despite bandwidth savings may actually decrease load speed on modern connections.

I'm generally in favour of having a single CSS file for a site in most cases.

Is it good idea to make separate CSS file for each HTML page?

Your example shows you using one design.css file for your entire website.

Generally, it is better to have one single .css file containing data for all pages for 2 reasons:

1. You will allow browsers to cache .css files thus resulting in faster loading times;
2. It will ease the maintenance process.

I would advise you, if you really want to divide .css in separate blocks to use CSS' @import to divide blocks of code f.e form styles and so on.

Multiple css files or one big css file?

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.

What is the benefit of using inline css vs external css file for background image

I think you should use the second approach. Always avoid using inline css, it is really a bad practice even if you are using a CMS.

You should keep your HTML's clean (the same approach also apply to javascript). At first it will seem helpful and util but later when you need to maintain your code it could be a mess.

What are the advantages and disadvantages of using @import in CSS

Under normal circumstances, loading your CSS files using the @import method could significantly increase page load times as the individual files are then referenced one after the other. File B won't load till File A has downloaded. CSS referenced using the <link> tag on the other hand, can be downloaded simultaneously.

While this does seem like an outright disadvantage, using the @import method does lend a pretty outstanding advantage; Organisation.

As your project grows in size and complexity, maintaining your CSS files, however organised and picky you are, can become a chore, to say the least. The @import method helps you break your massive stylesheet into more comprehensible and logical portions.

To illustrate, you would typically reference your CSS file through a single <link> tag like so:

<link href="/styles/main.css" rel="stylesheet" type="text/css">

This stylesheet could then reference several other subsidiary stylesheets,

@import url('/styles/navbar.css')
@import url('/styles/header.css')
@import url('/styles/typography.css')
@import url('/styles/grid.css')

This is just a rudimentary example off the top of my head, but hopefully you can see the potential of much more organised system. This can also make it easier for other team members to better understand where the referenced styles have been declared.

Blockquote Note Just make sure these imports are at the very top of the stylesheet. There shouldn't be any declarations/content before this. This also includes <-- comments -->

---

Related Topics