CSS（全称CascadingStyleSheets，层叠样式表）为开发者提供了一种声明式的样式语言，是前端必备的技能之一，基于互联网上的综合资料，轻松-to-understand语法，CSS很好学，但是知识点广泛分散，很难精通。在我们日常开发中，往往会忽略CSS代码的质量，很容易写出乱七八糟的CSS文件。代码优化建议1.使用缩写属性来简化代码适用于：margin,padding,border,font,background等但并不是所有的情况都必须缩写，因为当一个属性的值被缩写时，所有的item都会一直setonce，有时我们不想在value中设置某些项，这时候需要开发者自己判断。.content{//缩写前margin-right:16px;边距顶部：30px；宽度：184px；高度：32px；background:#FFFFFFmargin-left:10px;}.content{//缩写后margin:30px16px010px;宽度：184px；高度：32px；背景：#FFFFFF}2。合并选择器使用“,”连接多个选择器来定义共同的属性，这样既可以增加可读性，又可以减少css文件的大小。.content{显示：flex;.flush,.include,.underline{margin-right:12px;填充：3px6px；边框：1px实心#a96161；字体大小：12px；颜色：#412c2c；：#FFFFFF；背景色：浅绿色；}.include{颜色：#5d3e3e;背景色：#657f7f；}.underline{颜色：#7da938；背景色：#7c6a6a；}}3。更多语义使用类的词名以“在你之后开发的人不会有疑问”为目标命名如下。curr{color:#FFFFFF;background:red;}.future{background:#9f6262;}//curr是什么？什么是未来？??.current-count{颜色：#FFFFFF;背景：红色；}.future-count{背景：#9f6262;}4。声明放在一起，按以下顺序排列：定位相关，如position、top/bottom/left/right、z-index等盒模型相关，如display、float、margin、width/height等.排版相关，如font,Color,line-height等视觉相关，如background,color等，如opacity,animation等建议：当属性数量较多时，可以参考以这5类进行分类。/*定位相关*/position:absolute;顶部：0；右：0；底部：0；左：0；z-指数：100；/*盒子模型相关*/display:block;浮动：对；宽度：100px；高度：100px；/*排版相关*/font:normal13px"HelveticaNeue",sans-serif;行高：1.5；颜色：#333；文本对齐：居中；/*视觉相关*/background-color:#f5f5f5;边框：1px实心#e5e5e5；边界半径：3px；/*其他*/不透明度：1；5、使用&符号来引用父选择器&是Sass和Less中提供的一种语法糖，用来表示引用父选择器优点：非常适合写组件样式，减少很多重复的词缺点：查找成本来自HTML类名的相应样式increases.first{.first-title{/*styles*/}.first-title:after{/*styles*/}.first-content{/*styles*/}}/*使用&引用优化代码*/.first{&-title{/*styles*/&:after{/*styles*/}}&-content{/*styles*/}}Sass.vs.较少的？预处理器将CSS从声明性语言转换为编程语言。可嵌套语法增加了样式文件的可读性和可维护性。变量和混合特性可以减少很多重复的样式声明。LessismorelikeCSS，简单易学，能够从CSS平滑过渡；Sass的缩进语法接受度因人而异。Sass3.0提出了兼容CSS的Scss，用户可以选择使用Sass或者Scss。当项目CSS需要涉及复杂逻辑时，Sass/Scss更适合。Sass提供了@function、@if/@else、@while等更强大、更接近编程语言的语法；当项目的风格复杂度不高时，可以选择Sass或者Less。（下面是Less和Scss语法对比的例子）//Less.mixin(@count)when(@count>0){background-color:black;}.mixin(@count)when(@count<=0){background-color:white;}.tag{.mixin(100);}//Scss@functionselectCount($count){@if$count>0{returnblack;}@else{返回白色；}}.tag{background-color:checkCount(100);}综上所述，CSS作为一项必不可少的前端基本功，原有的痛点很多。近年来，开发者也不断提出不同的优化方案。当我们关注Vue、React、NodeJS等前端热门话题，以及性能优化的时候，也不要忘记写好CSS代码~内容来源：京东云开发者社区[https://www.jdcloud.com/]
