前端开发 css、less编写规范

壹 ❀ 引

早在大半年前，我在负责整理定义了前端组JavaScript开发规范与less、css样式开发规范。一直想将两个规范整理成文章，但在整理了JavaScript规范后，我花了较多的时间在学习JavaScript基础知识，所以对于样式规范一直处于放置状态。直到上周我收到了一条关于JavaScript规范的评论，提醒了我样式规范不能再拖了，那么在放假前花点时间整理一遍作为复习也算不错。

说在前面，本文虽然作为规范但对于less与css写法也给出了部分建议，所以在阅读本规范前建议读者先掌握less基本用法，而对于规范这里也只是给出建议，毕竟适合自己的才是最好的，本文开始。

贰 ❀ 命名规范

贰 ❀ 壹 class、id命名

JavaScript变量我们推荐使用小驼峰，但样式命名得做点改变，这里我们推荐使用 - 分隔符拼接。

/* good */
#foo-bar;.foo-bar

/* bad */
#fooBar;.fooBar

贰 ❀ 贰 less变量命名

我们知道less提供了样式变量可供复用，对于多单词变量命名推荐采用 @ 开头并以 - 分隔符拼接的命名方式。

/* good */
@border-color:#fff;

/* bad */
@borderColor: #fff;

贰 ❀ 叁 less函数命名

除了变量，less还提供了函数用于复用多属性class样式类，关于函数推荐以 . 开头 - 分割线拼接方式命名；形参若为多个单词，推荐使用单词首字母小写方式简写，多个形参之间使用分号；隔离。（虽然函数用的不多）

/* good */
.foo-bar (@bg: #f5f5f5;@color: #900; @fz: 12px) {
    background: @bg;
    color: @color;
    font-size: @fz;
}

/* bad */
.foo-bar (@background: #f5f5f5, @color: #900, @font-size: 12px) {
    background: @background;
    color: @color;
    font-size: @font-size;
}

贰 ❀ 肆 less命名空间

less中的命名空间其实就是部分变量与混合模块的包装，对于命名空间推荐采用 # 开头 - 分割线拼接方式进行统一。

/* good */
#foo-bar {
    .border-radius() {
        font-size: 12px;
    };
    .border-color() {
        color: #fff;
    }
}

叁 ❀ less文件引入

less一大好处就是支持将一个文件单纯作为变量储存文件，从而可以在其它less中引入使用，先说less引入用法，这里直接贴官网用法：

由于可能同时存在index.less文件与index.css文件，为了便于同名但不同后缀的文件区分，@import外部文件引入后缀__不推荐省略__，如果文件自身只作为引用使用而不需要编译输出，必须在文件引用时添加reference字段。

/* good */
@import 'demo.css'; //引入demo.css
@import (reference) 'demo.less';//引入demo.less,只作引用，不输出demo的内容

/* bad */
@import 'demo.css'; //引入demo.css
@import 'demo';     //引入demo.less，并输出

肆 ❀ css、less简写

肆 ❀ 壹 属性值省略写法

关于padding、margin：

/* good */
margin: 1px 2px;
padding: 2px;

/* bad */
margin: 1px 2px 1px 2px;
padding: 2px 2px 2px 2px;

当数值单位为0时，请省略单位；如果存在小数点，推荐去掉0简写：

/* good */
transition-duration: .5s;
margin-top: 0;

/* bad */
transition-duration: 0.5s;
margin-top: 0px;

颜色值推荐16进制写法，而非RGB表现方式，当然如果需要使用透明度时还是可以使用RGB，请灵活变通：

/* good */
border-color: #f00;
color: #fefefe;

/* bad */
border-color: red;
color: rgb(254, 254, 254);

肆 ❀ 贰 不推荐使用元素选择器+class/id组合

出于性能考虑，避免元素选择器与class或id选择器叠加使用，这种写法违背了html与样式分离的规则，如果html标签修改还得对应修改css中的元素选择器；其次，由于选择器匹配规则是从右到左，本来定位到class或id就应该结束，如果你添加了元素选择器，css还得再匹配所有的元素，非常耗性能，所以强烈不推荐。

/* good */
.foo-bar

/* bad */
div.foo-bar

肆 ❀ 叁 样式复用

当多个选择器具有共同属性，推荐使用逗号分割选择器进行复用，每个选择器独立成行。如果为less环境，也推荐变量，混入等其它做法。

/* good */
h1,
h2,
h3{
    color: #fff;
}

/* bad */
h1,h2,h3{
    color: #fff;
}

肆 ❀ 肆 使用less父选择器&

伪类属性建议采用父选择器写法代替传统写法，看几个例子：

常见伪类，比如hover等

/* good */
a {
    color: #fff;
    &:hover {
        color: #ddd;
    }
}

/* bad */
a {
    color: #fff;
}
a:hover {
    color: #ddd;
}

clearfix hack示例：

/* good */
.demo {
    font-size: 12px;
    &:after {
        display: block;
        content: '';
        clear: both;
    }
}

/* bad */
.demo {
    font-size: 12px;
}
.demo:after {
    display: block;
    content: '';
    clear: both;
}

伍 ❀ 代码组织结构

伍❀ 壹 以布局块为单位划分样式代码

在书写样式前，请先划分页面布局并以布局块为单位书写样式，不可随意零散定义。代码块书写推荐从上到下，从左到右的书写顺序，不应该存在子级样式定义早于父级，底层样式定义早于上层样式的情况。

比如页面分为头部，主体与尾部，那么尾部样式早于头部样式定义；再如主体内部分为左右两个盒子，右侧盒子样式不可早于左侧盒子，这样代码更符合布局阅读习惯。

/* good */
.parent {}
.child {}
.top {}
.bottom {}

/* bad */
.child {}
.parent {}
.bottom {}
.top {}

伍❀ 贰 less变量、函数请先定义后使用

变量、文件必须先声明/引用再使用，其次，文件引用代码应放在文件头部。

/* good */
@import 'demo.less';
@color: #fff;
.page {
    color:@color;
}

/* bad */
@import 'demo.less';
.page {
    color:@color;
}
@color: #fff;

伍❀ 叁 样式嵌套规则

less推荐嵌套写法，且嵌套不推荐超过三层：

/* good */
.parent {
    color: #fff;
    .child{
        font-size: 12px;
    }
}

/* bad */
.parent {
    color: #fff;
}
.parent .child {
    font-size: 12px;
}

陆 ❀ 注释要求

对于页面整体布局中的大块，推荐在样式定义前添加注释说明，例如：

/* good */
/* 头部样式定义 */
.header {}

/* 产品推荐样式定义 */
.mayLike {}

柒 ❀ mixin混入要求

关于函数混入，如果被混入的属性类自身不需要被编译输出，必须为属性类加上括号()。

/* good */
.border-color() {
    color: #fff;
}
.demo {
    .border-color;
}

/* bad */
.border-color{
    color:#fff;
}
.demo{
    .border-color;
}

关于函数参数，若需要引用所有形参是一条属性的不同值，推荐@arguments代替形参分散的写法：

/* good */
.box-shadow(@x:0;@y:0;@blur:1;@color:#000){
    box-shadow:@arguments;
}

/* bad */
.box-shadow(@x:0; @y:0; @blur:1; @color:#fff){
    box-shadow:@x @y @blur @color;
}

捌 ❀ extend继承要求

如果被混入的属性类自身需要被编译输出，建议使用继承来代替混入：

/* good */
.border-color{
    color: #fff;
}
.demo {
    &:extend(.border-color);
}
/* 编译后 */
.border-color,
.demo{
    color: #fff;
}

/* bad */
.border-color{
    color: #fff;
}
.demo {
    .border-color;
}
/* 编译后 */
.border-color{
    color: #fff;
}
.demo {
    color: #fff;
}

玖 ❀ 性能优化(补充)

• Display 属性会影响页面的渲染，请合理使用

  • display: inline后不应该再使用 width、height、margin、padding 以及 float；
  • display: inline-block 后不应该再使用 float；
  • display: block 后不应该再使用 vertical-align；
  • display: table-* 后不应该再使用 margin 或者 float；

• float在渲染时计算量比较大，勿滥用float；情况允许下推荐flex进行布局。

• 动画优化

  • 使用 translate 取代 absolute 定位就会得到更好的 fps，动画会更顺滑。
  • 避免通过类似 jQuery animate()-style 改变每帧的样式，使用 CSS 声明动画会得到更好的浏览器优化。
  • 如果使用基于 javaScript 的动画，尽量使用 requestAnimationFrame. 避免使用 setTimeout, setInterval。（关于css动画我会单独介绍，先留个坑）

• 提升 CSS 选择器性能，合理使用关键选择器

  • 特别说明，CSS选择器匹配机制是从右到左匹配，只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的选择符，或者因为不匹配而退出。所以我们把最右边选择符称之为关键选择器。
  • 避免使用通用选择器 .content * {color: red;}
  • 避免使用标签限制 id 选择器 button#backButton {…}
  • 避免使用标签限制 class 选择器 treecell.indented {…}
  • 避免使用多层标签选择器，请使用 class 选择器替换，减少css查找。
  • 避免使用后代选择器，请尽可能标明层级关系。

• 减少回流(重排)

  • 如果你要控制一个元素位移，建议先将它脱离文档流。
  • 尽量少改变font-size和font-family
  • 少改变元素的内外边距
  • 使用Flex时取代inline-block和float时，虽然都会回流，但flex性能更佳。

拾 ❀ 总

那么到这里，关于css、less规范就介绍完毕了，样式虽然简单，但通过合理的规划，不管是在后期维护代码或者去读懂同事的代码，都会带来意想不到的便利。

说好一个月最少写八篇博客，还差三篇只能回家写了。现在是2020年1月20日零点18分，过完今天我就要回家过年啦！！！！虽然我还没抢到回家的票...明天还是找黄牛安排一下，那么晚安，我又熬夜了。