什么是处理多个Css样式表的有效方法?

时间:2011-03-25 20:12:40

标签: css stylesheet

有不同的网站共享几乎相同的布局但不同的风格。很好的例子是考虑stackexchange网络中的所有站点。它们都有类似的布局,但外观和感觉都不同。

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

那么我们是否可以跟踪样式表(例如存储在数据库中?),我们可以动态添加它们吗?

或者,为越来越多的网站处理不同样式表的有效方法是什么?

我正在查看office.com的来源,并且有愚蠢的网址拉起样式表,我相信它也有一些版本号。他们是否将样式表存储在中央存储库中?如果您在stackoverflow上查看源代码,您会看到类似的URL。

2 个答案:

答案 0 :(得分:3)

你的问题涉及几个方面,我将尝试在这里介绍其中两个。

可重复使用的CSS

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

为了对这些组合样式构成一个好的概念,您应该阅读CSS cascade hierarchyCSS specifity。这两件事确定了最终应用于元素的样式。

版本

CSS网址中版本号的使用主要与Cache Busting相关。它通常如下所示: style.css?v = 20110326 通常,您希望用户的浏览器缓存(保存)样式表,因此不必每次都重新加载新页面已加载。但是,如果您对文件进行了更改,则必须将新版本发送给所有回访者。通过添加新的不同版本字符串,您可以使浏览器“认为”它是一个不同的文件并重新加载它。

在大多数情况下,版本字符串由某些服务器端脚本语言自动添加,如PHP:

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

版本号(或字符串)本身有时只是derived from the file's mtime(修改后的时间戳)或取自Git或Subversion等版本控制系统。

答案 1 :(得分:0)

我个人不知道如何“混淆”文件名和位置的技巧。我想这是一些伪装成.css文件的脚本,它处理请求中指定的内容(all.css?v=e1214b61bb44).. webservers可以设置为解析除php以外的扩展名的文件或asp作为常见的php或asp文件,所以我认为这就是在这种情况下正在做的事情 对于样式表,您可以设置一个第三级域,您可以在其中存储任何共同的文件 在此之后,您应该在主样式表中设计基本布局,该样式表将由您的所有站点共享。然后,您可以在自己的特定样式表中对每个站点进行样式设置 在页眉中,您可以像这样链接它们:

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