前端开发 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引入用法,这里直接贴官网用法:

前端开发 css、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分,过完今天我就要回家过年啦!!!!虽然我还没抢到回家的票...明天还是找黄牛安排一下,那么晚安,我又熬夜了。

上一篇:CodeForces 711D Directed Roads


下一篇:DevExpress MessageBox 弹出框 底层类