Less/css 编写规范

约定

  1. [强制] 开发环境需使用less
  2. [强制] less文件统一使用UTF-8编码格式
  3. [强制] 文件命名统一全部使用小写字母,后缀为".less",单词之间使用中划线分隔
  4. [强制] 用作脚本获取DOM元素的class和id名应遵循J钩子规范
  5. [强制] 上线css文件需选取less文件编译后压缩版本的css

代码格式

缩进

  1. [强制] 代码缩进统一使用2个空格

选择器

  1. [强制] 不要使用标签名和id作为选择器,全部使用class作为样式选择器
  2. [强制] 多个选择器拥有相同的css规则时,每个选择器声明独占一行
  3. [强制] 属性选择器中的值用双引号包围
  4. [建议] 选择器的嵌套层级尽量少
  5. [建议] 表示状态的选择器,保留原来的选择器,设置新的加入状态的选择器,方便js操作
  6. [建议] 选择器命名尽量明确易懂

示例:

.list1,

.list2,

.list3 {

  line-height: 20px;

}

input[type="button"] {

  background-color: #ffccaa;

}

状态:

<a class="nav">加入状态之前</a>

<a class="nav nav-current">加入状态之后</a>

属性

  1. [强制] 每条属性定义独占一行,每条属性最后都要有分号,即使是最后一个属性
  2. [强制] 属性及其值都使用小写字母(16进制色值除外)
  3. [建议] 属性尽量使用缩写形式,如background,margin等
  4. [建议] 建议书写顺序:按功能进行分组,并以 Formatting Model(布局方式、位置) > Box Model(尺寸) > Typographic(文本相关) > Visual(视觉效果) 的顺序书写,以提高代码的可读性

  5. Formatting Model相关属性包括:position / top / right / bottom / left / float / display / overflow等

  6. Box Model相关属性包括:border / margin / padding / width / height 等

  7. Typographic 相关属性包括:font / line-height / text-align / word-wrap 等

  8. Visual 相关属性包括:background / color / transition / list-style 等

  9. [建议] 私有前缀带建议按冒号位置对齐,私有在前

  10. [建议] 尽量不使用hack的方式解决浏览器样式兼容性问题
  11. [建议] 单位全部使用px,使用rem布局的页面单位用rem,less文件中确保单位统一,可以用具体数字的地方就不要使用百分比

示例:

.wrap{
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background: #3a3 url(http://cdn1.showjoy.com/images/b8/b888a4b4ab964ef59191b40d0e801824.jpg) center center no-repeat;
  .wrap-banner{
    width: 100px;
    height: 60px;
    opacity: .6;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }
}

[建议] 代码优化

  • css sprite :将多张图片合并成一个sprite会大大减少http请求,从而降低服务器压力,提高加载速度,对于小尺寸的装饰图片请做成sprite

  • background color:使用图片作为背景时,当背景为深色,文字图片设定为浅色如#fff时,为了避免因为图片加载缓慢(服务器挂机)造成文字无法阅读,请加上适当的背景颜色

  • css3:在合适的情况下使用CSS3来替代图片,做到优雅降级,减少图片请求

米奇

继续阅读此作者的更多文章