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

一、设计原则

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

二、规范细则

1. 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;
   }
   

2. 使用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;*/
   }
   

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

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

4. 简写命名。简写类名的前提是要让人看懂！
5. 16进制颜色代码缩写。
   有些颜色代码是可以缩写的，提高用户体验为主。

   .test{
     background: #f00;  /*相当于background: #ff0000;*/
   }
   

6. 连字符CSS选择器命名规范。长名称或词组可以使用-来为选择器命名。
   使用“-”来命名CSS选择器。用字母、-号、数字组成，必须以字母开头，不能为纯数字。

   .test-demo{
     z-index: 1;
     padding: 0px;
     font-size: 1rem;
     background: #f00;
   }
   

7. 不要随意使用id。
   id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先于class，所以id应该按需使用，而不能滥用。
8. 为选择器添加状态前缀。
   有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。

   .is-active{
     background: #f0f;
   }
   .has-child{
     height:auto;
   }
   

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

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