壹 ❀ 引

早在大半年前，我在负责整理定义了前端组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分，过完今天我就要回家过年啦！！！！虽然我还没抢到回家的票...明天还是找黄牛安排一下，那么晚安，我又熬夜了。