Different style sheet for each page or only one?

Question

I’m developing a website and came up with a question regarding a somewhat boring situation...

When you’re developing a web project you use just one style sheet for the whole site or you make a style sheet for each page?

Why all the css code in just one stylesheet gets a little confusing and very tiring to find elements.

Answer 1

There is no correct answer and it is very difficult to answer a question of this kind without an opinion. First, speaking of the organization of files:

Developing

In development I use several CSS files (actually write with Less), separating them as much as possible so that each file has specific responsibilities. For example, a file colors.less only to define the colors that will be used in the html document, nothing else. Although the output be a single file, by organizing keep the files separated by responsibilities facilitates future maintenance.

Even if you don’t use preprocessors, nothing prevents you from creating multiple files .css (also separating them by specific responsibilities) and make use of a tool like Gruntjs to generate a single file .css.

In production

In production I use a single file, a priori to prevent several requests to the download of resources.

If you think about it, having separate styling files can make sense in development on account of organization, either itself or determined for the project. But in production having multiple files is a point against mainly dealing with performance. When the page is being rendered no matter if the file .css is well indented, commented, if you break line after opening keys... but ordering multiple files to assemble the page can be costly.

Now yes, to answer the question...

One for all pages or one for each page?

And the answer is... depends on!

Consider that you have a file .css "256KB minified" made for a web system, there are all the rules that builds the page that the user will see after logging in. But let’s assume that the access page to the system is simple, having only two inputs (username and password) and a button to send the form data.

In this scenario, if the same file (of 265KB) is used by the login page, when the user accesses it will have to download a heavy file, containing several rules that would be discarded for not being useful in styling the form and the page itself.

If access comes from a mobile device and in Brazil, this can be even worse - I say this because of the Internet plans that operators have. Depending on the frequency of access, a few hours or days accessing your system would be a "help" in both to end the user’s internet franchise.

So, creating a separate file to handle only the login page would be more feasible, downloading 4KB instead of 256KB would be a huge gain, no!?

Your CSS file needs to have rules that will be used in page rendering, why several frameworks give the possibility to customize the construction of the code only with what will be used, an example is the Twitter Bootstrap.

It’s the same case for resets, It is not because "good practice" recommends that you necessarily need to make use of it. If a rule will never be applied to your HTML document, there is no reason why it exists in your CSS.

Answer 2

Whenever I’m developing, I work on just one style sheet, making backups and links with css and pages easier. On the other hand, there is a lot of information and so I always leave it on the sheet, what that TAG/ID is about, what that element itself does on each page.

Answer 3

In the Gringo So has a discussion very interesting on the topic.

I particularly use the following technique: I have a file that at all times will be in my projects which is the reset.css. After that, I separate some things into separate files, which I know are things that I won’t deal with as often, such as typography, grids, mixins and colors (these last two are only possible thanks to SASS).

Once I have this base ready, I import it all into a final file, in which I write the rest of the code.

This question will have a very high answer range, since there are techniques and techniques for how to write and optimize CSS. In that reply, I have spoken a little more deeply about good practice and some things that I think are important.

Answer 4

For the general part, I use the pattern, that is, a single stylesheet for most of the site, while other small parts, like @re22 mentioned, you can set some patterns for something you want to separate and leave more organized, but you will have more requests to do, which could impact a little performance loss on your website. But it is quite interesting to separate some css files like box’s, etc.