前段规范化建议-css编写规范

一、设计原则

常用控件、表格、布局和页面做出一套或者多套模板。这里我们可以选择一套成熟的UI框架进行微调就可以了，如element-ui、layui、iview。
需要使用统一的颜色、图标的地方产品、UI设计人员应该提前规划好。
前端工程师应根据这些主题元素提前做好规划，最好能够将使用这些主题元素的样式都写在一个CSS文件当中、相应的主题图标的图片放在同一个文件夹，那么以后就能够很方便的更改主题了。
每一个页面都应用一个独立的CSS文件，常用页面应该做成CSS文件模板。
每一个页面都应用一个独立的CSS文件，而不能出现多个页面的样式放到同一个CSS文件中，这样会延长加载时间，也会使得命名更加困难。
常用页面如详情页和含有大量表格的页面的CSS样式应写到各自独立的CSS文件中制作成模板，以后每次使用时直接调用即可。
表现与结构分离：CSS样式都应写在CSS文件中，且尽量少用id、组合、属性选择器和行内样式以及style标签样式，
CSS布局尽量不用js。
引入CSS文件应在html页面的顶部引入。
能加快页面内容显示；并能避免页面产生白屏，和网速过慢时避免让用户看到没有经过样式修饰的html代码。
尽量不在css中使用选择器。选择器因为需要遍历页面的所有元素，所以编译的时候会非常消耗时间。
层级(z-index)必须清晰明确。页面弹窗、气泡为最高级（最高级为999），不同弹窗气泡之间可在三位数之间调整；普通区块为10-90内10的倍数；区块展开、弹出为当前父层级上个位增加，禁止层级间盲目攀比。
用于编写js选择用的class名称应与一般的样式class名称有所区别。
例如一般的样式类名：.content-wrapper。
单位一定要统一，除了极个别情况需要用到之外，其他时候不能混用。
尽量不用id选择器做css样式编写，因为id选择器一般用做js选择，有时可能会因为js的原因改动，那么对应的css就会失效。
链接要么都用相对地址、要么都用绝对地址。二者混用时接手的人看起来费劲。
css和js的缩进都只能用空格，不能用tab，因为不同人的tab缩进量不同，有的是两个空格，有的是四个空格。
小程序里面，rem和rpx是可以相互替代的，不能二者混用。
*注：模板都应该设计好相应的html模板页，调用时直接从模板文件中调用html代码即可。

二、规范细则

CSS书写顺序。
1）位置属性(position, top, right, z-index, display, float等)
2）大小(width, height, padding, margin)
3）文字系列(font, line-height, letter-spacing, color- text-align等)
4）背景(background, border等)
5）其他(animation, transition等)
```
.test{
  z-index: 1;
  padding: 0px;
  font-size: 1rem;
  background: #f00;
}
```
使用CSS缩写属性 CSS有些属性是可以缩写的。这样可以使其编译的时间最优化。
比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
可缩写的属性中，如果属性值只有1个或2个，那应该分开写；如果大于2个，应该合并写在一起。
```
.test{
  padding: 0px 5px 2px;  /*相当于padding-top:0px;padding-left:5px;padding-right:5px;padding-bottom:2px;*/
}
```

去掉小数点前的“0”和0后面的单位，如：0px -> 0。

.test{
  padding:.5rem;  /*相当于padding:0.5rem;*/
  margin:0;  /*相当于margin:0px;*/
}

简写命名。简写类名的前提是要让人看懂！
16进制颜色代码缩写。
有些颜色代码是可以缩写的，提高用户体验为主。
```
.test{
  background: #f00;  /*相当于background: #ff0000;*/
}
```
连字符CSS选择器命名规范。长名称或词组可以使用-来为选择器命名。
使用“-”来命名CSS选择器。用字母、-号、数字组成，必须以字母开头，不能为纯数字。
```
.test-demo{
  z-index: 1;
  padding: 0px;
  font-size: 1rem;
  background: #f00;
}
```
不要随意使用id。
id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先于class，所以id应该按需使用，而不能滥用。
为选择器添加状态前缀。
有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
```
.is-active{
  background: #f0f;
}
.has-child{
  height:auto;
}
```

参考文献：https://www.jianshu.com/p/270b273562bb

能力配不上野心，是所有烦扰的根源。这个世界是公平的，你要想得到，就得学会付出和坚持。每个人都是通过自己的努力，去决定生活的样子。

前段规范化建议-css编写规范

一、设计原则

二、规范细则

猜你喜欢