壹 ? 引
早在大半年前，我在负责整理定义了前端组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分，过完今天我就要回家过年啦！！！！虽然我还没抢到回家的票...明天还是找黄牛安排一下，那么晚安，我又熬夜了。
原文地址：https://www.cnblogs.com/echolun/p/12216103.html