CSS代码格式

刚学CSS的时候,以为只要写出的样式能够在浏览器中正确显示就够了。直到逐渐发现一个几千行的CSS文件,如果不在书写过程中规范自己的代码格式,后面维护简直就是噩梦。掉进坑才知道痛,下面总结了自己在敲CSS代码需要注意的地方,如同CSS代码的组成一样,也分别从选择器,属性名,属性值三个方面进行总结。

<!--more-->

1. 选择器

选择器是css的基础,其重要性不言而喻。在保证选择器正确的前提下,对其格式也需要加以规范。

  • 首先是选择器的命名。对于class名和id名,应当具有明确的语义性。关于选择器命名这里面,有很大学问(比如按照属性命名而非功能命名),我现在的水平是万万不敢发表什么拙见的,张鑫旭大神的博客里面有不少关于这方面的知识;
  • 其次是选择器的嵌套。选择器嵌套最主要的作用是为了提高选择器的优先级。但是如果仅仅是为了避免冲突嵌套数个选择器,会大大降低代码重用性(而类本身就是为了方便在多个地方使用相同的样式);对于id选择器而言,由于其具有惟一性,故其前面的嵌套完全没有必要。这也正是我对于less预编译存在的部分困惑(当然我只是初学者)。此外,由于CSS的渲染方式是从右到左,过多的嵌套会大大降低浏览器渲染效率。所以,应当在保证优先级的前提下尽可能缩短嵌套。
  • 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。如无必要,不为 id、class 选择器添加类型选择器进行限定。

2. 属性名

尽管不论按照什么顺序写属性名,都能使样式正确显示,但是还是参照前辈们的书写格式来进行吧(或者是养成自己的书写顺序习惯,而不是想到什么样式就写什么样式)。下面按照书写先后顺序进行排序

  • 位置属性(position, top, right, z-index, display, float等)
  • 尺寸大小(width, height, padding, margin)
  • 文字系列(font, line-height, letter-spacing, color- text-align等)
  • 背景(background, border等)
  • 其他(animation, transition等) 此外还需要注意属性名在不同浏览器下的兼容性问题,比如opacity等,这方面还有待加强。

3. 属性值

关于属性值的书写格式,有各种各样不同的格式。因此,最主要的还是养成自己固定的书写习惯(或者是服从项目的格式要求)。下面是我自己养成的一些习惯。

  • 属性名与值后的":"之间不包含空格,":"与属性值之间包含空格。
  • 在可以使用属性值缩写的情况下,尽量使用属性缩写。
  • 长度为 0 时须省略单位。
  • 颜色值可以缩写时,使用缩写形式。
  • 当数值为 0 - 1 之间的小数时,省略整数部分的 0。

4. 总结

关于格式规范的问题,其实并没有统一的规定,需要靠自己在学习工作中不断摸索,在被一大段杂乱的css代码给恶心到之后才会真正注意到这个问题,最好的办法就是在学习初期就开始重视,并不断修正自己的代码风格。