原文出处： csswizardry 译文出处：chadluo 欢迎分享原创到伯乐头条 在参与规模庞大、历时漫长且参与人数众多的项目时，所有开发者遵守如下规则极为重要：
为了实现这一目标，我们要采用诸多方法。 本文档第一部分将探讨语法、格式以及分析 CSS 结构；第二部分将围绕方法论、思维框架以及编写与规划 CSS 的态度。 CSS 文档分析无论编写什么文档，我们都应当尽力维持统一的风格，包括统一的注释、统一的语法与统一的命名规范。 总则尽量将行宽控制在 80 字节以下。渐变（gradient）相关的语法以及注释中的 URL 等可以算作例外，毕竟这部分我们也无能为力。 我倾向于用 4 个空格而非 Tab 缩进，并且将声明拆分成多行。 单一文件与多文件有人喜欢在一份文件文件中编写所有的内容，而我在迁移至 Sass 之后开始将样式拆分成多个小文件。这都是很好的做法。无论你选择哪种，下文的规则都将适用，而且如果你遵守这些规则的话你也不会遇到什么问题。这两种写法的区别仅仅在于目录以及区块标题。 目录在 CSS 的开头，我会写一份目录，例如：
这份目录可以告诉其他开发者这个文件中具体含有哪些内容。这份目录中的每一项都与其对应的区块标题相同。 如果你在维护一份单文件 CSS，对应的区块将也在同一文件中。如果你是在编写一组小文件，那么目录中的每一项应当对应相应的 @include 语句。 区块标题目录应当对应区块的标题。请看如下示例：
区块标题前缀 如果你在维护一份大文件，那么在区块之间空 5 行，如下：
在大文件中快速翻动时这些大块的空档有助于区分区块。 如果你在维护多份、以 @include 连接的 CSS 的话，在每份文件头加上标题即可，不必这样空行。 代码顺序尽量按照特定顺序编写规则，这将确保你充分发挥 CSS 缩写中第一个 C 的意义：cascade，层叠。 一份规划良好的 CSS 应当按照如下排列：
如此一来，当你依次编写 CSS 时，每个区块都可以自动继承在它之前区块的属性。这样就可以减少代码相互抵消的部分，减少某些特殊的问题，组成更理想的 CSS 结构。 关于这方面的更多信息，强烈推荐 Jonathan Snook 的 SMACSS。 CSS 规则集分析
编写 CSS 样式时，我习惯遵守这些规则：
例如：
我们可以发现， 我们还可以发现 以下是一个没有拆分成多行的例子：
在这个例子（来自inuit.css’s table grid system）中，将 CSS 放在一行内可以使得代码更紧凑。 命名规范一般情况下我都是以连字符（-）连接 class 的名字（例如 BEM 命名法可以使得选择器更规范，更清晰，更具语义。 该命名法按照如下格式：
其中：
打个比方：
这个例子中我们描述的基本元素是一个人，然后这个人可能是一个女人。我们还知道人拥有手，这些是人体的一部分，而手也有不同的状态，如同左手与右手。 这样我们就可以根据亲元素来划定选择器的命名空间并传达该选择器的职能，这个选择器是一个子元素（ 由此， BEM 命名法虽然不太好看，而且相当冗长，但是它使得我们可以通过名称快速获知元素的功能和元素之间的关系。与此同时，BEM 语法中的重复部分非常有利于 gzip 的压缩算法。 无论你是否使用 BEM 命名法，你都应当确保 class 命名得当，力保一字不多、一字不少；将元素命名抽象化以提高复用性（例如 HTML 中的 class为了确保易读性，在 HTML 标记中用两个空格隔开 class 名，例如：
增加的空格应当可以使得在使用多个 class 时更易阅读与定位。 JavaScript 钩子千万不要把 CSS 样式用作 JavaScript 钩子。把 JS 行为与样式混在一起将无法对其分别处理。 如果你要把 JS 和某些标记绑定起来的话，写一个 JS 专用的 class。简单地说就是划定一个前缀
上面的这个标记有两个 class，你可以用其中一个来给这个可排序的表格栏添加样式，用另一个添加排序功能。 I18n虽然我（该 CSS Guideline 文档原作者 Harry Roberts）是个英国人，而且我一向拼写 colour 而非 color，但是为了追求统一，我认为在 CSS 中用美式拼法更佳。CSS 以及其它多数语言都是以美式拼法编写，所以如果在
但是我最近参与了一份规模庞大的 Sass 项目，这个项目中有许多的颜色变量（例如 所以为了统一，把所有的 class 与变量都以你参与的项目的惯用拼法命名即可。 注释我使用行宽不超过 80 字节的块状注释：
在注释中应当尽量详细描述代码，因为对你来说清晰易懂的内容对其他人可能并非如此。每写一部分代码就要专门写注释以详解。 注释的拓展用法注释有许多很先进的用法，例如：
准修饰选择器你应当避免过分修饰选择器，例如如果你能写 不过有时你可能希望告诉其他开发者 class 的使用范围。以 我们可以在选择器前加上准修饰（即将前面的类型选择器注释掉）来描述我们规划的 class 作用范围：
这样我们就能准确获知该 class 的作用范围而不会影响复用性。 其它例子如：
这样我们就能在不影响代码私有度的前提下获知 class 作用范围。 代码标签如果你写了一个新规则的话，可以在它上面加上标签，例如：
这些标签可以使得其他开发者快速找到相关代码。如果一个开发者需要查找和列表相关的部分，他只要搜索 继承标记将面向对象的思路用于 CSS 编写的话，你经常能找到两部分 CSS 密切相关（其一为基础，其一为拓展）却分列两处。我们可以用继承标记来在原元素和继承元素之间建立紧密联系。这些在注释中的写法如下： 在元素的基本样式中：
在元素的拓展样式中：
这样一来我们就能在两块相隔很远的代码间建立紧密联系。 编写 CSS之前的章节主要探讨如何规划 CSS，这些都是易于量化的规则。本章将探讨更理论化的东西，也将探讨我们的态度与方法。 编写新组件编写新组件时，要在着手处理 CSS 之前写好 HTML 部分。这可以令你准确判断哪些 CSS 属性可以继承，避免重复浪费。 先写标记的话，你就可以关注数据、内容与语义，在这之后再添加需要的 class 和 CSS 样式。 面向对象 CSS我以面向对象 CSS 的方式写代码。我把组件分成结构（对象）与外观（拓展）。正如以下分析：
我们在屋子里有许多房间，它们都有共同的部分：它们都包含地板、天花板、墙壁和门。这些共享的部分我们可以放到一个抽象的 所以比起编写大量的特殊模块，应当努力找出这些模块中重复的设计模式并将其抽象出来，写成一个可以复用的 class，将其用作基础然后编写其它拓展模块的特殊情形。 当你要编写一个新组件时，将其拆分成结构和外观。编写结构部分时用最通用 class 以保证复用性，编写外观时用更具体的 class 来添加设计方法。 布局所有组件都不要声明宽度，而由其亲元素或格栅系统来决定。 坚决不要声明高度。高度应当仅仅用于尺寸已经固定的东西，例如图片和 CSS Sprite。在 格栅系统应当当作书架来理解。是它们容纳内容，而不是把它们本身当成内容装起来，正如你先搭起书架再把东西放进去。比起声明它们的尺寸，把格栅系统和元素的其它属性分来开处理更有助于布局，也使得我们的前端工作更高效。 你在格栅系统上不应当添加任何样式，他们仅仅是为布局而用。在格栅系统内部再添加样式。在格栅系统中任何情况下都不要添加盒模型相关属性。 UI 尺寸我用很多方法设定 UI 尺寸，包括百分比， 理想情况下，格栅系统应当用百分比设定。如上所述，因为我用格栅系统来固定栏宽和页宽，所以我可以不用理会元素的尺寸。 我用 rem 定义字号，并且辅以 px 以兼容旧浏览器。这可以兼具 em 和 px 的优势。下面是一个非常漂亮的 Sass Mixin，假设你在别处声明了基本字号（base-font-size）的话，用它就可以生成 rem 以及兼容旧浏览器的 px。
我只在已经固定尺寸的元素上使用 px，包括图片以及尺寸已经用 px 固定的 CSS Sprite。 字号我会定义一些与格栅系统原理类似的 class 来声明字号。这些 class 可以用于双重标题分级，关于这点请阅读Pragmatic, practical font-sizing in CSS。 简写CSS 简写应当谨慎使用。 编写像 类似的，像 反过来，你需要声明的属性也要写清楚，不要因为简写而波及其它属性。例如如果你只想改掉底部的 简写虽然是好东西，但是注意切勿滥用。 ID在我们开始处理选择器之前，牢记这句话： 在 CSS 里坚决不要用 ID。 在 HTML 里 ID 可以用于 JS 以及锚点定位，但是在 CSS 里只要用 class，一个 ID 也不要用。 Class 的优势在于复用性，而且私有度也并不高。私有度非常容易导致问题，所以将其降低就尤为重要。ID 的私有度是 class 的 255 倍，所以在 CSS 中坚决不要使用。 选择器务必保持选择器简短高效。 通过页面元素位置而定位的选择器并不理想。例如 结构复杂的选择器将会影响性能。选择器结构越复杂（如 尽量使得样式不依赖于其定位，尽量保持选择器简洁清晰。 作为一个整体，选择器应当尽量简短（例如只有一层结构），但是 class 名则不应当过于简略，例如 牢记：class 无所谓是否语义化；应当关注它们是否合理。不要强调 class 名要符合语义，而要注重使用合理且不会过时的名称。 过度修饰的选择器由前文所述，过度修饰的选择器并不理想。 过度修饰的选择器是指像 再举一个修饰过度的选择器例子， 选择器性能虽然浏览器性能日渐提升，渲染 CSS 速度越来越快，但是你还是应当关注效率。使用间断、没有嵌套的选择器，不把全局选择器（ 译注，核心选择器：浏览器解析选择器为从右向左的顺序，最右端的元素是样式生效的元素，是为核心选择器。 使用 CSS 选择器的目的比起努力运用选择器定位到某元素，更好的办法是直接给你想要添加样式的元素直接添加一个 class。我们以 假定这个 你的选择器必须符合你要给这个元素添加样式的原因。思考一下，「我定位到这个元素，是因为它是 确保你的核心选择器不是类型选择器，也不是高级对象或抽象选择器。例如你在我们的 CSS 中肯定找不到诸如 表达清晰：直接找到你要添加样式的元素，而非其亲元素。不要想当然地认为 HTML 不会改变。用 CSS 直接命中你需要的元素，而非投机取巧。 完整内容请参考我的文章 Shoot to kill; CSS selector intent
|
1 2 3 4 | .header{}.header .site-nav{}.header .site-nav li{}.header .site-nav li a{} |
这样的写法在普通 CSS 里完全用不到。以下为不好的 Sass 写法：
1 2 3 4 5 6 7 | .header{ .site-nav{ li{ a{} } }} |
如果你用 Sass 的话，尽量这么写：
1 2 3 4 5 | .header{}.site-nav{ li{} a{}} |
