博客来自:http://www.gbtags.com/gb/tutorials/215/1164.htm
个人主页:http://www.itit123.cn/ 更多干货等你来拿
CSS代码编码规范
类似HTML,代码编写规范帮助程序员很好的规整和管理代码。这里介绍一些CSS编码的相关规范。
有效组织注释
CSS文件可以非常复杂,或许包含了几百行。这些巨大的文件可能会导致我们书写的样式非常难于编辑和查找。所以最好我们将样式组织在逻辑块中。
注意:尽量使用一些注释说明样式内容和相关逻辑模块,方便其它人理解
不符合编码规范
header { ... }
article { ... }
.btn { ... }
- 符合编码规范
<pre name="code" class="html">/* Primary header */ header { ... } /* Featured article */ article { ... } /* Buttons */ .btn { ... }
使用多行书写代码和空格
书写CSS,最重要的是将每一个选择器和声明定义在一个新行。然后,每一个选择器需要缩放来申明。
为了方便其它人阅读,需要按指定的方式来书写CSS,下面是对比的例子:
- 不符合编码规范
a,.btn{background:#aaa;color:#f60;font-size:18px;padding:6px;}
- 符合编码规范
a, .btn { background: #aaa; color: #f60; font-size: 18px; padding: 6px; }
以上代码更清楚的定义了css相关样式,更符合阅读习惯
使用正确的类名称
类名或者值应该模块化,必须包含有效的说明元素相关内容,不是仅仅描述外观,类名称定义应该是小写,并且使用连字符号“-”
- 不符合编码规范
.Red_Box { ... }
- 符合编码规范
.alert-message { ... }
创建合适的选择器
CSS选择器如果不好好维护则可能会无法控制。太长或者太不清楚都不合适。
太长的选择器会导致层次太深入,而打断正常的层次结构导致不可预期的错误。
还有就是尽量不要使用ID来定义CSS中选择器,因为它们比较专注,会导致很多问题。
下面是对比例子:
- 不符合编码规范
#aside #featured ul.news li a { ... } #aside #featured ul.news li a em.special { ... }
- 符合编码规范
.news a { ... } .news .special { ... }
必要的时候使用指定的类定义
有些时候当CSS名太长的时候,有必要使用特定的类定义,因为层次太多需要你定义较多的代码。
举个例子,如果一个<em>元素签到到一个存在于<aside>元素中的<h1>元素,而以上这些元素都包含在<section>元素中,选择器有可能设计成为了"aside h1 em",那么<em>元素即使移出<h1>元素,样式也不会发生变化,更好的解决方法是为<em>元素定义一个特定的类定义,比较代码如下:
- 不符合编码规范
section aside h1 em { ... }
- 符合编码规范
.text-offset { ... }
使用缩写属性和值
一个CSS的特性是能够使用缩写属性和值。 大多数的属性和值都支持缩写方式,例如,内外边距,这样书写能够有效的减少代码
- 不符合编码规范
img { margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px; } button { padding: 0 0 0 20px; }
- 符合编码规范
img { margin: 5px 10px; } button { padding-left: 20px; }
使用缩写的16进制的颜色属性
在颜色属性值书写中,如果可以的化尽量使用3个字母缩写来设置颜色值,对比代码如下:
- 不符合编码规范
.module { background: #DDDDDD; color: #FF6600; }
- 符合编码规范
.module { background: #ddd; color: #f60; }
不书写0值相关单位
有时候,如果相关属性值为0的时候,尽量不书写单位,对比代码如下:
- 不符合编码规范
div { margin: 20px 0px; letter-spacing: 0%; padding: 0px 5px; }
- 符合编码规范
div { margin: 20px 0; letter-spacing: 0; padding: 0 5px; }
分组来管理浏览器相关兼容前缀
对于CSS3相关属性来说, 通常需要使用浏览器相关的兼容性前缀,这个时候务必保证书写的代码能够有效的组织(有效对齐和分组),不要随意的书写,下面是对比代码:
- 不符合编码规范
div { background: -webkit-linear-gradient(#a1d3b0, #f6f1d3); background: -moz-linear-gradient(#a1d3b0, #f6f1d3); background: linear-gradient(#a1d3b0, #f6f1d3); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
- 符合编码规范
div { background: -webkit-linear-gradient(#a1d3b0, #f6f1d3); background: -moz-linear-gradient(#a1d3b0, #f6f1d3); background: linear-gradient(#a1d3b0, #f6f1d3); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
小提示: 使用一些第三方类库,可以帮助我们书写不带有任何浏览器兼容性前缀的代码, 例如 prefixfree,更多请参考教程
模块化代码方便重用
尽量不要书写重复定义的样式, 学会设计可重用的代码结构,避免生成大量的冗余代码,下面是对比例子:
- 不符合编码规范
.news { background: #eee; border: 1px solid #ccc; border-radius: 6px; } .events { background: #eee; border: 1px solid #ccc; border-radius: 6px; }
- 符合编码规范
.feat-box { background: #eee; border: 1px solid #ccc; border-radius: 6px; }