How to give CSS styles to the user?

Question

css

Hello.
I have a big project.
Is it better to make 20 CSS files that will be loaded ONLY where necessary or 1 large CSS that will be loaded everywhere

Answer 1

For development, divide files by entities, for example: one template - one css file (you use template inheritance, decorators, slots, blocks, etc.? :) ) with the maximum use of cascading. We get that each page will request 1-N css files (I usually get 6-7, 1 is a common template for all pages, 1 is the main content, 4-5 are menus and other blocks in sidebars). You can go even further by separating the css of individual entities into css of positioning / sizes, colors and other decor, but IMHO, it's redundant
For production, for each really encountered css combination, we generate our own one large css (usually it turns out about 10 pieces, slightly different) and call it for the corresponding pages (you can use pens, you can use the engine on the fly and with caching, you can use utilities) - in general, gluing . Additionally, it can be obfuscated and compressed.
We get that one css is called for each page, which has everything that is needed for it and there is nothing superfluous.
Pluses compared to extremes (a single file for all pages or 6-7 different files for each page):
- ease of development (subjectively, it's easier for someone to climb in one file)
- one css call per page, which means only one call to to the server (and then, if the user is not random, it is cached after the first call)
- the minimum css size for each individual page
- the minimum file parsing time by the browser (and hence the page rendering time) cases - the cache will be similarly large Pluses of a single file: - the minimum total amount of traffic and cache for a non-random visitor - one request per page, cached for all pages of the site Cons: - development complexity (subjectively) - excessive traffic and cache for random visitors
- longer parsing time for all pages (with the rare exception of pages that need all the css rules of the project)
Pros of a bunch of small files:
- ease of development (subjectively)
- close to the minimum amount of traffic and cache for random visitors, minimal for non-random
ones Cons:
- many requests to the server
- slightly longer parsing time compared to "gluing" You
can do the same with JS
PS Pre-optimization is evil
PPS If you use conditional "transitions" for IE, then you can either generate your own large file for it (then there will be no differences in pros / cons), or put all the used hacks into one file and connect it "statically" (then users IE will have two requests per page, one of which will have the pros and cons of "dynamic" connection, and the second will not), or generate a second file similar to the first (usually redundant) - I prefer the second option - "dynamically" generated shared CSS, and "static" file with hacks IE
PPS Pre-optimization is evil.

Answer 2

In most cases, it is better to upload 1 large file, while correctly setting the caching settings for clients on the server.

Answer 3

One big one is better. The “where necessary” option assumes that there will be more than one css on the page, which is not buzzing.

Answer 4

maybe I'm wrong, but:
If we have one big css, then this is not convenient from the point of view of the layout designer. much nicer when /css/_module/news/layout.css is an example for the
user.
The server, once giving css, will give the not-modified header to the following requests - the load will be once.
My opinion is that a lot of css is acceptable. Especially when there is not some kind of business card site, where the cat cried styles, but a portal with a bunch of modules.

Answer 5

there are scripts that take css names as a parameter and return 1 file in response + caching works

Answer 6

Merge everything into one file, obfuscate it and pack it in gzip. From this it will be better for both the user and the server.

Answer 7

1 large file that has all the necessary styles on frequently used pages.
That is, which will cover 70-80% of all requests.
The rest you hit on "packages", on sections and so on. And also glue in relatively large "bulging" groups.
If large groups do not work out, do not glue, but merge everything into one file.
And you need to bathe with this only if you no longer need to bathe with the rest

Answer 8

Two extremes. Put the common elements in one css, and group the different ones that are used on your pages according to their meaning into 2-5 css.

Answer 9

Depends on the specific site. For example, if the site contains a variety of articles and most visitors come from search engines and view one page on average, then it will be faster to load only those styles that are actually used on the current page. Otherwise, it may make sense to automatically merge all styles into one table and pack it in gzip.

Answer 10

the meaning of css in general is to unite and edit everything from one place :)
in our time, IMHO, it would be more correct to optimize graphics to increase speed, and not reduce the weight of files with styles.
In addition, one call to the server is better than 20. And it's much easier to understand one file than 20.

Answer 11

Better to use glue. That is, you have several css files, each of them is responsible for the style of individual blocks. insert them using connectcss.php/?css=layout,topnews,blog,news,menu
vremenno.net/misc/organization-optimization-and-cache-for-css-js-files/ - here is the link, more details here