跳到主要内容

总结

简而言之,本文主要包括以下几个方面的内容:

核心原则

  • 创建编程规范的目的就是为了保证协作开发的一致性。即使你对本文有不同的意见,也要保证整体开发的一致性。
  • 尽可能让 Sass 代码保持简洁。除非是绝对需要,否则绝没有必要构建复杂的系统。
  • 请记住,有时候保持简洁(KISS,Keep It Simple, Stupid)比减少重复(Don't Repeat Yourself)更重要。

语法 & 格式

  • 使用两个空格代表缩进,而不是使用 tab 键。
  • 理想上,每行保持为 80 个字符宽度。
  • 根据 CSS Guidelines 正确书写 CSS 属性。
  • 有意义的使用空格。

字符串

  • 强烈建议在样式表顶部使用 @charset 指令声明字符集。
  • 除非用作 CSS 标识符,否则应该使用单引号包裹字符串和 URL。

数值

  • 数字尾部不使用 0 ,并且强制在小于 1 的数字前使用 0。
  • 长度样式属性值为 0 时不要添加单位。
  • 使用括号包裹运算表达式。
  • 不使用幻数。

颜色

  • 颜色表示法的先后顺序:关键字 > HSL > RGB > 十六进制。
  • 当减淡或加深颜色时,最好使用 mix(..) 替代 darken(..)lighten(..)

列表

  • 使用逗号分隔列表。
  • 使用圆括号增加可读性。
  • 列表尾部不要添加逗号(当它们是内联状态时)。

Maps

  • 当 map 内部包含多个键值对时,将它们分成多行。
  • 为了增加可维护性,map 内部的最后一个键值对应该添加一个逗号。
  • 如果 map 的键是字符串,应该使用引号包裹起来。

声明顺序

  • 只要保持开发的一致性,无论哪种声明顺序(根据字母表或者类型排序)都是可以接受的。

选择器嵌套

  • 减少选择器嵌套。
  • 对伪类和伪元素使用选择器嵌套。
  • 媒体查询也可以嵌套到相关的选择器当中。

命名约定

  • 坚持连字符分隔的命名方式。

注释

  • CSS 中充满了机巧,当你有所疑问的时候,就应该写下相关的注释。
  • 对于变量、函数、混合宏和占位符创建的公开 API,使用 SassDoc 来注释。

变量

  • 在公开 API 中使用 !default 标志变量,让后期的修改更安全。
  • 不要在顶层使用 !global 标志,应为这可能会在未来和 Sass 语法有冲突。

扩展

  • 坚持扩展占位符,而不是扩展既有的 CSS 选择器。
  • 尽可能少地扩展占位符,避免潜在的副作用。