术语
格式
- 使用 2 个空格作为缩进。
- 类名必须使用破折号代替驼峰法。如果你使用 BEM,也可以使用下划线(参见下面的 OOCSS 和 BEM)。
- 不要使用 ID 选择器。
- 避免元素选择器和Class叠加使用。
- 在一个规则声明中应用了多个选择器时,每个选择器独占一行。
- 在规则声明的左大括号
{
前加上一个空格。 - 在属性的冒号
:
后面加上一个空格,前面不加空格。 - 规则声明的右大括号
}
独占一行。 - 规则声明之间用空行分隔开。
OOCSS 和 BEM(仅做参考)
出于以下原因,我们鼓励使用 OOCSS 和 BEM 的某种组合:
* 可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。
* 可以帮助我们创建出可重用、易装配的组件。
* 可以减少嵌套,降低特定性。
* 可以帮助我们创建出可扩展的样式表。
OOCSS,也就是 “Object Oriented CSS(面向对象的CSS)”,是一种写 CSS 的方法,其思想就是鼓励你把样式表看作“对象”的集合:创建可重用性、可重复性的代码段让你可以在整个网站中多次使用。
参考资料:
* Nicole Sullivan 的 OOCSS wiki(https://github.com/stubbornella/oocss/wiki)
* Smashing Magazine 的 Introduction to OOCSS(http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/)
BEM,也就是 “Block-Element-Modifier”,是一种用于 HTML 和 CSS 类名的命名约定。BEM 最初是由 Yandex 提出的,要知道他们拥有巨大的代码库和可伸缩性,BEM 就是为此而生的,并且可以作为一套遵循 OOCSS 的参考指导规范。
* CSS Trick 的 BEM 101(https://css-tricks.com/bem-101/)
* Harry Roberts 的 introduction to BEM(http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
示例
.listing-card
是一个块(block),表示高层次的组件。.listing-card__title
是一个元素(element),它属于.listing-card
的一部分,因此块是由元素组成的。.listing-card--featured
是一个修饰符(modifier),表示这个块与.listing-card
有着不同的状态或者变化。
ID 选择器
在 CSS 中,虽然可以通过 ID 选择元素,但大家通常都会把这种方式列为反面教材。ID 选择器给你的规则声明带来了不必要的高优先级,而且 ID 选择器是不可重用的。
想要了解关于这个主题的更多内容,参见 CSS Wizardry 的文章(http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/),文章中有关于如何处理优先级的内容。
声明块格式
- 选择器分组时,保持独立的选择器占用一行;
- 声明块的左括号 { 前添加一个空格;
- 声明块的右括号 } 应单独成行;
- 声明语句中的 : 后应添加一个空格;
- 声明语句应以分号 ; 结尾;
- 一般以逗号分隔的属性值,每个逗号后应添加一个空格;
- rgb()、rgba()、hsl()、hsla() 或 rect() 括号内的值,逗号分隔,但逗号后不添加一个空格;
- 对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代替 -0.5px);
- 十六进制值应该全部小写和尽量简写,例如,#fff 代替 #ffffff;
- 避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;;
@include
声明
紧随后面的是@include
,这样可以使得整个选择器的可读性更高。
- 嵌套选择器
如果有必要用到嵌套选择器,把它们放到最后,在规则声明和嵌套选择器之间要加上空白,相邻嵌套选择器之间也要加上空白。嵌套选择器中的内容也要遵循上述指引。
当遇到以上情况的时候,你也许是这样写 CSS 的:
* 与 HTML 强耦合的(也是脆弱的)—或者—
* 过于具体(强大)—或者—
* 没有重用
再说一遍: 永远不要嵌套 ID 选择器!
如果你始终坚持要使用 ID 选择器(劝你三思),那也不应该嵌套它们。如果你正打算这么做,你需要先重新检查你的标签,或者指明原因。如果你想要写出风格良好的 HTML 和 CSS,你是不应该这样做的。