不要在 CSS 中写标题
只需将部分拆分为文件。任何 CSS 注释，都应该是注释。
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
使用脚本将它们组合成一个；如有必要。您甚至可以拥有一个不错的目录结构，并且只需让您的脚本递归地扫描.css文件。
如果你必须写标题，在文件的开头有一个目录
TOC 中的标题应该与您稍后编写的标题完全一致。搜索标题很痛苦。更糟糕的是，有人想知道您在第一个标题之后还有另一个标题吗？附言。编写 TOC 时不要在每行的开头添加类似 doc 的 *（星号），它只会让选择文本更烦人。
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
在规则内或规则内写评论，而不是在块外
首先，当您编辑脚本时，您有 50/50 的机会会注意规则块之外的内容（特别是如果它是一大堆文本；））。其次，（几乎）没有情况需要您在外面发表“评论”。如果它在外面，99% 的时间都是一个标题，所以保持这样。
将页面拆分为组件
大多数时候组件应该有position:relative, nopadding和 no 。margin这大大简化了 % 规则，并允许更简单absolute:position的元素 'ing，因为如果存在绝对定位容器，则绝对定位元素将在计算top, right, bottom,left属性时使用该容器。
HTML5 文档中的大多数 DIV 通常是一个组件。
组件也是页面上可以被视为独立单元的东西。用外行的话来说，如果将某物视为黑盒是有意义的，则将某物视为一个组件。
再次使用 QA 页面示例：
#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/classes 时，避免使用 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属性是一种特殊属性，仅在应用于 a 时才有意义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 就像吃饭，有时你会留下一团糟。确保你清理了那些乱七八糟的东西，否则垃圾代码就会堆积起来。删除您不使用的类/ID。删除您不使用的 CSS 规则。确保一切都很好，并且您没有冲突或重复的规则。
如果您按照我的建议将某些容器视为您的风格中的黑盒（组件），在选择器中使用这些组件，并将所有内容保存在一个专用文件中（或使用 TOC 和标题正确拆分文件），那么您的工作要容易得多...
您可以使用诸如 firefox 扩展 Dust-Me Selectors 之类的工具（提示：将其指向您的 sitemap.xml）来帮助您找到隐藏在您的 css 核武器和 carnies 中的一些垃圾。
保留一个unsorted.css文件
假设您正在设计一个 QA 站点，并且您已经有一个“答案页面”的样式表，我们将其称为answers.css. 如果您现在需要添加很多新的 CSS，请将其添加到unsorted.css样式表中，然后重构到您的answers.css样式表中。
造成这种情况的几个原因：
- 完成后重构更快，然后是搜索规则（可能不存在）并注入代码
- 您将编写将要删除的内容，注入代码只会使删除该代码变得更加困难
- 附加到原始文件很容易导致规则/选择器重复