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