One CSS file or several per site?

Question

css

Couldn't google properly. How are you doing? Found some options:
1. For each page on CSS.
2. For each page according to CSS, but not it is connected to each page, but a collector that merges them. What are assemblers? How convenient are they to use?
3. One CSS for all pages. Through what to optimize? After optimization, how convenient is it to maintain such code?
4. One CSS for general styles (for header and footer, modals and ted), for specific content one more CSS file - two in total.
Someone else wrote about preprocessors - how can they help? What other options are there?
I don't know how best to do it.

Answer 1

For convenience, the sources contain separate files for pages, sections, blocks, or even elements.
The output is 1 general minified and optimized file for all pages.
One file per page - complete nonsense. Pseudo-optimization that does not give a significant increase in download speed.

Answer 2

As for me, the most preferred is to use a single css file. Why? First, 1 file = 1 http request to the server (the fewer requests, the faster the page loads). Secondly, when you first visit the site, the css file is cached, and when you go to other pages, since this file is common to everyone, you won’t have to load any styles. Thirdly, there is less trouble with where to connect which files.
And finally, if you are interested in optimizing the loading of web pages, then look towards critical css - when the styles of the first screen (that is, the section that appears before the user's eyes immediately upon loading) are taken directly into the html markup, contributing to faster rendering web pages.
PS At the development stage, it is better to keep styles related to a specific section/page in separate files for convenience (preprocessors or postcss come to the rescue here), and then for production to collect them using a collector into a single css.

Answer 3

How are you doing?

One file with general styles for the entire project, another one with general section styles (header, footer, admin specific styles, etc.) and another file with page-specific styles.
If HTTP/2 is configured, then the last file can be replaced with a bunch of files from each block of the page. But you need to measure the performance of this approach in each case.

each page is connected to ... a collector that merges them

What other such collector?

Through what to optimize?

Through whatever you want.

After optimization, how convenient is it to maintain such code?

You support non-minimized sources, therefore, as much as before.

preprocessors - how can they help?

Read any article about preprocessors, everything is explained there.

Answer 4

I use the sass preprocessor, for each page there is a separate sass , and I will convert it all into 1 css, for now it’s enough

Answer 5

1. Great Option will be very easy to find where the styles are located and work with them.
2. It does not depend on the first option, and if there are a lot of styles, then using the must have collector will still not affect you when you work, you will have the same files for each page.
3. Bad idea - there may be a conflict of styles and it will be difficult to navigate in them
4. If there are laouyts such as a header footer sidebar etc, then of course it is better to allocate your own for them and not reconnect the same file each time
So the canonical scheme.
Separate template styles into a separate file.
For each page we write our own styles
At the end, we minify it all, for example, through GULP
profit

Answer 6

Well, for example, the most commonly used option:

• initial styles are written in different files, using a preprocessor (most often SASS and SCSS);
  
• a collector is used, which, when assembled, collects all SCSS files together and turns them into one CSS at the output, which is then simply connected to the page;
  
• in addition to this, the collector creates a map (MAP file) that helps with debugging, and if it is not needed, then it can simply be deleted.
  

Answer 7

Everything depends on the case. If you are doing simple projects now, then I advise you to try in different ways. Over time, you yourself will feel the difference and convenience of different ways. Since there is no ideal and universal solution.
Be sure to start learning the preprocessor, it will greatly expand your horizons at the moment.

Answer 8

Better 1 request per 100kb than 10 requests per 10kb. As a result, no subsequent page will load anything for itself, which means it will open as quickly as possible. And we must remember that if there are a lot of style files, then inevitably they will be loaded out of order, which means that the styles will be applied to the page as they are loaded, which leads to a change in the display of elements right in front of the user.