CSS（全称CascadingStyleSheets，层叠样式表）为开发人员提供声明式的样式语言，是前端必备的技能之一，基于互联网上全面的资料和简单易懂的语法，CSS非常易于学习，但其知识点广泛且分散，很难做到精通，在我们日常开发中，常常忽视了CSS代码的质量，很容易写出杂乱无章的CSS文件。
代码优化建议
1.使用缩写属性精简代码适用于：margin、padding、border、font、background等
但并非所有情况下都必须缩写，因为当一个属性的值缩写时，总是会将所有项都设置一遍，而有时候我们不希望设置值里的某些项，这时候需要开发者自行判断。
.content{//缩写前margin-right:16px;margin-top:0px;width:px;height:2px;background:#FFFFFFmargin-left:10px;}.content{//缩写后margin:0px16pxpx;width:px;height:2px;background:#FFFFFF}2.合并选择器
使用","连接多个选择器定义公用属性，不仅能增加可读性，还能减小css文件大小。
.content{display:flex;.flush,.include,.underline{margin-right:12px;padding:px6px;border:1pxsolid#a;font-size:12px;color:#c2c;}.flush{color:#FFFFFF;background-color:aqua;}.include{color:#5dee;background-color:#f7f;}.underline{color:#7da98;background-color:#7c6a6a;}}.使用更语义化的单词命名class
命名的时候以“在你之后开发的人不会产生疑惑”为目标如下
.curr{color:#FFFFFF;background:red;}.future{background:#9f;}//curr是啥?future又是啥???.current-count{color:#FFFFFF;background:red;}.future-count{background:#9f;}4.属性声明顺序
选择器中属性数量较多时，将相关的属性声明放在一起，并按以下顺序排列：
定位相关，如position、top/bottom/left/right、z-index等
盒模型相关，如display、float、margin、width/height等
排版相关，如font、color、line-height等
可视相关，如background、color等
其他，如opacity、animation等
建议：在属性数量较多时可以参考这5个类别归类排列。
/*定位相关*/position:absolute;top:0;right:0;bottom:0;left:0;z-index:;/*盒模型相关*/display:block;float:right;width:px;height:px;/*排版相关*/font:normal1px"HelveticaNeue",sans-serif;line-height:1.5;color:#;text-align:center;/*可视相关*/background-color:#f5f5f5;border:1pxsolid#e5e5e5;border-radius:px;/*其他*/opacity:1;5.使用符号引用父选择器
是Sass和Less中提供的语法糖，用于表示对父选择器的引用
优点：非常适合用于编写组件的样式，减少了很多重复单词
缺点：从HTML的classname中寻找对应样式的成本增加
.first{.first-title{/*styles*/}.first-title:after{/*styles*/}.first-content{/*styles*/}}/*用引用来优化代码*/.first{-title{/*styles*/:after{/*styles*/}}-content{/*styles*/}}Sass.vs.Less？预处理器将CSS从声明语言转换成一门编程语言
可嵌套的语法增加了样式文件的可读性和可维护性
变量与混合特性能够减少很多重复的样式声明
Less更像CSS，易于上手，能够从CSS平滑过渡；Sass的缩进语法接受度因人而异，Sass.0中提出了兼容CSS的Scss，用户可以选择使用Sass或Scss。
当项目CSS中需要涉及复杂逻辑时，Sass/Scss更适合，Sass提供了更强大、更接近编程语言的
function、if/else、while等语法；当项目的样式复杂度不高时，选Sass或Less都可以。（下面是一个Less和Scss语法对比例子）//Less.mixin(
count)when(count0){background-color:black;}.mixin(count)when(count=0){background-color:white;}.tag{.mixin();}//ScssfunctionselectCount($count){if$count0{returnblack;}else{returnwhite;}}.tag{background-color:checkCount();}综上，CSS作为一门前端必备的基础技能，具有许多原生的痛点。近年来，开发者们也在源源不断地提出了不同的优化方案，我们在日常