Common Practice Amongst Large Websites When Linking to External CSS Files?

Lets say I have 10-20 webpages same template different content 开发者_JS百科area do I use One stylesheet or a main stylesheet for the template and separate stylesheets for each additional webpage? Also what do large corporate websites do (foxnews,google,cnn)? If you have a source or article I would really appreciate it. Thanks

If you have a single CSS file, it will be downloaded once and cached by the users browser. So it will be slightly bigger than individual stylesheets per page, but you remove the additional HTTP requests.

Even if you develop several stylesheets (normally layout, typography, colour) it is typical practice to combine these and minify them for production so you have a single HTTP request.

If you are after hyper-awesome performance, like Google on their home page, you may choose to be very radical with how your write your web page - http://www.stevefenton.co.uk/Content/Blog/Date/201008/Blog/Google-Deliberately-Write-Awful-HTML/

But on the whole, one stylesheet is a good target.

The other benefit of having a single stylesheet is that you are less likely to duplicate your rules in several places - if you have additional stylesheets for each page it is likely that similar rules will creep into several of them - and when you have to change 6 stylesheets to make one change, it is equivalent to not having stylesheets in the first place.

Yahoo recommend a single combined stylesheet in their "Best Practices For Speed" guide:

http://developer.yahoo.com/performance/rules.html