2

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.

Mitul
  • 9,734
  • 4
  • 43
  • 60
  • so, you need to keep a basic similar layout across your websites, with just some slight changes and differentiation between them? – Lucius Mar 25 '11 at 20:21
  • And also I want to find out if there is way to secure these url it would be better if there is a known technique in asp.net. – Mitul Mar 25 '11 at 20:25
  • @Lucius Yes. I do want to keep similar layout across websites. And it can change a bit. – Mitul Mar 25 '11 at 20:29
  • For large websites like Office.com, storing assets like CSS and images on other domains (content delivery networks) allows for quicker load times by the browser. This is because only a few threads can pull from a particular domain at a time. This is why you are seeing odd URLs in secondary content like CSS. – Keith Adler Mar 25 '11 at 20:59
  • @Nissan - Can we store Css files on CDN of Microsoft or Google? And if we can then is it right way to do it for a css file. I have seen for script files. Thanks Nissan for answering – Mitul Mar 26 '11 at 02:56
  • A CSS file is simply a URL that you include. Take a look at how ESPN and CNN use multiple domains to increase load times and centralize certain assets such as images, CSS, and JavaScript by browsing their page source. Read up on http://www.cachefly.com/ for how these sites work, but in reality you could just roll your own with a VPS or Amazon cloud-based solution. – Keith Adler Mar 26 '11 at 03:53

2 Answers2

3

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.

pixelistik
  • 7,541
  • 3
  • 32
  • 42
  • So if changes are made then it would have to be tracked and there has to be some program or code I guess which would change version number and assign it to html page. Is there any way to keep track or just change the url of css file. Thanks for answering. – Mitul Mar 26 '11 at 02:52
  • I'm curious about versioning.. how is it acheived? were my assumptions correct, or is it done in another way? thnx – Lucius Mar 26 '11 at 07:15
  • I have added some info on how the version number could be added with PHP and how and what its source could be. However, this is getting away from the original question. @Lucius I cannot really tell which your assumptions were and if they were right. – pixelistik Mar 26 '11 at 20:57
0

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" />
Lucius
  • 968
  • 1
  • 11
  • 16
  • The "trick" is only to make sure that if you change your CSS version, browsers will be forced to download it instead of using the cached version (as the name is different) – Matteo Riva Mar 26 '11 at 21:18
  • @Matteo so you simply change the query string, and the file is just a plain css file? – Lucius Mar 27 '11 at 06:17