如何写出更“美”的CSS代码？
原标题：如何写出更“美”的CSS代码？
关注
“脚本之家
”，与百万开发者在一起
来源 | ELab团队（ID：gh_b1857b91fe44）
已获得原公众号的授权转载
CSS（全称CascadingStyleSheets，层叠样式表）为开发人员提供声明式的样式语言，是前端必备的技能之一。基于互联网上全面的资料和简单易懂的语法，CSS非常易于学习，但其知识点广泛且分散，很难做到精通。在我们日常开发中，受限于原代码混乱、DDL将近等问题，常常忽视了CSS代码的质量，很容易写出杂乱无章的CSS文件。
代码优化建议
-
使用缩写属性精简代码
适用于：margin、padding、border、font、background等
但并非所有情况下都必须缩写，因为当一个属性的值缩写时，总是会将所有项都设置一遍，而有时候我们不希望设置值里的某些项，这时候需要开发者自行判断。
-
合并选择器
使用”,（逗号）”连接多个选择器定义公用属性，不仅能减小css文件大小，还能增加可读性。
为了更易于定位问题，逗号后换行。
-
使用更语义化的单词命名class
命名的时候以“在你之后开发的人不会产生疑惑”为目标
-
属性声明顺序
Reference：Bootstrap property order for Stylelint[1]
选择器中属性数量较多时，将相关的属性声明放在一起，并按以下顺序排列：
Positioning：定位相关，如position、top/bottom/left/right、z-index等
Box model：盒模型相关，如display、float、margin、width/height等
Typographic：排版相关，如font、color、line-height等
Visual：可视相关，如background、color等
Misc：其他，如opacity、animation等
个人建议：在属性数量较多时可以参考这5个类别归类排列，至于顺序没必要太过纠结。
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px“Helvetica Neue”, sans-serif;
line-height: 1.5;
color:#333;
text-align: center;
/* Visual */
background-color:#f5f5f5;
border: 1px solid#e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
-
使用
