我一直在严重依赖 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 文件都会在一段时间后失去控制——尤其是，但不仅限于，在团队中工作时。
以下是我自己试图遵守的规则(并非我总是设法遵守。)
.classname 中定义相同的东西和 .classname:hover . /** Head **/建立一个清晰的结构。 <ul>例如，用于菜单。 body 中的默认字体系列、颜色和大小)并使用 inherit在可能的情况下 !important .不仅因为 IE =< 7 无法处理。在复杂的结构中，使用!important往往很想改变一种无法找到来源的行为，但这对长期维护来说是一种毒药。 建立合理的类(class)
这就是我喜欢构建合理类的方式。
我首先应用全局设置:
body { font-family: .... font-size ... color ... }
a { text-decoration: none; }
然后，我确定页面布局的主要部分——例如顶部区域、菜单、内容和页脚。 如果我编写了好的标记，这些区域将与 HTML 结构相同。
然后，我开始构建 CSS 类，在合理的情况下尽可能多地指定祖先，并尽可能将相关类分组。
div.content ul.table_of_contents
div.content ul.table_of_contents li
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber
把整个 CSS 结构想象成一棵树，离根越远，定义就越具体。您希望保持尽可能少的类(class)数量，并且尽可能少地重复自己。
例如，假设您有三级导航菜单。
这三个菜单看起来不同，但它们也有一些共同点。例如，它们都是
<ul> ，它们都具有相同的字体大小，并且元素都彼此相邻(与 ul 的默认呈现相反)。此外，所有菜单都没有任何要点( list-style-type )。首先，在名为
menu 的类中定义共同特征:div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }
然后，定义三个菜单中每一个的具体特征。级别 1 是 40 像素高；第 2 级和第 3 级，20 个像素。
注:您也可以为此使用多个类，但 Internet Explorer 6 has problems with multiple classes ，所以这个例子使用
id s。div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }
菜单的标记如下所示:
<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>
如果页面上有语义相似的元素——比如这三个菜单——试着先找出共同点并将它们放在一个类中；然后，计算出特定的属性并将它们应用到类，或者，如果您必须支持 Internet Explorer 6，则应用 ID。
杂项 HTML 提示
If you add these semantics to your HTML output, designers can later customize the look of web sites and/or apps using pure CSS, which is a great advantage and time-saver.
<body class='contactpage'>这使得向样式表添加特定于页面的调整变得非常容易:body.contactpage div.container ul.mainmenu li { color: green }
<ul class="mainmenu">
<li class="item_first item_active item_1"> First item </li>
<li class="item_2"> Second item </li>
<li class="item_3"> Third item </li>
<li class="item_last item_4"> Fourth item </li>
</ul>
这样，每个菜单项都可以根据其语义上下文进行样式访问:它是列表中的第一项还是最后一项；是否为当前事件项；并按编号。
Note that this assigning of multiple classes as outlined in the example above does not work properly in IE6. There is a workaround to make IE6 able to deal with multiple classes. If the workaround is not an option, you will have to set the class that is most important to you (item number, active or first/last), or resort to using IDs.
关于css - 管理 CSS 爆炸，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2253110/