What is an Efficient Way of Handling Multiple Css Stylesheets?

Question

There are different sites sharing almost identical layout but different styles. Nice example would be considering all sites within stackexchange network. They all have similar layout but different look and feel.

Consider 5 sites and for each site if we have to maintain 3 to 4 stylesheets for different browsers then there are almost 20 different stylesheets we have to manage. Which is difficult to handle especially if we are trying to replicate a similar site with different look and feel.

So Is there are way we can track stylesheets (e.g. storing in database?) and we can dynamically add them?

Or what is an efficient way to handle different stylesheets for growing number of websites?

I was looking at source of office.com and there was goofy url pulling up stylesheet and I believe it has some version number too. Are they storing stylesheets in a central repository? If you view source on stackoverflow you would see a similar url.

Answer 1

Your question addresses several aspects, I'll try to cover two of them here.

Re-usable CSS

If several sites share the same basic layout, it is a good idea to have them share one basic CSS file. You can then make site-specific adjustments on top of that, in smaller CSS files for every site.

In order to make up a good concept for these combined styles, you should read about the CSS cascade hierarchy and CSS specifity. These two things determine which style is applied to an element in the end.

Versioning

The use of version numbers in CSS URLs is mostly related to Cache Busting. It often looks like this: style.css?v=20110326 Normally, you will want your users' browser to cache (keep saved) the style sheet, so it does not have to be reloaded every time a new page is loaded. But if you make a change to the file, the new version must be delivered to all returning visitors. By adding a new, different version string, you make the browser "think" it is a different file and reload it.

The version string is in most cases added automatically by some server side script language, like PHP:

<link href="style.css?v=<?php echo $css_version; ?>" rel="stylesheet" type="text/css" />

The version number (or string) itself is sometimes simply derived from the file's mtime (modified timestamp) or taken from a revision control system like Git or Subversion.

Answer 2

I personally don't know how the trick for "obfuscating" file names and locations is done. I suppose it's some script disguised as a .css file that hands the content specified in the request (all.css?v=e1214b61bb44).. webservers can be set to parse files with extensions other than php or asp as common php or asp files, so I reckon this is what's being done in this case.
As for the stylesheets, you could set a third level domain in which you will store any files in common.
After this, you should design the basic layout in a main stylesheet that will be shared by all your sites. Then you can go on styling up each single site in its own specific stylesheet.
In the page head, you can link them like this:

<link rel="stylesheet" type="text/css" href="http://common.domain.com/style/basic.css" />
<link rel="stylesheet" type="text/css" href="http://common.domain.com/style/sitespecific.css" />