Which combining css technique?

Question

Hi there,

Which of the following would you say is the best way to go when combining files for CSS:

Say I have a master.css file that is used across all pages on my website (page1.aspx, page2.aspx)

Page1.aspx - A specific page that has some unique css that is only ever used on that page, so I create a page1.css and it also uses another css grids.css

Page2.aspx - Another specific page that is different from all other pages on the site and is different to page1.aspx, I'll name this page2.aspx and make a page2.css this doesn't use grids.css

So would you combine the scripts as:

Option1:

Combine scripts csshandler.axd?d=master.css,page1.css,grids.css when visiting page1
Combine scripts csshandler.axd?d=master.css,page2.css when visiting page2

Benefits: Page specific, rendering quicker since only selectors for that page need to be matched up no unused selectors

Drawback: Multiple combinations of master.css + page specific hence master.css has to be downloaded for each page

Option2:

Combine all scripts whether a page needs them or not

csshandler.axd?d=master.css,page1.css,page2.css,grids.css (master, page1 and page2)

that way it gets cached as one. The problem is that rendering maybe slower since it will have to try and match EVERY selector in the css with selectors on the page even the missing ones, so in the case of page2.aspx that doesn't use grids.css the selectors in grids.css will need to be parsed to see if they are in page2 which means rendering will be slow

Benefits: One file will ever be downloaded and cached doesn't matter what page you visit

Drawback: Unused selectors will need to be parsed by the browser slower rendering

Option3:

Leave the master file on it's own and only combine other scripts (the benefit of this is because master is used across all pages there is a chance that this is cached so doesn't need to keep on downloading

csshandler.axd?d=Master.css
csshandler.axd?d=page1.css,grids.css

Benefits: master.css file can be cached doesn't matter what page you visit. Not many unused selectors as page spefic is applied

Drawback: Initially minimum of 2 HTTP request will have to be made

What do you guys think?

Cheers

DotnetShadow

Answer 1

Personally I would say Option 2 - Combine All Scripts. As your website grows, the number of pages will increase, and tracking which CSS files go with which files will become unmanageable. You might think some CSS is only used on one page, but I bet in the future that won't be true.

Once the user has visited one page, they will have all CSS and the other pages will be vastly quicker. (Although you might want to optimize your homepage separately). Think web application, not web page.

Answer 2

Have you measured the page loading time with Firebug or something similar? I'm asking because I'm curious wether it will make a big difference at all.

Anyway, I just wanted to point you to a CSS Framework developed by yahoo. They've got a very clean structure, and maybe you want to design your own framework in a similar way. They use a reset CSS File to create the same preconditions for every browser, which I find a clever thing to do.

YUI 2: Grids CSS

Maybe it helps.