Class命名

• class 名称中只能出现小写字符和连字符(-)，例如 .btn 和 .btn-danger。
• class 名称应当尽可能短，并且意义明确。但避免过度任意的简写，.btn 代表 button，但是 .b 不能表达任何意思，只能代表个B
• 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
• 基于最近的父 class 或基本（base） class 作为新 class 的前缀。
• 使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。
• 使用 .ui-* class 来做通用UI模块样式声明

选择器

• 对于通用元素使用 class ，这样利于渲染性能的优化。
• 对于经常出现的组件，避免使用属性选择器（例如，[class^=”…”]）。浏览器的性能会受到这些因素的影响。
• 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
• 不采用 class=”btn btn-disabled”，推荐使用 class=”btn disabled” 写法
• 只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 — 前缀类似于命名空间）。

扩展阅读：

• Scope CSS classes with prefixes
• Stop the cascade

代码组织

• 以组件为单位组织代码段。
• 制定一致的注释规范。
• 使用一致的空白符将代码分隔成块，这样利于扫描较大的文档。
• 如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动。

注释规范