这个问题问得好。在我所看到的所有地方，CSS文件都会在一段时间后失去控制，尤其是（但不仅限于）团队合作时。
以下是我本人想要遵守的规则（并非我总是设法做到）。
尽早重构，经常重构。 经常清理CSS文件，将同一类的多个定义融合在一起。 立即 删除过时的定义。
在修复错误期间添加CSS时，请留意更改的内容（“这是为了确保该框在IE <7中保持对齐”）
避免冗余，例如在
.classname
和中定义相同的内容.classname:hover
。使用注释
来构建清晰的结构。使用有助于保持风格不变的修饰工具。我使用 Polystyle ，我很高兴（售价15美元，但花得很值）。也有免费的工具（例如，基于 CSS Tidy的 Code Beautifier ，这是一个开放源代码工具）。 ****
建立明智的课程。请参阅下面的一些注意事项。
使用语义，避免DIV汤-
<ul>
例如，将s用于菜单。在尽可能低的级别上定义所有内容（例如，中的默认字体系列，颜色和大小
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 h1div.content ul.table_of_contents li h2div.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" ><li> ...... </li></ul><ul id="level2" ><li> ...... </li></ul><ul id="level3" ><li> ...... </li></ul>
如果您在页面上具有语义上相似的元素（例如这三个菜单），请尝试先计算出共同点，然后将它们放入类中；然后，计算出特定的属性并将其应用于类，或者，如果必须支持Internet
Explorer 6，则将其应用于ID。
其他HTML技巧
如果将这些语义添加到HTML输出中，设计人员以后可以使用纯CSS自定义网站和/或应用程序的外观，这是一个很大的优势，可以节省时间。
如果可能的话，给每个页面的主体一个唯一的类：
<body >
这使得在样式表中添加特定于页面的调整非常容易：body.contactpage div.container ul.mainmenu li { color: green }自动构建菜单时，请添加尽可能多的CSS上下文，以便以后进行广泛的样式设置。例如：
<ul >
- First item
- Second item
- Third item
- Fourth item
