在参与规模庞大, 历时漫长且参与人数众多的项目时, 所有开发者遵守如下规则极为重要:
保持 CSS 易于维护
保持代码清晰易懂
保持 CSS 的可拓展性
为了实现这一目标, 我们要采用诸多方法.
本文将探讨语法, 格式以及分析 CSS 结构; 第二部分将围绕方法论, 思维框架以及编写与规划 CSS 的看法.
CSS 文档分析
无论编写什么文档, 我们都应当维持统一的风格, 包括统一的注释, 统一的语法与统一的命名规范.
总则
将行宽控制在 80 字节以下. 渐变 (gradient) 相关的语法以及注释中的 URL 等可以算作例外, 毕竟这部分我们也无能为力.
我倾向于用 4 个空格而非 Tab 缩进, 并且将声明拆分成多行.
单一文件与多文件
有人喜欢在一份文件文件中编写所有的内容, 而我在迁移至 Sass 之后开始将样式拆分成多个小文件. 这都是很好的做法. 无论你选择哪种, 下文的规则都将适用, 而且如果你遵守这些规则的话你也不会遇到什么问题. 这两种写法的区别仅仅在于目录以及区块标题
代码顺序
尽量按照特定顺序编写规则, 这将确保你充分发挥 CSS 中第一个 C 的意义: cascade, 层叠.
一份规划良好的 CSS 应当按照如下排列:
Reset 万物之根源
元素类型 没有 class 的 h1,ul 等
对象以及抽象内容 最一般, 最基础的设计模式
子元素 由对象延伸出来的所有拓展及其子元素
修补 针对异常状态
如此一来, 当你依次编写 CSS 时, 每个区块都可以自动继承在它之前区块的属性. 这样就可以减少代码相互抵消的部分, 减少某些特殊的问题, 组成更理想的 CSS 结构.
CSS 样式集分析
命名规范
一般情况下我都是以连字符 (-) 连接 class 的名字 (例如 .foo-bar 而非 .foo_bar 或 .fooBar), 不过在某些特定的时候我会用 BEM(Block, Element, Modifier) 命名法.
BEM 命名法可以使得选择器更规范, 更清晰, 更具语义.
来源: http://www.qdfuns.com/article/23172/daa0302e7da95c2bfd551d6cab376daf.html