我们有一个庞大的ASP.Net网站，它有一个失控的单个css样式表。
我正在考虑使用以下策略（取自http://www.techrepublic.com/article/developing-a-css-strategy/5437796/），这对我来说似乎是合乎逻辑的......
您可能有一个专门用于全站点样式的CSS文件和用于可识别的网站页面子集的CSS文件（例如特定部门的页面或具有不同布局样式的页面）。对于特定页面特有的样式，请为每个页面使用单独的CSS文件（如果样式太多而无法轻松放入文档标题中）。您链接或导入每个页面的相应CSS文件，以便您加载显示该页面所需的所有样式，但很少有不必要的样式仅显示在其他页面上。
这是一个很好的方法吗？有哪些替代方案？
答案 0 :(得分：17)
我认为最好的选择是将css划分为：
-layout.css
-content.css
然后，如果您需要更具体的其他内容，则可以为广告添加更多内容：ads.css，或者为特定部分添加一个css。
我还会为IE css hacks添加ie.css。
我不会谈论只为一个页面创建一个css：如果你使用太多css就可能遇到的问题是，你的页面必须向服务器发出更多请求，这会降低你的页面速度。 这就是为什么我建议你实现一个HttpHandler，它只会在你目前需要的css文件中创建一个缓存副本。看这里： http://blog.madskristensen.dk/post/Combine-multiple-stylesheets-at-runtime.aspx
答案 1 :(得分：13)
有三种用于分解样式表的主要方法：基于属性，基于结构和混合。您选择哪种方法应该基于工作流程和个人偏好。
基于属性的分解的最基本，最具代表性的形式是使用两个样式表：structure.css和style.css。 structure.css文件将包含仅使用高度，宽度，边距，填充，浮点，位置等属性的规则。这将有效地包含以您希望的方式排列页面元素所必需的“构建块”。 style.css文件将包含具有背景，字体，颜色，文本修饰等属性的规则。这有效地充当在其他样式表中创建的结构的外观。
其他分色可能包括使用typography.css文件，您可以在其中放置所有字体属性。或者colors.css文件，您可以在其中放置所有颜色和背景属性。尽量不要过分，因为这种方法很快变得比它的价值更麻烦。
基于结构的分解样式表的方法围绕着根据它们应用的元素分离规则。例如，您可能会看到标题中所有内容的masthead.css文件，页面内容区域中所有内容的body.css文件，侧栏中所有内容的sidebar.css文件以及footer.css文件页面底部的所有内容。
当您在每个网页上都有一个包含许多不同部分的网站时，此方法确实很有用。它还有助于最大限度地减少每个样式表中的规则数量。与基于属性的方法不同，该方法在页面上的每个元素的每个样式表中都有规则，使用此方法，在一个样式表中只有一个规则用于任何给定元素。
正如您所料，混合方法结合了两种方法的优点，这是我的首选。在这里，您可以创建一个structure.css文件，就像在基于属性的方法中一样，只使用创建基本布局所需的那些属性。然后你创建了另外的样式表，比如masthead.css，它会覆盖标题; body.css，内容;等
困扰这些方法的一个问题是，通过创建多个样式表，您需要客户端的浏览器获取许多文件。这会对用户体验产生负面影响，因为大多数浏览器只会向同一服务器发出两个并发请求。如果您有七个样式表，这意味着在初始页面加载时可能会增加数百毫秒（一旦样式表被缓存，这种效果就会减弱，但您希望对这些新访问者留下良好的第一印象）。正因如此，创建了CSS sprites技术。打破样式表可能会消除使用精灵所带来的任何好处。
解决这个问题的方法是在用户发出页面请求时将破碎的样式表压缩回一个样式表。
要充分利用这两个方面，请考虑使用像Sass这样的CSS元语言。这允许CSS作者将一个样式表分成多个样式表，同时仍然只向浏览器呈现一个样式表。这为CSS创作工作流程增加了一个步骤（尽管可能会编写脚本以在Sass文件更新时将Sass编译为CSS），但这可能是值得的，特别是在考虑Sass的许多其他好处时。
答案 2 :(得分：7)
你可以做的就是有很多易于管理，分开的文件用于开发，然后将它们整合成一个文件并在你的实际网站上缩小它。
这需要设置一些工作，但为您提供两全其美的优势 - 易于管理网站+快速页面加载。
编辑：雅虎的YUI compressor似乎是最好的缩小器。它可以压缩CSS和Javascript。
答案 3 :(得分：2)
我的解决方案，充足：
我将它用于中型网站。对于额外的组织，我保持每个表格基本相同{包装，一般，唯一等}。我还标记了我的选择器和属性，以及在同一个选择器组中按依赖顺序缩进它们，所以我知道我引用或扩展的规则。这个框架允许几乎无限扩展，同时保持组织，可理解和可重用。我一个月前不得不重构7000+行master.css文件，所以这是我正在尝试的新系统。我发现100％内容语义CSS不像语义/布局混合那样可扩展且易于理解，因为无论如何都是CSS。
1.25年后 - 编辑：另一种可能更相关的方法是使用一个好的CSS文本编辑器。我很肯定VS是使用CSS的废话，除非你发生了一些扩展。如果你在Windows上，给E Text Editor一个镜头，b / c它是一个TextMate Windows端口，并且有专为CSS和标记设计的软件包，可以为你提供更好的语法高亮和自动完成功能。你可以做的就是将8000行样式表组织成可折叠的折叠：
/** Start Module 1 */
[css]
/* End Module 1 **/
使用符号列表为您快速显示TOC，其中包含Start或Module 1等查询。它还会使用/** these types of comments **/对行进行索引（非常适合标记区域）和所有CSS选择器链。使用E的单个大文件应该没有问题。此外，除非你逐步增强你的CSS，否则无论如何都会缩小。我还要确保缩进你的CSS，以模仿它所指的DOM部分的结构。
.container {}
.container .inner {}
.container .head {}
.container .inner.alt {}
否则，我同意'1 Base CSS和1 Page / Section CSS`方法，但这完全取决于您的业务需求。
答案 4 :(得分：1)
我会查看YUI CSS。也许不是你想要的答案，但YUI CSS消除了不同浏览器等的麻烦......
答案 5 :(得分：1)
制定一些适合您（或您的公司）的简单规则。
将CSS划分为单独的文件，例如：
layout.css
content.css
menu.css
typography.css
确定每个文件中的声明，例如，确保：
font-weight, text-decoration, font-family
和
h1, h2, h3, h4, h5, h6, a, p, li
全部驻留在排版CSS文件中。决定如何处理边缘情况，例如标题上的边框属性，文本元素上的边距和边距（布局或排版）。
如果你的声明组变得笨拙，有些人喜欢按字母顺序排列它们。
缩进你的CSS，例如：
#logo h1 {text-indent: -9999px}
#logo h1 a {display: block; width: 200px; height: 98px; backround...}
评论您的CSS，包括对该特定选择器的其他规则所在的其他文件的引用。
如果您将CSS划分为单独的文件，请考虑将它们合并并压缩到一个文件中，作为构建和放大的一部分。部署过程。
确保每个开发人员都清楚您的CSS标准。
另外，有点相关，我刚刚意识到用于查找不必要的选择器的Firefox插件。它被称为Dust-Me Selectors。
答案 6 :(得分：0)
另外，您是否看过在asp.net中使用主题和皮肤文件？ .css和.skin的组合可以大大减少Css的整体大小，这对于性能略有好处，但对于更容易管理非常有用。
一个css文件中可能包含一些例外，但如果一个例外情况完全不同，那么你可以考虑单独的css，或者如果它们不同则可以考虑单独的网站。显然，您可能会加载不同版本的主题，具体取决于它是哪个用户。这是你可以爆发Css文件的地方。也就是说，假设您为每个页面都有一个CSS，然后您希望为您网站上的不同客户端提供不同的服务，那么您将成倍增长。这当然是假设你遇到了这个挑战。
答案 7 :(得分：0)
我对JavaScript文件有同样的想法。如果您的网站高度依赖于Ajax，几乎每个页面都需要某种自定义Javascript，那么您是否坚持使用它？
最佳做法是在页面中没有javascript但是作为外部文件（与css一样）。但是如果你每页都有一个.js文件，那么事情就会慢慢失控。
答案 8 :(得分：0)
我不确定Windows等价物，但在Mac上你可以获得CSSEdit，它允许你将文件夹添加到CSS文件并像这样管理它们。在this article中有一个很好的解释。
答案 9 :(得分：0)
全球css文件让我头疼。 CSS通常不是命名空间，所以如果两个不同的模块创建一个带有“box”类的div，那么一个的意图会覆盖另一个。此外，[a]标签，[p]标签和其他基本标签（即不基于类或ID的样式）上的样式将破坏第三方控件，因为您的全局样式表级联到设计假设的html组件页面上没有其他的CSS。不恰当地使用以中心元素为中心的文本会导致难以调试全局居中。所以我喜欢多个css文件。我见过css管理器（http模块在请求时将css合并在一起），但决定额外的http请求非常值得限制css对我的应用程序可能造成的损害范围。
答案 10 :(得分：0)
我们使用Ruby on Rails，因此我们有一个清晰的控制器/动作对，我们使用它来引用CSS类和Javascript视图。
具体来说，获取控制器的名称+操作名称，并将其作为ID嵌入视图中，将其放在body标签或主内容div上。
<body id="users_list_body">
“users”是控制器的名称，“list”是操作。然后在你的CSS中你有规则喜欢
#users_list_body
因此，您可以将所有特定CSS范围扩展到该视图。当然，您还可以使用更通用的CSS来处理整体样式。但是，更容易定义此ID允许您为单个页面创建特定的CSS（因为控制器/操作映射到特定页面）。
你最终有这样的规则
#users_list_body table
#users_list_body table thead
为Javascript做同样的事情。因此，在每个页面的页脚中，您将使用相同的控制器/操作名称对并将其嵌入函数调用
//javascript
if(V.views.users_list) { V.views.user_list(); }
然后在您的外部Javascript中有类似
的内容V = {};
V.views = {};
V.views.user_list = function() {
//any code you want to run for the Users controller / List action..
//jQuery or something
$('#save_button').click({ ... });
}
将所有Javascript代码限定为特定函数，最终将全部封装。然后，您可以将所有Javascript文件合并为一个，压缩它，然后将其作为一个文件提供，并且您的逻辑都不会发生冲突。一个页面的JS不会与任何其他页面的JS冲突，因为每个页面的方法名称都是作用的。
答案 11 :(得分：0)
无论您的选择是什么，都避免使用@import指令。
使浏览器按顺序加载样式表，从而减慢页面的加载和呈现速度。
答案 12 :(得分：0)
这就是我所做的：我将样式表分开，有点像其他人所建议的那样。但是，我有一个脚本将它们连接在一起，缩小它们，添加标题，然后再压缩它们。然后将生成的文件用作样式表，如果超出过期日期，则会自动重新编译。我在网站范围内为所有常见文件执行此操作，然后在特定于页面的CSS上执行此操作，该页面仅显示在该页面上。最多，我将只有每页调用2个CSS文件，它们将被压缩，这样可以最大限度地减少下载时间和大小以及页面请求的数量，但我仍然可以通过任何有意义的方式将它们分开。我。相同的策略也可以用于JavaScript。