管理CSS爆炸

这里有一些很棒的材料，有些花了一些时间来回答这个问题，但是当涉及到单独的样式表或单独的样式表时，我将使用单独的文件进行开发，然后将所有用于站点的通用css合并到一起部署时将其合并为一个文件。

这样一来，您便可以兼得两全，提高了性能（减少了从浏览器请求的HTTP请求），并且在开发时分离了代码。

我建议您查看“指南针样式” CSS框架。

很多时候，我会看到个人将文件分成几部分，并在各部分之间添加标题注释。

就像是

/* Headings and General Text */

.... stuff here for H1, etc..

/* Main page layout */

.... stuff here for layout page setup etc.

它工作得很好，可以很容易地稍后返回并找到您正在处理的内容。

明智的CSS的核心原理，摘自CSS重构：从仅追加到模块化CSS

用SASS编写。您会疯狂地放弃变量，mixin等的优势。

切勿使用HTML ID进行样式设置；总是使用类。如果正确使用HTML ID，则它在整个页面中只会出现一次，这与可重用性完全相反，可重用性是明智工程中最基本的产品之一。而且，要覆盖包含ID的选择器真的很困难，通常，压倒一个HTML ID的唯一方法就是创建另一个ID，从而导致ID像有害生物一样在代码库中传播。最好保留HTML ID以保持不变的Javascript或集成测试挂钩。

通过视觉功能而不是特定于应用程序的功能来命名CSS类。例如，说“ .highlight-box”而不是“ .bundle-product-discount-box”。以这种方式进行编码意味着您在担当副业时可以重新使用现有的样式表。例如，我们开始出售法律票据，但最近又转为法律辅导员。我们以前的CSS类的名称类似于“ .download_document_box”，该类名称在谈论数字文档时很有意义，但仅在应用于新的私人家教领域时才会造成混淆。既适合现有服务，又适合将来的服务的更好的名称是“ .pretty_callout_box”。

避免在特定的网格信息之后命名CSS类。CSS社区曾经（现在仍然是）可怕的反模式，CSS框架的设计者和创建者（咳嗽Twitter Bootstrap）认为“ span-2”或“ cols-8”是CSS类的合理名称。CSS的要点是使您可以修改设计而不影响标记（很多）。将网格大小硬编码为HTML会阻碍此目标，因此在任何预期持续时间超过周末的项目中均建议不要这样做。有关稍后如何避免网格类的更多信息。

在文件之间分割CSS。理想情况下，您将所有内容拆分为“组件” /“小部件”，然后由这些设计原子组成页面。但实际上，您会注意到您的某些网站页面具有特质（例如，一种特殊的布局或仅出现在一篇文章中的怪异的照片库）。在这些情况下，您可能会创建一个与该特定页面相关的文件，仅当很明显该元素将在其他地方重新使用时，才将其重构为一个成熟的小部件。这是一种折衷，这是由实际预算问题引起的。

尽量减少嵌套。引入新的类，而不是嵌套选择器。SASS消除了嵌套时重复选择器的麻烦，这一事实并不意味着您必须嵌套五个级别。切勿过度限定选择器的资格（例如，不要使用“ ul.nav”，其中“ .nav”可以完成相同的工作。）也不要在自定义类名称旁边指定HTML元素（例如“ h2.highlight”）。相反，仅使用类名并删除基本选择器即可（例如，前面的示例应为“ .highlight”）。合格的选择器不会增加任何价值。

仅在设计基本组​​件的样式时才为HTML元素（例如“ h1”）创建样式，这些样式在整个应用程序中应保持一致。 避免使用诸如“ header ul”之类的广泛选择器，因为无论如何，您可能不得不在某些地方覆盖它们。就像我们一直说的，大多数时候，只要您想使用特定的样式，就希望使用特定的，命名良好的类。

拥抱Block-Element-Modifier的基础知识。您可以在此处阅读有关示例。我们非常轻松地使用了它，但是它仍然在组织CSS样式方面提供了很多帮助。

如我之前所说：进入OOCSS。Sass / Less / Compass极易使用，但直到使用正确的CSS方式为止，Sass / Less / Compass只会使情况变得更糟。

首先，了解有效的CSS。尝试使用Google Page Speed，并阅读Souders关于高效CSS的文章。

然后，输入OOCSS。

• 学习如何使用级联。（毕竟，我们称其为“ 层叠样式表”）。
• 了解如何正确设置粒度（自下而上，而不是自上而下）
• 了解如何分离结构和皮肤（什么是独特的，这些对象有什么变化？）
• 了解如何分隔容器和内容。
• 学会爱网格。

它将彻底改变编写css的每一点。我完全被更新并且喜欢它。

更新：SMACSS与OOCSS相似，但从总体上讲更易于适应。

我的回答是高层的，以解决您在问题中提出的高层问题。可能会有一些低级的组织技巧和调整，可以使其更漂亮，但这些方法都无法解决方法上的缺陷。有几件事会影响CSS爆炸。显然，网站的整体复杂性，还有命名语义，CSS性能，CSS文件组织以及可测试性/可接受性。

您似乎在使用命名语义的道路上走了一条正确的道路，但是可以采取进一步的措施。在站点上重复出现而未进行结构修改的HTML部分（称为“模块”）可以视为选择器根目录，从那里您可以确定相对于该根目录的内部布局的范围。这是面向对象CSS的基本原则，您可以在Yahoo工程师的本次演讲中阅读/观看有关它的更多内容。

重要的是要注意，这种干净的方法可能与性能问题相反，后者倾向于基于id或tag name的短选择器。找到平衡点取决于您，但是除非您拥有庞大的网站，否则这仅是您脑海中的指南，提醒您选择者要简短。 有关性能的更多信息。

最后，您要在整个网站上使用单个CSS文件，还是使用多个文件（用于每个页面或-section文件的单个基本文件）？单个文件的性能更好，但是可能难以理解/与多个团队成员进行维护，并且可能更难以测试。对于测试，我建议您有一个CSS测试页，其中包含每个受支持的CSS模块，以测试碰撞和意外的级联。

或者，您可以采用多种文件方式，将CSS规则的范围限定为页面或部分。这需要浏览器下载多个文件，这是性能问题。您可以使用服务器端编程来动态指定CSS文件并将它们聚合（和最小化）为单个文件。但是，由于这些文件是分开的，并且针对它们的测试也将是分开的，因此您会引入页面/节中外观不一致的可能性。因此测试变得更加困难。

由您来分析客户的特定需求，并相应地平衡这些问题。

I find the difficult thing is translating the required design for a site into a series of rules. If the site’s design is clear and rules-based, then your class names and CSS structure can flow from that. But if people are, over time, randomly adding little bits to the site that don’t make much sense, there’s not a lot you can do about that in the CSS.

I tend to organise my CSS files roughly like this:

1. 根据Eric Meyer的重置CSS 。（因为否则我发现对于大多数元素而言，我至少有一个或两个规则只是在重置默认浏览器样式-例如，我的大多数列表看起来都不像列表的默认HTML样式。）

2. 网格系统CSS（如果站点需要）。（我的基础是960.gs）

3. 在每个页面上显示的组件的样式（页眉，页脚等）

4. 在网站的各个地方使用的组件的样式

5. 仅在个别页面上相关的样式

如您所见，大多数取决于站点的设计。如果设计清晰，有条理，则可以使用CSS。如果没有，那你就被搞砸了。

我可以建议更少的CSS动态框架

它类似于前面提到的SASS。

它有助于维护每个父类的CSS。

例如

 #parent{     
  width: 100%;

    #child1
    {    
     background: #E1E8F2;    
     padding: 5px;    
    }

    #child2
   {
     background: #F1F8E2;
     padding: 15px
   }
 }

它的作用：将宽度：100％应用于＃child1和＃child2。

同样，＃child1特定的CSS属于#parent。

这将导致

#parent #child1
{
 width: 100%;
 background: #E1E8F2;
 padding: 5px;
}

#parent #child2
{
 width: 100%;
 background: #F1F8E2;
 padding: 15px;
}

您还应该了解级联，重量以及它们如何工作。

我注意到您仅使用类标识符（div.title）。您是否知道您也可以使用ID，并且ID的权重比班级高？

例如，

#page1 div.title, #page1 ul, #page1 span {
  // rules
}

将使所有这些元素共享字体大小（例如颜色）或任何规则。您甚至可以使所有属于＃page1后代的DIV获得某些规则。

至于重量，请记住CSS轴从最一般/最轻到最特定/最重。也就是说，在CSS选择器中，元素说明符被类说明符推翻，而ID说明符则被元素说明符推翻。数字很​​重要，因此具有两个元素说明符（ul li）的选择器比仅具有单个说明符（li）的选择器具有更大的权重。

把它想成数字。“ 1”列中的9仍然小于“十”列中的1。具有ID指定符，类指定符和两个元素指定符的选择器比没有ID，500个类指定符和1,000个元素指定符的选择器具有更大的权重。当然，这是一个荒谬的例子，但是您明白了。关键是，应用此概念可帮助您清理大量CSS。

顺便说一句，除非您与其他具有class =“ title”的元素发生冲突，否则不必将元素说明符添加到类（div.title）中。不要添加不必要的重量，因为您以后可能需要使用该重量。

我见过的应对CSS膨胀的最佳方法是使用面向对象的CSS原则。

甚至还有一个非常好的OOCSS框架。

某些思想与上面最佳答案中提到的很多CSS观点背道而驰，但是一旦您知道如何以面向对象的方式进行架构，您就会发现它实际上在保持代码精简和卑鄙的基础上起作用。

这里的关键是识别站点中的“对象”或构建模块模式，并与它们一起设计。

Facebook聘请了OOCSS的创建者Nicole Sullivan，以节省大量前端代码（HTML / CSS）。是的，你可以真正得到节省，不仅在你的CSS，但在你的HTML太多，它通过它的声音，很可能就是你，你提一个转换table基于布局投入了大量div的

另一个很棒的方法在某些方面与OOCSS相似，它是从一开始就计划和编写CSS以便使其具有可伸缩性和模块化。乔纳森· 斯努克（Jonathan Snook）就SMACSS-CSS的可扩展和模块化体系结构做了出色的写作和书籍/电子书

让我为您提供一些链接：
大型CSS的5个错误-（视频）
大型CSS的5个错误-（幻灯片）
CSS膨胀-（幻灯片）

看看1. SASS 2. 指南针

这只是4个示例：

• CSS约定/代码布局模型
• 编写第一个样式表时，我应该遵循哪些CSS标准？
• 整理CSS的最佳方法是什么？
• 最佳做法-CSS样式表格式

在所有4个问题上，我的答案都包括下载和阅读Natalie Downe的PDF CSS Systems的建议。（PDF包含幻灯片中未包含的大量注释，请阅读PDF！）。注意她对组织的建议。

四年后编辑（2014/02/05），我会说：

• 使用CSS预处理器并将文件作为部分文件进行管理（我个人更喜欢Sass和Compass，但是Less也很不错，还有其他功能）
• 阅读有关OOCSS，SMACSS和BEM或getbem的概念。
• 看一下Bootstrap和Zurb Foundation等流行的CSS框架的结构。并且不要打折不太流行的框架- 因纽特人是一个有趣的框架，但还有很多其他框架。
• 在持续集成服务器和/或诸如Grunt或Gulp之类的任务运行器上，通过构建步骤来组合/缩小文件。