Different style sheet for each page or only one?

15

I'm developing a website and I had a question about a rather boring situation ...

When you are developing a web design, do you use only one style sheet for the entire site, or do you make a style sheet for each page?

Why all css code in just one style sheet gets a bit confusing and very tiring to find elements.

    
asked by anonymous 04.06.2015 / 16:42

4 answers

5

There is no right answer, and it is very difficult to answer such a question without comment. First, speaking of file organization:

In development

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

Although you do not use preprocessors, nothing prevents you from creating multiple .css files (also separating them for specific responsibilities) and making use of a tool like Gruntjs to generate a single file .css .

In production

In production I use a single file, a priori to avoid making multiple requests for download of resources.

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

Now, by answering the question ...

One for all pages or one for each page?

And the answer is ... it depends !

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

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

If the 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 access frequency, a few hours or days accessing your system would be a "help" in order to end the user's internet franchise.

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

Your CSS file needs to have rules used in page rendering, so several frameworks give you the ability to customize code building only with will be used, an example is Twitter Bootstrap .

It's the same case for resets , it's not because "good practices" recommend that you necessarily need to make use of them. If a rule is never applied in your HTML document, there is no longer a rule in your CSS.

    
04.06.2015 / 20:53
3

Whenever I'm developing, I work on just one style sheet, it makes backups and links to CSS and pages easy. In compensation, there is a lot of information and therefore I leave always discriminated on the sheet, what is that TAG / ID, what that element itself does on each page.

    
04.06.2015 / 16:55
2

In SO gringo has a discussion very interesting about the topic.

I, in particular, use the following technique: I have a always file that will be in my projects which is reset.css . After that, I separate some things into separate files, which I know are things I will not deal with so often, such as typography, grids, mixins, and colors (the latter two are only possible thanks to the SASS ).

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

This question will have a very high response range, since there are techniques and techniques on how to write and optimize CSS. In this answer , I talked a little more about good practices and some things that I consider important.

    
04.06.2015 / 17:02
2

For the general part, I use the default, that is, a single style sheet for most of the site, since 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 make, which may impact a small performance drop in your site. But it's pretty interesting to separate some css files, such as box's, etc.

    
22.06.2015 / 18:47