What is an efficient way to handle multiple CSS style sheets?

Question

There are different sites that have an almost identical layout, but different styles. A good example would be to look at all the sites on the stackexchange network. They all have the same layouts, but different views.

Consider 5 sites and for each site, if we need to support from 3 to 4 stylesheets for different browsers, then there are almost 20 different stylesheets that we need to manage. This is difficult to handle, especially if we are trying to reproduce a similar site with a different look.

So, is there a way to keep track of stylesheets (e.g. store in a database?), And can we add them dynamically?

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

I looked at the source office.com, and there was a dumb url that pulled up the stylesheet, and I believe it has a version number as well. Are stylesheets stored in a central repository? If you browse the source in stackoverflow, you will see a similar url.

Answer 1

Your question addresses several aspects, I will try to consider them here.

Reusable CSS

If several sites use the same basic layout, it is recommended to have one common CSS file. Then you can make site-specific adjustments in smaller CSS files for each site.

To make a good concept for these combined styles, you should read about CSS Cascading Hierarchy and CSS Specification . These two things determine which style is applied to the end of an element.

Versioning

Using version numbers in CSS URLs is mainly related to Cache Busting . It often looks like this: style.css? V = 20110326 Usually, you need your users browser to cache (save) the style sheet, so it does not need to be reloaded every time a new page loads. But if you make changes to the file, the new version should be delivered to all returning visitors. By adding a new, different version line, you make the browser “think” that it is a different file and reload it.

The version string in most cases is automatically added in the script language on the server side, for example PHP:

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

The version number (or line) in itself is simply obtained from the mtime file (modified timestamp) or taken from a version control system, such as Git or Subversion.

Answer 2

I personally don't know how the trick is done to “obfuscate” file names and locations. I suppose this is a bit of a script disguised as a .css file that passes the content specified in the request ( all.css?v=e1214b61bb44 ). Webservers can be configured to parse files with extensions other than php or asp, like shared php or asp files, so I believe that this is what is done in this case.
As for the style sheets, you can set a third level domain in which you will store any files in general.
After that, you should create a basic layout in the main stylesheet, which will be used by all your sites. You can then continue styling each individual site in your own stylesheet.
In the page title, you can link them as follows:

 <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" />