What is the combination of CSS techniques?
Which of the following would you say is the best way to combine files for CSS:
Let's say I have a master.css file that is used across all pages in my site (page1.aspx, page2.aspx)
Page1.aspx . A specific page with unique CSS that is only used on this page, so I am creating page1.css and also using different css grids.css
Page2.aspx . Another specific page that is different from all other pages on the site and different from page1.aspx, I will name it page2.aspx and make page2.css this does not use grids.css
So, you would combine scripts like:
Option1:
Combine csshandler.axd scripts ? D = master.css, page1.css, grids.css when visiting page1,
combine csshandler.axd scripts ? D = master.css, page2.css when visiting page2
Benefits : Given the pages, rendering is faster because only the selectors for that page need to match unused non-excluded selectors
Disadvantage : multiple combinations of master.css + pages, so master.css needs to be loaded for every page
Option2:
Combine all the scripts, whether they need a page or not.
csshandler.axd? D = master.css, page1.css, page2.css, grids.css (master, page1 and page2)
thus it is cached as one. The problem is that rendering can be slower as it will have to try and select EVERY selector in the css with selectors on the page even with missing ones, so in the case of page2.aspx that doesn't use grid.css the selectors in grids .css needs to be parsed. to see if they are on page 2, which means rendering will be slow.
Benefits . One file will be downloaded and stored in the cache no matter which page you visit.
Disadvantage . Unused selectors must be parsed by slow browser rendering
Option 3:
Leave the main file on it and combine the other scripts (the advantage of this is that the master is used on all pages, chances are that it is cached, so there is no need to continue downloading
csshandler.axd? D = Master.css
csshandler.axd? d = page1.css, grids.css
Benefits : The master.css file can be cached no matter which page you visit. Few unused selectors are used as page spefic
Disadvantage . Initially, at least 2 HTTP requests must be made.
What do you guys think?
Greetings
DotnetShadow
a source to share
Personally, I would say Option 2 - Combine all scripts . As your site grows, the number of pages will increase and tracking the CSS files with which the files become unmanageable. You might think that CSS is only used on one page, but I'm sure it won't be so in the future.
Once the user visits one page, they will have all the CSS and the other pages will be much faster. (Although you can optimize your home page separately). Think of a web application, not a web page.
a source to share
Have you measured your page load times with Firebug or something similar? I ask because I am curious that this will make a big difference.
Anyway, I just wanted to point you to the CSS Framework developed by yahoo. They have a very clean structure, and you might want to create your own structure in a similar way. They use a CSS reset file to create the same preconditions for each browser, which I think is smart.
Perhaps it helps.
a source to share