我一直很是依赖CSS来开发我正在工做的网站。 如今，全部CSS样式都在每一个标记的基础上应用，所以如今我尝试将其移至更多外部样式中，以帮助未来进行任何更改。 css
可是如今的问题是，我注意到我遇到了“ CSS爆炸”。 对我来讲，决定如何最好地组织和抽象CSS文件中的数据变得愈来愈困难。 web
我正在网站中使用大量的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文件至关直观且易于阅读。 bootstrap
个人最终目标是简化CSS文件的使用并展现其强大功能以提升Web开发速度。 这样，未来可能在此站点上工做的其余我的也将参与使用良好编码实践的实践，而没必要像我之前那样去实践。 浏览器
这里有一些很棒的材料，有些花了一些时间来回答这个问题，可是当涉及到单独的样式表或单独的样式表时，我将使用单独的文件进行开发，而后将全部用于站点的通用css合并到一块儿部署时将其合并为一个文件。 服务器
这样，您就能够兼得一箭双鵰，提升了性能（减小了从浏览器请求的HTTP请求），而且在开发时分离了代码问题。 框架
不少时候，我会看到我的将文件分红几部分，并在各部分之间添加标题注释。 编程语言
就像是 ide
/* Headings and General Text */ .... stuff here for H1, etc.. /* Main page layout */ .... stuff here for layout page setup etc.
它工做得很好，能够很容易地稍后返回并找到您正在处理的内容。 工具
这个问题问得好。 在我所看到的任何地方，CSS文件都会在一段时间后变得失控-特别是（但不只限于）团队合做时。
如下是我本人想要遵照的规则（并不是我老是设法作到）。
尽早重构，常常重构。 常常清理CSS文件，将同一类的多个定义融合在一块儿。 当即删除过期的定义。
在修复错误期间添加CSS时，请留意更改的内容（“这是为了确保该框在IE <7中保持对齐”）
避免冗余，例如，在.classname和.classname:hover定义相同的内容。
使用注释/** Head **/创建清晰的结构。
使用有助于保持风格不变的修饰工具。 我使用Polystyle ，我很高兴（售价15美圆，但花得很值）。 也有免费的工具（例如，基于CSS Tidy的 Code Beautifier ，这是一个开放源代码工具）。
创建明智的课程。 请参阅下面的一些注意事项。
使用语义，避免DIV汤-例如，对菜单使用<ul> 。
在尽量低的级别上定义全部内容（例如，默认字体系列， body中的颜色和大小），并在可能的状况下使用inherit
若是您有很是复杂的CSS，则CSS预编译器可能会有所帮助。 我正计划出于一样的缘由研究xCSS 。 周围还有其余几个。
若是是团队合做，请同时强调CSS文件的质量和标准。 每一个人都很是重视其编程语言的编码标准，可是不多有人意识到这对于CSS也是必要的。
若是是团队合做， 请考虑使用版本控制。 它使事情更容易跟踪，而编辑冲突也更容易解决。 即便您只是“简单”地学习HTML和CSS，这也确实值得。
不要与!important 。 不只由于IE = <7没法处理它。 在复杂的结构中， !important的使用一般很容易改变没法找到源的行为，但这对于长期维护来讲是有毒的。
创建明智的班级
这就是我喜欢创建明智的班级的方式。
我首先应用全局设置：
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结构视为一棵具备愈来愈具体定义的树 ，离您的根越远。 您但愿将类的数量保持在尽量低的水平，而且但愿不多重复。
例如，假设您具备三个级别的导航菜单。 这三个菜单看起来不一样，可是它们也具备某些特征。 例如，它们都是<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的多个类存在问题 ，所以本示例使用id 。
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技巧
若是将这些语义添加到HTML输出中，则设计人员之后可使用纯CSS自定义网站和/或应用程序的外观，这是一个很大的优点，能够节省时间。
若是可能的话，给每一个页面的主体一个惟一的类： <body class='contactpage'>这样能够很容易地将特定于页面的调整添加到样式表中：
body.contactpage div.container ul.mainmenu li { color: green }自动构建菜单时，请添加尽量多的CSS上下文，以便之后进行普遍的样式设置。 例如：
<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>
这样，每一个菜单项均可以根据其语义上下文进行样式设置：不管是列表中的第一项仍是最后一项； 是否为当前活动项目； 和数字。
请注意 ，上面示例中概述的这种分配多个类在IE6中没法正常工做 。 有一种解决方法可使IE6可以处理多个类。 若是没有解决方法，则必须设置对您来讲最重要的类（项目编号，使用中的或第一个/最后一个），或者使用ID。
我发现困难的是将网站所需的设计转换为一系列规则。 若是站点的设计清晰且基于规则，那么您的类名和CSS结构就能够从中获得。 可是，若是人们随着时间的推移在站点中随机添加一些没有多大意义的内容，那么CSS中您将无能为力。
我倾向于这样组织个人CSS文件：
CSS重置，基于Eric Meyer的 。 （由于不然我发现，对于大多数元素，我至少有一个或两个规则只是在重置默认浏览器样式-例如，个人大多数列表看起来都不像列表的默认HTML样式。）
网格系统CSS（若是站点须要）。 （个人基础是960.gs ）
在每一个页面上显示的组件的样式（页眉，页脚等）
在网站的各个地方使用的组件的样式
仅在个别页面上相关的样式
如您所见，大部分取决于站点的设计。 若是设计清晰，有条理，则可使用CSS。 若是没有，那你就被搞砸了。
这只是4个示例：
在全部4个问题上，个人答案都包括下载和阅读Natalie Downe的PDF CSS Systems的建议 。 （PDF包含大量不在幻灯片中的注释，所以请阅读PDF！）。 注意她对组织的建议。
四年后编辑（2014/02/05） ，我会说：