作者 | 京東科技 楊健

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. 屬性聲明順序

選擇器中屬性數量較多時，將相關的屬性聲明放在一起，并按以下順序排列：

定位相關，如 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: 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 代碼呀～

審核編輯：湯梓紅