什么是高效的方式处理多个CSS样式表？ [英] What is an Efficient Way of Handling Multiple Css Stylesheets?

问题描述

有不同的网站分享几乎相同的布局，但不同的风格。好的例子将考虑所有网站stackexchange网络。他们都有类似的布局，但不同的外观和感觉。

如果我们必须为不同的浏览器维护3到4个样式表，那么考虑5个网站和每个网站，那么我们需要管理近20个不同的样式表。这是很难处理，特别是如果我们试图复制具有不同外观和感觉的类似网站。

那么我们可以跟踪样式表（例如存储在数据库中）吗？我们可以动态添加它们吗？

或者，对于越来越多的网站，处理不同样式表的有效方式是什么？

我正在查看office.com的来源，样式表，我相信它也有一些版本号。它们是否将样式表存储在中央存储库中？如果你在stackoverflow上查看源代码，你会看到一个类似的url。

解决方案

您的问题涉及几个方面，我将在这里讨论其中两个。

可重用的CSS

如果多个网站共享相同的基本布局，最好让他们共享一个基本的CSS文件。然后，您可以在每个网站的较小的CSS文件中进行网站特定的调整。

为了构成这些组合样式的一个好概念，应阅读 CSS级联层次结构和< a href =http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ =nofollow> CSS specifity 。

版本控制

使用版本CSS网址中的数字主要与缓存无效化。它通常看起来像这样： style.css？v = 20110326 通常，您会希望用户的浏览器缓存（保存）样式表，因此不必每次重新加载新页面被加载。但是，如果您对文件进行更改，新版本必须传递给所有返回的访问者。通过添加一个新的不同的版本字符串，您使浏览器认为它是一个不同的文件，并重新加载它。

版本字符串在大多数情况下自动添加一些服务器端脚本语言，如PHP：

 < link href =style.css？v =<？php echo $ css_version;？> rel =stylesheettype =text / css/> 
  

版本号（或字符串）本身有时只是从文件的mtime导出（修改时间戳），或者从像Git或Subversion这样的版本控制系统获取。

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.

解决方案

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.

这篇关于什么是高效的方式处理多个CSS样式表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！