CSS（全称 Cascading Style Sheets，层叠款式表）为开发人员提供声明式的款式语言，是前端必备的技术之一，基于互联网上全面的资料和简单易懂的语法，CSS 十分易于学习，但其知识点广泛且涣散，很难做到精通，在我们日常开发中，常常忽视了 CSS 代码的质量，很简单写出乱七八糟的 CSS 文件。

代码优化主张

1. 运用缩写特点精简代码

适用于：margin、padding、border、font、background 等

但并非所有情况下都必须缩写，由于当一个特点的值缩写时，总是会将所有项都设置一遍，而有时分我们不希望设置值里的某些项，这时分需要开发者自行判断。

.content{
    // 缩写前
    margin-right:16px;
    margin-top:30px;
    width:184px;
    height:32px;
    background:#FFFFFF
    margin-left:10px;
}
.content{
    //缩写后
    margin:30px 16px 0 10px;
    width:184px; 
    height:32px; 
    background:#FFFFFF
}

2. 兼并选择器

运用 “,” 衔接多个选择器定义公用特点，不仅能添加可读性，还能减小 css 文件大小。

.content{
  display: flex;
  .flush, 
  .include, 
  .underline{
   margin-right: 12px; 
   padding: 3px 6px; 
   border: 1px solid #a96161; 
   font-size: 12px; 
   color: #412c2c; 
   }
   .flush{ 
   color: #FFFFFF; 
   background-color: aqua; 
   }
   .include{ 
   color: #5d3e3e; 
   background-color: #657f7f; 
   }
    .underline{ 
    color: #7da938; 
    background-color: #7c6a6a; 
    }
}

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

命名的时分以 “在你之后开发的人不会发生疑惑” 为方针 如下

.curr{
    color:#FFFFFF;
    background:red;
}
.future{
    background:#9f6262;
}
// curr 是啥? future又是啥? ⬆️
.current-count{ 
    color:#FFFFFF; 
    background:red; 
} 
.future-count{ 
    background:#9f6262; 
}

4. 特点声明顺序

选择器中特点数量较多时，将相关的特点声明放在一同，并按以下顺序摆放：

  1. 定位相关，如 position、top/bottom/left/right、z-index 等
  2. 盒模型相关，如 display、float、margin、width/height 等
  3. 排版相关，如 font、color、line-height 等
  4. 可视相关，如 background、color 等
  5. 其他，如 opacity、animation 等

主张：在特点数量较多时可以参阅这 5 个类别归类摆放。

  /* 定位相关 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  /* 盒模型相关 */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  /* 排版相关 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
  /* 可视相关 */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  /* 其他 */
  opacity: 1;

5. 运用 & 符号引证父选择器

& 是 Sass 和 Less 中提供的语法糖，用于表明对父选择器的引证

长处：十分适合用于编写组件的款式，减少了很多重复单词

缺点：从 HTML 的 class name 中寻觅对应款式的本钱添加

.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 的缩进语法承受度因人而异，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
@function selectCount($count) {
    @if $count > 0 {
        return black;
    }
    @else {
        return white;
    }
}
.tag {
    background-color: checkCount(100);
}

综上，CSS 作为一门前端必备的基础技术，具有许多原生的痛点。近年来，开发者们也在源源不断地提出了不同的优化计划，我们在日常关注 Vue、React、NodeJS、功能优化等抢手前端话题的时分，也不要忘了好好写 CSS 代码呀～

内容来历：京东云开发者社区[www.jdcloud.com/]