Combining CSS files: to a website or page template?

Question

We all know that we should combine our CSS into one file, but to a website or page? I found the pros and cons of both.

Here's the script:

• Great site
• CSS files are split into one file for global styles and many for modules

Solution A: merge ALL CSS files for the entire site into one file:

Best of all, one file will be cached on every page after the first hit! The disadvantage is that the naming convention for your selectors (classes and identifiers) becomes more important as the likelihood of a namespace collision increases. You also need a system for styling the same module in different ways on separate pages. This leads to additional choices in your CSS, which is more suitable for the browser. This can cause problems on mobile devices such as iPads that do not have as much memory and processing power. If you use media queries for responsive design, your problems are even more complex when you add additional styles.

Solution B: merge one CSS file per page template:

(By page template, I mean one layout, but many different pages, for example, article pages) In this case, you lose most of the problems with the choices described above, but also lose some of the benefits of the cache. The worst part of this method is that if you have the same styles on two different page templates, they will load twice, once for each page! For example, this will happen with all your global files. :(

Summary:

So, as is customary in programming, not a single solution is perfect, but if someone came across this and found the answer, I would love to hear it! Especially if you know any methods that help with the selector problem of solving A.

Answer 1

Of course, combine and minimize all global styles, such as your website template, typography, forms, etc. I would also consider combining the most important and most frequently used module styles in a global style sheet, certainly those that you plan to use on your home page or entry point.

Solution B is not good: the user loads the same content for each unique layout / page, when you can just load parts of it from the cache of the last page. There is no advantage to this method.

Otherwise, I would leave them separate (and reduce them) and just load them as needed. You can use any of the preload described on Yahoo! Developer's network "Recommendations for speeding up your website" for loading custom cache in advance:

Preload Components

When preloading the components, you can take advantage of the time during which the browser does not work and asks for the components (for example, images, styles and scripts) that you will need in the future. Thus, when the user visits the next page, you could have most of the components already in the cache and your page would load much faster for the user. There are actually several types of preload:

• Unconditional preload - as soon as onload is triggered, you go ahead and get additional components. Check google.com for an example of how a sprite image is requested at startup. This sprite image is not required on the google.com homepage, but it is necessary for the sequential search of the results page.

• Conditional preloading - based on the user action, you get a reasonable assumption when the user goes further and preloads it. On search.yahoo.com you can see how some additional components are requested after entering the input in the input field.

As for conflicting selectors: combining all files and executing them in some other way should not matter, this is a problem with your design. If possible, all modules are “named” in some way, possibly using a common prefix for module-specific classes, such as blog-header or storefront-title . There is a concept called “Object Oriented CSS” that can reduce the need for a lot of redundant CSS and module-specific class names, but this is usually done at the design stage, and not that you can “touch” an existing project .

Fewer HTTP requests are better, but you must consider file size as well as user behavior and activity. The initial loading time of the login page is the most important thing, so you do not want this to be related to things that you will not use until the end. If you really want to crunch the numbers, try a few different things and profile your site using the Firebug or Chrome development tools.

Answer 2

I think you can make global.css that stores the style that every template needs.

And you can do css in every template.

Or just use css framework like lescss