CSS Best Practices for Large Scale Web Site

Question

So far, my experience in web design has been with very small scale sites and blogs (where there isn't much diversity in page styling). However, I am now beginning to tackle some significantly larger scale web sites and I want to start off on the right foot by creating a scalable and maintainable css file / structure.

Currently, my method for applying styles to web pages is to give every web page a distinct ID in the body, and then when I'm designing a page my css rule will look like this:

body#news section .top { rules }

Surely there is a more maintainable approach to applying CSS for a large-scale web site?

Answer 1

Avoid giving each page a body tag with a unique ID. Why? Because if a page needs to be styled uniquely, it should have its own stylesheet.

I will often have a main.css stylesheet, stylesheets for various similar portions of my website (like an administration.css for an admin section, assuming the pages in the admin section shared a similar look and feel), and then give certain unique pages their own stylesheets (like signup.css).

I then include the stylesheets in order from least-to-most specific, because if two otherwise-identical rules are encountered, the rule in the most "recently" included stylesheet will be used.

For example, if my main.css had:

a { color: red; }

... and for some reason, I wanted my signup page to have blue links:

a { color: blue; }

The second rule will overwrite the first if my signup.css were included after main.css.

<link rel="stylesheet" href="/stylesheets/main.css">
<link rel="stylesheet" href="/stylesheets/signup.css">

Answer 2

there is a very informative and detailed answer over here: Managing CSS Explosion

you could also check out object oriented css: http://www.slideshare.net/stubbornella/object-oriented-css

or css systems: http://www.slideshare.net/nataliedowne/css-systems-presentation

Answer 3

To sum up the above answers and give some additional comments:

1. You put everything in one CSS, and use unique body IDs for page-specific settings. This approach speeds up your site because you're saving HTTP requests (browser caches just one file)
2. You have one CSS per page, plus one global one to take care of global settings, header, footer and any other elements that appear everywhere. This is friendlier if you have more than one developer working - less chance of conflicts because of updates to the same file. Even if you use a versioning system like SVN (and with a big site you should), it's always safer to have different files.
3. You can have the best of both worlds by separating into files, and then using a minifier to merge and compress all of them into one "compiled" CSS. This is more complicated, you need to fit it into your workflow, and it makes frontend debugging harder. See Any recommendations for a CSS minifier?.