When it comes to combining files for CSS, what do you think is the most effective approach?
Imagine I have a master.css file that is used on all pages of my website (page1.aspx, page2.aspx)
Page1.aspx - This specific page has some unique css that is only used on that page, so I create a page1.css file and it also uses another css file called grids.css
Page2.aspx - Another specific page that is different from all other pages on the site and different from page1.aspx. In this case, I'll create a page2.css file which doesn't use grids.css
So, here are different options for combining these scripts:
Option 1:
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, faster rendering as only selectors for that page need to be matched, no unused selectors
Drawback: Multiple combinations of master.css + page-specific, hence master.css has to be downloaded for each page
Option 2:
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)
This way, it gets cached as one file. However, rendering may be slower as every selector in the css needs to be matched with selectors on the page, even if they are missing. For example, in the case of page2.aspx that doesn't use grids.css, the selectors in grids.css will still need to be parsed, resulting in slow rendering.
Benefits: Only one file needs to be downloaded and cached regardless of the page visited
Drawback: Unused selectors need to be parsed by the browser, leading to slower rendering
Option 3:
Keep the master file separate and only combine other scripts (the advantage of this is that since the master is used across all pages, there is a chance that it is already cached and doesn't need to be downloaded again)
csshandler.axd?d=Master.css
csshandler.axd?d=page1.css,grids.css
Benefits: The master.css file can be cached regardless of the page visited. Fewer unused selectors as page-specific styles are applied
Drawback: Initially, a minimum of 2 HTTP requests will need to be made
What are your thoughts?
Cheers,
DotnetShadow