我一直严重依赖CSS的一个网站，我正在工作。现在，所有的CSS样式都是在每个标签的基础上应用的，所以现在我试图将它移动到更多的外部样式，以帮助任何未来的变化。
但现在的问题是，我已经注意到我得到了一个“CSS爆炸”。我很难决定如何在CSS文件中最好地组织和抽象数据。
我在网站中使用了大量的div标签，从一个基于表格的网站。我得到了很多这样的CSS选择器:
div.title {
background-color: blue;
color: white;
text-align: center;
}
div.footer {
/* Styles Here */
}
div.body {
/* Styles Here */
}
/* And many more */
这还不算太糟，但由于我是初学者，我想知道是否可以就如何最好地组织CSS文件的各个部分提出建议。我不想在我的网站上的每个元素都有一个单独的CSS属性，我总是希望CSS文件是相当直观和易于阅读的。
我的最终目标是使它易于使用CSS文件，并证明他们的力量，以提高web开发的速度。这样，将来可能在这个网站上工作的其他人也将开始使用良好的编码实践，而不必像我一样学习。
我的回答是高水平的，针对你刚才提到的高水平的关切。也许你可以通过一些低级的组织技巧和调整来使它更漂亮，但这些都不能解决方法上的缺陷。有几个因素会影响CSS的爆炸。显然是网站的整体复杂性，但还有像命名语义、CSS性能、CSS文件组织和可测试性/可接受性等问题。
在命名语义方面，您似乎走在了正确的道路上，但还可以更进一步。重复出现在站点上而没有进行结构修改的HTML部分(称为“模块”)可以被视为选择器根，从那里您可以相对于根确定内部布局的范围。这是面向对象的CSS的基本原则，您可以在Yahoo工程师的演讲中阅读/观看更多关于它的内容。
需要注意的是，这种干净的方法可能与性能问题相反，它倾向于基于id或标记名的短选择器。找到平衡取决于你，但除非你有一个庞大的网站，这应该只是一个指南在你的脑后提醒你保持你的选择器简短。这里有更多关于性能的信息。
最后，您将为整个网站使用一个CSS文件，还是多个文件(单个基本文件用于每个页面或-section文件)?单个文件对于性能来说更好，但是对于多个团队成员来说可能更难理解/维护，并且可能更难测试。对于测试，我建议您使用一个CSS测试页面，其中包含所有受支持的CSS模块，以测试冲突和意外级联。
或者，您也可以采用多文件方法，将CSS规则作用于一个页面或一个部分。这需要浏览器下载多个文件，这是一个性能问题。您可以使用服务器端编程动态地指定和聚合(并缩小)CSS文件到单个文件中。但是，由于这些文件是分开的，对它们的测试也是分开的，因此可能会在页面/部分之间引入不一致的外观。因此测试变得更加困难。
由你来分析客户的具体需求，并相应地平衡这些问题。
以下是4个例子:
CSS约定/代码布局模型
在编写我的第一个样式表时，我应该遵循哪些CSS标准?
整理CSS的最佳方法是什么?
最佳实践- CSS样式表格式
在所有4个问题上，我的回答都包含了下载并阅读Natalie Downe的PDF CSS系统的建议。(PDF包含了大量幻灯片上没有的注释，所以请阅读PDF!)注意她对组织的建议。
四年后，我想说:
Use a CSS pre-processor and manage your files as partials (I personally prefer Sass with Compass, but Less is quite good as well and there are others)
Read up on concepts like OOCSS, SMACSS, and BEM or getbem.
Take a look at how popular CSS frameworks like Bootstrap and Zurb Foundation are structured. And don't discount less popular frameworks - Inuit is an interesting one but there are plenty others.
Combine/minify your files with a build step on a continuous integration server and/or a task runner like Grunt or Gulp.
就像我之前说的:进入OOCSS。Sass/Less/Compass使用起来很诱人，但在正确使用CSS之前，Sass/Less/Compass只会让事情变得更糟。
首先，阅读高效css。尝试谷歌页面速度和阅读Souders关于高效css的文章。
然后进入OOCSS。
学会使用级联。(毕竟，我们称之为级联样式表)。
学习如何获得正确的粒度(自底向上而不是自顶向下)
学习如何分离结构和皮肤(什么是唯一的，这些对象的变化是什么?)
学习如何分离容器和内容。
学会爱上网格。
它将彻底改变css的每一个细节。我完全焕然一新，爱上了它。
更新:SMACSS类似于OOCSS，但一般来说更容易适应。
我可以建议少CSS动态框架吗
它类似于前面提到的SASS。
它帮助维护每个父类的CSS。
E.g.
#parent{
width: 100%;
#child1
{
background: #E1E8F2;
padding: 5px;
}
#child2
{
background: #F1F8E2;
padding: 15px
}
}
它的作用:
将width:100%应用于#child1和#child2。
此外，#child1特定的CSS属于#parent。
这将导致
#parent #child1
{
width: 100%;
background: #E1E8F2;
padding: 5px;
}
#parent #child2
{
width: 100%;
background: #F1F8E2;
padding: 15px;
}
我所见过的对抗CSS膨胀的最好方法是使用面向对象的CSS原则。
甚至还有一个非常好的OOCSS框架。
一些意识形态与上面的答案相悖，但一旦你知道如何以面向对象的方式构建CSS，你就会发现它实际上有助于保持代码的精简和平均。
这里的关键是在你的网站中识别“对象”或构建块模式，并使用它们进行架构。
Facebook聘请了OOCSS的创建者Nicole Sullivan，以节省大量的前端代码(HTML / CSS)。是的，你实际上可以得到节省，不仅在你的CSS，但在你的HTML太，这是由它的声音，是非常有可能为你，因为你提到转换一个基于表格的布局到很多div的
另一个很好的方法在某些方面与OOCSS类似，就是从一开始就计划和编写可伸缩和模块化的CSS。Jonathan Snook写了一本关于SMACSS的书/电子书——CSS的可伸缩和模块化架构
让我给你介绍一些链接:
海量CSS的5个错误-(视频)
海量CSS的5个错误(幻灯片)
CSS膨胀-(幻灯片)
我发现最难的事情是将网站所需的设计转化为一系列规则。如果站点的设计清晰且基于规则，那么你的类名和CSS结构就可以由此而来。但是，如果人们随着时间的推移，随机地在网站上添加一些没有多大意义的内容，那么在CSS中就没有太多办法了。
我倾向于这样组织我的CSS文件:
CSS reset, based on Eric Meyer’s. (Because otherwise I find that, for most elements, I’ve got at least one or two rules that are just resetting default browser styles — most of my lists don’t look like the default HTML style for lists, for example.)
Grid system CSS, if the site calls for it. (I base mine on 960.gs)
Styles for components that appear on every page (headers, footers, etc)
Styles for components that are used in various places across the site
Styles that are only relevant on individual pages
如你所见，这主要取决于网站的设计。如果设计清晰有条理，你的CSS也可以做到。如果不是，你就完蛋了。
