每个网页都有单独的CSS

Question

I am developing a website in asp.net 4.0. While designing I have a question

• Is it good to have separate css for every web page?

OR

• Have all styles in one css?

Please tell me what is the best solution?

Answer 1

It's best to keep all rules in one CSS file, since this file will be cached for all subsequent requests.

Unless you have a ton of CSS (ie. more than a few hundred kBs), this should not impact CSS engine performance, but it will significantly speed up loading of pages since requests won't have to be repeated for each page loaded, which will be your single greatest load time gain apart from your HTML page being generated.

EDIT : You should think about implementing compile-time (or on-demand) concatenation; that way you can have multiple CSS files that will be served as a single file to your clients.

Answer 2

It depends on the size of your code base.

Typically global rules should all be in one file, unless you are dealing with a massive code base where organizing them into separate files makes sense (but still included globally on every request).

Usually page specific CSS should be put in its own file and only included on pages that need it.

Generally speaking with large code bases, you would have a minifier and build process that concatenates all your global css into one file and includes that in production environment. This can be difficult to debug, so in development its better to keep them as separate files.

Answer 3

Aside from the caching and minimizing benefits outlined in other answers, consider that your CSS is essentially assigning a theme to your website or web application. If you think about how a theme works in your favorite media player or web browser, when you apply that theme, it generally affects the entire application, not just one part of it.

Therefore, if you think of your CSS as a theme, it then becomes easier for your designers to then change the look and feel of your site without ever having to touch a single line of HTML. Since a good design practice is to keep your HTML, JavaScript, and CSS completely separate, it makes it easier to make changes to one without having to worry about changes to the others. This reduces chances for bugs, since things that don't change remain stable.

What's more, your designers only have to make changes to 1 file in order to create a new theme, which makes their job easier. It makes your job easier because you don't have to go through and fix a bunch of broken HTML and JavaScript because CSS experts had to make changes to code that might not be their area of expertise.

A good example of this practice is Stack Exchange. Stack Overflow, Server Fault , Super User , and Stack Apps all run on the same Q&A engine, but each one has a slightly different theme. To create a completely new Q&A site, the frontend changes pretty much involve only CSS changes. This is how Stack Exchange can get away with having only 1 designer, Jin , who manages the designs of every single Q&A site on the network. What makes his job easier is the standardization and simplicity, and following the "don't repeat yourself" rule of thumb.

From looking at the browser source, you can see there is only 1 CSS file:

    <link rel="stylesheet" type="text/css" 
        href="http://cdn.sstatic.net/stackoverflow/all.css?v=52aab16f8140">

Answer 4

no, it is not good to keep seperate css for every web page. a professional never do this. but u can use two or three separate css for different browsers..