如何優(yōu)雅的寫css代碼

作者 | 京東科技 楊健

CSS（全稱 Cascading Style Sheets，層疊樣式表）為開發(fā)人員提供聲明式的樣式語言，是前端必備的技能之一，基于互聯(lián)網(wǎng)上全面的資料和簡單易懂的語法，CSS 非常易于學(xué)習(xí)，但其知識(shí)點(diǎn)廣泛且分散，很難做到精通，在我們?nèi)粘ｉ_發(fā)中，常常忽視了 CSS 代碼的質(zhì)量，很容易寫出雜亂無章的 CSS 文件。

代碼優(yōu)化建議

1. 使用縮寫屬性精簡代碼

適用于：margin、padding、border、font、background 等 但并非所有情況下都必須縮寫，因?yàn)楫?dāng)一個(gè)屬性的值縮寫時(shí)，總是會(huì)將所有項(xiàng)都設(shè)置一遍，而有時(shí)候我們不希望設(shè)置值里的某些項(xiàng)，這時(shí)候需要開發(fā)者自行判斷。

.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. 合并選擇器

使用 "," 連接多個(gè)選擇器定義公用屬性，不僅能增加可讀性，還能減小 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

命名的時(shí)候以 “在你之后開發(fā)的人不會(huì)產(chǎn)生疑惑” 為目標(biāo) 如下

.curr{
    color:#FFFFFF;
    background:red;
}
.future{
    background:#9f6262;
}
// curr 是啥? future又是啥? 

.current-count{ 
    color:#FFFFFF; 
    background:red; 
} 
.future-count{ 
    background:#9f6262; 
}

4. 屬性聲明順序

選擇器中屬性數(shù)量較多時(shí)，將相關(guān)的屬性聲明放在一起，并按以下順序排列：

定位相關(guān)，如 position、top/bottom/left/right、z-index 等

盒模型相關(guān)，如 display、float、margin、width/height 等

排版相關(guān)，如 font、color、line-height 等

可視相關(guān)，如 background、color 等

其他，如 opacity、animation 等

建議：在屬性數(shù)量較多時(shí)可以參考這 5 個(gè)類別歸類排列。

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

5. 使用 & 符號(hào)引用父選擇器

& 是 Sass 和 Less 中提供的語法糖，用于表示對(duì)父選擇器的引用 優(yōu)點(diǎn)：非常適合用于編寫組件的樣式，減少了很多重復(fù)單詞 缺點(diǎn)：從 HTML 的 class name 中尋找對(duì)應(yīng)樣式的成本增加

.first {
    .first-title {/* styles */}
    .first-title:after {/* styles */}
    .first-content {/* styles */}
}
/* 用&引用來優(yōu)化代碼 */
.first {
    &-title {
        /* styles */
        &:after {/* styles */}
    }
    &-content {/* styles */}
}

Sass .vs. Less？

預(yù)處理器將 CSS 從聲明語言轉(zhuǎn)換成一門編程語言

可嵌套的語法增加了樣式文件的可讀性和可維護(hù)性 變量與混合特性能夠減少很多重復(fù)的樣式聲明 Less 更像 CSS，易于上手，能夠從 CSS 平滑過渡；Sass 的縮進(jìn)語法接受度因人而異，Sass3.0 中提出了兼容 CSS 的 Scss，用戶可以選擇使用 Sass 或 Scss。 當(dāng)項(xiàng)目 CSS 中需要涉及復(fù)雜邏輯時(shí)，Sass/Scss 更適合，Sass 提供了更強(qiáng)大、更接近編程語言的 @function、@if/@else、@while 等語法；當(dāng)項(xiàng)目的樣式復(fù)雜度不高時(shí)，選 Sass 或 Less 都可以。

（下面是一個(gè) Less 和 Scss 語法對(duì)比例子）

// 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 作為一門前端必備的基礎(chǔ)技能，具有許多原生的痛點(diǎn)。近年來，開發(fā)者們也在源源不斷地提出了不同的優(yōu)化方案，我們?cè)谌粘ｊP(guān)注 Vue、React、NodeJS、性能優(yōu)化等熱門前端話題的時(shí)候，也不要忘了好好寫 CSS 代碼呀～

審核編輯：湯梓紅