不要在CSS中写标题
只需将部分拆分为文件。任何CSS注释都应该是注释。
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
使用脚本将它们组合为一个；如有必要。您甚至还可以拥有一个不错的目录结构，只需让您的脚本以递归方式扫描.css文件即可。
如果必须写标题，请在文件开头添加目录
TOC中的标题应与您稍后编写的标题完全相同。搜索标题很痛苦。更麻烦的是，有人究竟想知道您在第一个标头之后还有另一个标头吗？ps。编写TOC时，不要在每行的开头添加类似doc的*（星号），这只会使选择文本更加麻烦。
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
在规则内或规则内（而不是在块外）编写注释
首先，当您编辑脚本时，您有50/50的机会会注意规则块之外的内容（尤其是在一大堆文本中）；）。其次，（几乎）在任何情况下，您都不需要外部“评论”。如果它在外面，则是99％的时间是标题，因此应保持该标题不变。
将页面拆分为组件
大多数情况下position:relative，组件应具有no padding和no margin。这简化％原则很多，以及允许更简单的absolute:position“荷兰国际集团的元素，因为如果有一个绝对定位的容器绝对定位的元素将计算时所使用的容器top，right，bottom，left的属性。
HTML5文档中的大多数DIV通常是一个组件。
组件也是可以视为页面上的独立单元的东西。用外行的话来说，如果把像黑匣子这样的东西当作有意义的东西对待就好了。
再次使用“质量检查”页面示例：
#navigation
#question
#answers
#answers .answer
etc.
通过将页面拆分为组件，您可以将工作拆分为可管理的单元。
将具有累积效果的规则放在同一行上。
例如border，margin和padding（但不是outline全部）会增加您要设置样式的元素的尺寸和大小。
position: absolute; top: 10px; right: 10px;
如果它们在一行上不那么可读，则至少将它们靠近：
padding: 10px; margin: 20px;
border: 1px solid black;
尽可能使用速记：
/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;
切勿重复选择器
如果您有更多相同选择器的实例，那么您很有可能最终会遇到相同规则的多个实例。例如：
#some .selector {
margin: 0;
font-size: 11px;
}
...
#some .selector {
border: 1px solid #000;
margin: 0;
}
当您可以使用ID /类时，避免使用TAG作为选择器
首先，DIV和SPAN标签是个例外：永远不要使用它们！;）仅使用它们附加一个类/ ID。
这个...
div#answers div.answer table.statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
outline: 3px solid #000;
}
应该这样写：
#answers .answer .statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
因为那里有多余的悬挂DIV，所以对选择器没有任何作用。它们还会强制执行不必要的标签规则。如果你要改变，例如，.answer从一个div到article你的风格将打破。
或者，如果您希望更清晰：
#answers .answer .statistics {
color: pink;
border: 1px solid #000;
}
#answers .answer table.statistics {
border-collapse: collapsed;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
原因是该border-collapse属性是一个特殊属性，仅当应用于时才有意义table。如果.statistics不是table，则不适用。
通用规则是邪恶的！
- 如果可以，请避免编写通用/魔术规则
- 除非用于CSS重置/取消重置，否则所有通用魔术都应至少应用于一个根组件
它们没有节省您的时间，却使您的头部爆炸。并使维护成为一场噩梦。当您编写规则时，您可能会知道它们的适用位置，但这并不能保证您的规则以后不会惹您。
加上这些通用规则，即使您对文档的样式有所了解，也难以理解且难以理解。这并不是说您不应该编写通用规则，除非您真正打算使它们通用，否则不要使用它们，甚至它们会向选择器中添加尽可能多的作用域信息。
像这样的东西
.badges {
width: 100%;
white-space: nowrap;
}
address {
padding: 5px 10px;
border: 1px solid #ccc;
}
...具有与在编程语言中使用全局变量相同的问题。您需要给他们范围！
#question .userinfo .badges {
width: 100%;
white-space: nowrap;
}
#answers .answer .userinfo address {
padding: 5px 10px;
border: 1px solid #ccc;
}
基本上是这样的：
components target
---------------------------- --------
#answers .answer .userinfo address
-------- --------- --------- --------
domain component component selector
每当我知道的组件是页面上的单个组件时，我都喜欢使用ID。您的需求可能有所不同。
注意：理想情况下，您应该编写足够的内容。与提及较少的组件相比，在选择器中提及更多的组件是更宽容的错误。
假设您有一个pagination组件。您可以在网站的许多地方使用它。这将是编写通用规则时的一个很好的例子。假设您display:block为各个页码链接设置了深灰色背景。为了使它们可见，您必须具有以下规则：
.pagination .pagelist a {
color: #fff;
}
现在假设您使用分页获取答案列表，则可能会遇到类似这样的情况
#answers .header a {
color: #000;
}
...
.pagination .pagelist a {
color: #fff;
}
这会使您的白色链接变黑，这是您不需要的。
解决该问题的不正确方法是：
.pagination .pagelist a {
color: #fff !important;
}
解决该问题的正确方法是：
#answers .header .pagination .pagelist a {
color: #fff;
}
复杂的“逻辑”注释不起作用:)
如果您写这样的东西：“此值取决于blah-blah加上blah-blah的高度”，那么不可避免的是您会犯错，并且它们都会像纸牌屋一样掉下来。
保持您的评论简单；如果需要“逻辑运算”，请考虑使用CSS模板语言之一，例如SASS或LESS。
我该如何写一个彩色托盘？
最后结束。为您的整个彩色托盘准备一个文件。没有此文件，您的样式在规则中仍应具有一些可用的调色板。您的颜色托盘应覆盖。您可以使用非常高级的父级组件（例如#page）来链接选择器，然后将样式编写为自足的规则块。它可以只是颜色或更多。
例如。
#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
color: #222; background: #fff;
border-radius: 10px;
padding: 1em;
}
这个想法很简单，您的调色板是独立于基本样式的样式表，您可以将其层叠成样式。
更少的名称，需要更少的内存，使代码更易于阅读
使用较少的名称更好。理想情况下，使用非常简单（且简短！）的单词：文本，正文，标题。
我还发现，简单单词的组合比较容易理解，然后加上一长串“适当的”单词：postbody，posthead，userinfo等。
即使某些陌生人进来阅读您的风格汤（像几周后；就像您自己一样；）），也应使词汇量保持较小，只需要了解用词的位置而不是使用每个选择器的位置。例如，.this每当一个元素被认为是“所选项目”或“当前项目”等时，我就使用。
自己清理一下
编写CSS就像吃东西，有时会留下一团糟。确保清理混乱，否则垃圾代码将堆积。删除不使用的类/标识。删除不使用的CSS规则。确保一切都很好，并且您没有冲突或重复的规则。
如果您按照我的建议将某些容器视为样式中的黑盒（组件），在选择器中使用了这些组件，并将所有内容保存在一个专用文件中（或使用TOC和标头正确分割了一个文件），那么您的工作实质上更容易...
您可以使用诸如firefox扩展名Dust-Me Selectors（提示：将其指向您的sitemap.xml）之类的工具来帮助您找到一些隐藏在CSS核武器和狂欢者中的垃圾。
保留unsorted.css档案
假设您正在对质量检查网站进行样式设置，并且已经有了“答案页面”的样式表，我们将其称为answers.css。如果现在需要添加很多新的CSS，请将其添加到unsorted.css样式表中，然后将其重构到answers.css样式表中。
原因如下：
- 完成后重构的速度更快，然后就是搜索规则（可能不存在）并注入代码
- 您将编写要删除的内容，注入代码只会使删除该代码更加困难
- 附加到原始文件很容易导致规则/选择器重复
simplicity，complexity，maintenance，structure和refactoring。