实用的CSS书写规范

不知不觉已经敲代码3、4年了，在前端道路上越走越远，每家公司老大总是要求优化页面、优化JS、优化图片、优化等等等，然而却对CSS要求不是很高，一次偶然机会听说CSS也是能优化的，也能提升页面加载性能，虽然只有一丢丢，但是还是要抱着提升逼格的态度研究一下，废话不多说，下面写一些作为自己的笔记记录。

---

1、CSS的书写顺序

　1）定位的属性：position,top, right, bottom, left, z-index,float,display等
　2）盒模型属性：width,min-width,height,min-height,padding,margin,overflow,clear等
　3）文本属性：font(family,size,style,weight),line-height,letter-spacing,word-spacing,text-align,text-decoration, text-indent,
　text-overflow,text-shadow,text-transform,word-break,word-wrap,white-space,vertical-align,list-style等
　4）背景、边框：border,border-radius等
　5）其他：animation, transition等
　
　注：padding、margin等属性都按上、右、下、左顺序书写，具体原理参考https://mp.weixin.qq.com/s?__biz=MzA3NTIwOTYxMw==&mid=2447522046&idx=1&sn=754ba20d30a93bb754013d59d001ef44&chksm=8b62961cbc151f0abb932aa218e00ddc512e0f9179e3e83b6f4af87ccd8dd6e679fa75b9aba8&mpshare=1&scene=23&srcid=0120TWyG73R2Ur6y1e2McZWc#rd

===========================

2、CSS书写规范　
　１）命名方式：首先要语义化，建议使用驼峰命名和”-“连接命名，如textColor或text-color，不建议使用 “_” 下划线来命名CSS 选择器,原因:浏览器有兼容性问题,IE6 里面 _tip 的选择器命名是无效的。
　2）CSS 有些属性是可以缩写，比如{ padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; }可以缩写为{ padding: 10px 20px; }
　3）小数尽量去掉小数点前面的0，比如font-size: 0.7rem; 可以写成.7rem
　4）颜色代码可以缩写 color: #ffffff; 可以写成color: #fff;
　5）不要一直用div写页面，改用p、span、a等标签就用。
　6）个人建议class嵌套不要超过5层，比如.aaa>.bbb .ccc .ddd .eee .fff{ … }这种。
　7）借鉴阿里的一些常用的CSS命名规则，连接https://www.aliyun.com/jiaocheng/636928.html

===========================

内容不是很多，都是一些大家常用的，但是希望能帮助到大家！