Common patterns for styling a large website

Question

Is there any common patterns for how to setup, create, store your CSS for large websites?

I have tried many different things that I have come up with on my own.

I've tried putting all layout (position, size, etc.) in 1 file while all decoration (color, background, etc.) in another so I can swap out styles easily without effecting layout. This becomes very tedious when every element is styled in multiple files.

I've tried coming up with one main CSS file, then any page that has different rules, gets its own CSS file for those rules. This eventually leads to other pages with the same "unique" rules, and always ends up with duplicate CSS (each page has its own CSS file defining what-should-be a shared style) making it harder to maintain.

Every CSS book, tutorial, or whatever I have ever read explains what CSS does and how to use it in the context of a single page or small site. I have a good understanding of that, but I never see any discussions on how to make a plan to style a large website with lots of inconstancies.

Is there a pattern/common practice I can follow?

Answer 1

You should always keep in mind performance. Having one large file is optimal since it is only loaded once and can be subsequently cached, allowing other external resources to be loaded reducing the overhead of page load times substantially. Obviously it makes for a large file but through comments and indenting you should be able to group things together in a reasonable manner.

Alternatively you can keep them separate in your DEV environment and consider a build mechanism to combine them all into one file before deployment. That really gives the best of both worlds.

The only real need I've seen for separate CSS files is theming, accessibility and different styles for the medium (print, page etc...).

Answer 2

Take a look at the big sites like for example Flickr, Facebook, Twitter or something like that. The best thing (in terms of speed), is to use one css file to store everything.
In terms of different rules for different sites, there is also a possibility to design "modular" - like

.redFontColor {
  color: #F00;
}

.smallFont {
  font-family: "Courier New", "Times New Roman", serif;
  font-size: .7em;
}

.alignedLeft {
  text-align: left;
}

And use it in HTML like that

<div class="alignedLeft">
  This will be <span class="smallFont redFont">small and red</span> - but this text will just be <span class="redFont">red</span>
</div>

There are quite a lot of sites which go like this ;-).

Answer 3

You should always keep in mind:

• Reusability
• DRY
• W3C Standards
• Cross-Browser Testing
• Performance