如何写出更优雅的CSS代码？

CSS（全称Cascading Style Sheets，何写层叠样式表）为开发人员提供声明式的出更样式语言，是优雅前端必备的技能之一。基于互联网上全面的代码资料和简单易懂的语法，CSS非常易于学习，何写但其知识点广泛且分散，出更很难做到精通。优雅在我们日常开发中，代码受限于原代码混乱、何写DDL将近等问题，出更常常忽视了CSS代码的优雅质量，很容易写出杂乱无章的代码CSS文件。

代码优化建议

1. 使用缩写属性精简代码

适用于：margin、何写padding、出更border、优雅font、background等

但并非所有情况下都必须缩写，站群服务器因为当一个属性的值缩写时，总是会将所有项都设置一遍，而有时候我们不希望设置值里的某些项，这时候需要开发者自行判断。

2. 合并选择器

 使用",（逗号）"连接多个选择器定义公用属性，不仅能减小css文件大小，还能增加  可读性。

为了更易于定位问题，逗号后换行。

3. 使用更语义化的单词命名class

   命名的时候以“在你之后开发的人不会产生疑惑”为目标

4. 属性声明顺序

   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;

}

 5. 使用&符号引用父选择器

&是Sass和Less中提供的语法糖，用于表示对父选择器的引用，antd design的源码  里应用广泛

优点：非常适合用于编写组件的样式，减少了很多重复单词

缺点：从HTML的class name中寻找对应样式的成本增加

.header {

.header-title { /* styles */}

.header-title:after { /* styles */}

.header-content { /* styles */}

}

/* 用&引用来优化代码