css - Good practice with CSS — One sheet for each page?

Question

The question is simple: it is a good practice we have one "master CSS file" (the same concept of master pages) and, for each page, one specific and unique CSS file?

I ask this because I think that it's useless to have very different code on a page that will not use it — can you all understand me?

Answer 1

From a UI point of view...

Use separate CSS if:

• You have almost independent pages with less common stuff
• You need to reuse specific pages in different projects

Use single CSS if:

• You have lot of common styles

Answer 2

The greatest advantage when using one master CSS file than having a master and several specific CSS files is that

1. You save on HTTP request times and resources. If you have several files, you need to call your server a few times and waste on the metadata.
2. Everything is in one place, you get to edit them more easily. CSS becomes more managable for your website.
3. Caching helps greatly.

The redundant / unused style rules in your master file may be too little to matter much.

Answer 3

In my opinion it is best to have as less number of stylesheet (css) and JavaScript files as possible to reduce number of HTTPS requests.

Having one large css file is better then having 5 different files as most likely the css file will be cached in the user's browser after initial request and cached CSS file will be served after first request.

Answer 4

Yes, it is best practice for the following reason:

When the user loads your website they will take the hit of downloading the singel CSS file on first load - thereafter it will be cached by their browser for every page on your site under your main domain. This means no more loading of the CSS file from the server for surfing your site and faster page loads.

If you have separation concerns from a code structure point of view I would encourage you to consider some CSS pre-compilers such as SASS or LESS that will allow you to structure your code in a nicer way.