CSS（全稱 C ascading S tyle S heets，層疊樣式表）為開發(fā)人員提供聲明式的樣式語(yǔ)言，是前端必備的技能之一?；诨ヂ?lián)網(wǎng)上全面的資料和簡(jiǎn)單易懂的語(yǔ)法，CSS非常易于學(xué)習(xí)，但其知識(shí)點(diǎn)廣泛且分散，很難做到精通。在我們?nèi)粘ｉ_發(fā)中，受限于原代碼混亂、DDL將近等問題，常常忽視了CSS代碼的質(zhì)量，很容易寫出雜亂無(wú)章的CSS文件。

代碼優(yōu)化建議

1.使用縮寫屬性精簡(jiǎn)代碼

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

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

2.合并選擇器

使用",（逗號(hào)）"連接多個(gè)選擇器定義公用屬性，不僅能減小css文件大小，還能增加可讀性。

為了更易于定位問題，逗號(hào)后換行。

3.使用更語(yǔ)義化的單詞命名class

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

4.屬性聲明順序

Reference： Bootstrap property order for Stylelint [1]

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

1. Positioning：定位相關(guān)，如position、top/bottom/left/right、z-index等
2. Box model：盒模型相關(guān)，如display、float、margin、width/height等
3. Typographic：排版相關(guān)，如font、color、line-height等
4. Visual：可視相關(guān)，如background、color等
5. Misc：其他，如opacity、animation等

個(gè)人建議：在屬性數(shù)量較多時(shí)可以參考這5個(gè)類別歸類排列，至于順序沒必要太過糾結(jié)。

.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.使用&符號(hào)引用父選擇器

&是Sass和Less中提供的語(yǔ)法糖，用于表示對(duì)父選擇器的引用，antd design的源碼里應(yīng)用廣泛

優(yōu)點(diǎn)：非常適合用于編寫組件的樣式，減少了很多重復(fù)單詞

缺點(diǎn)：從HTML的class name中尋找對(duì)應(yīng)樣式的成本增加

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

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

善用相關(guān)技術(shù)

從 The State of CSS 2020: 技術(shù) [2] 調(diào)研中我們可以得知當(dāng)前主流CSS工具的用戶數(shù)量與滿意率數(shù)據(jù)（樣本數(shù)量1萬(wàn)+，僅用于參考），其中分為了4個(gè)象限：

評(píng)估: 使用率較低，滿意度較高。值得關(guān)注的技術(shù)。

采用: 使用率高，滿意度高。可采用安全技術(shù)?！維ass、BEM、PostCSS、Styled Components】

規(guī)避: 使用率低，滿意度低。目前最好避免使用的技術(shù)。

待定: 使用率高，滿意度低。如果您正在使用這些技術(shù)，請(qǐng)重新評(píng)估它們。

CSS方法論

BEM：模塊化命名規(guī)范

BEM（Block塊、Element元素、Modifier修飾符）是一種規(guī)范化的類名命名約定。

There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton

:raising_hand: BEM 解決了什么問題？?

• CSS沒有作用域，class同名時(shí)會(huì)造成“樣式污染”
• CSS文件較長(zhǎng)時(shí)，不統(tǒng)一的命名使得結(jié)構(gòu)比較混亂
• 不規(guī)范的命名使得樣式難以定位到對(duì)應(yīng)的HTML元素，不同開發(fā)者進(jìn)行開發(fā)時(shí)容易寫出重復(fù)的代碼

BEM的優(yōu)勢(shì)： 模塊化 、 結(jié)構(gòu)化 、 可重用性

:raising_hand: BEM 規(guī)范？

Block塊：一個(gè)獨(dú)立且有意義的實(shí)體，任何DOM元素都可以是塊 Element元素 ：塊的子元素，依附于塊存在。如：列表中的某一項(xiàng)、卡片的標(biāo)題、選擇器中的選擇項(xiàng)等 Modifier修飾符： 表示塊或元素的外觀、狀態(tài)或行為。如：是否點(diǎn)擊、是否禁用等 命名規(guī)范 ：

.block__element--modifier

block 和 element 用雙下劃線__鏈接

element 和 modifier 用雙中劃線--鏈接

block、element、modifier 包含多個(gè)單詞時(shí)，用一個(gè)中劃線-鏈接

不推薦element嵌套，如果需要嵌套則說明該從中抽一個(gè)組件出來(lái)了

:chestnut:例子

【Element-UI源碼】https://github.com/ElemeFE/element/blob/dev/packages/table/src/table.vue

Atomic CSS：原子化CSS

:raising_hand:什么是原子化？

原子（atom），是指化學(xué)反應(yīng)不可再分的基本微粒

在ACSS中，將每個(gè)僅有單一CSS規(guī)則的、不可再拆分的CSS類稱為CSS原子。HTML的樣式由多個(gè)CSS原子組合而成，以內(nèi)聯(lián)的形式寫在HTML中。

• 優(yōu)勢(shì)：無(wú)需維護(hù)CSS文件，在HTML中內(nèi)聯(lián)“所見即所得”；移動(dòng)/刪除HTML元素時(shí)，其樣式也能隨之移動(dòng)，無(wú)需額外的更新成本。
• 缺點(diǎn)：結(jié)構(gòu)和樣式強(qiáng)耦合，不利于大型項(xiàng)目維護(hù)，容易產(chǎn)生很多重復(fù)代碼。

:chestnut:例子

<!--- 使用ACSS語(yǔ)法創(chuàng)建一個(gè)子元素水平垂直居中的容器 --->
<div class="D(f) Jc(c) Ac(c) ">Flex容器</div>

<!--- 原子化CSS思想的代碼 --->
<div className="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-8 ant-col-lg-6 gutter-row"></div>

CSS預(yù)/后處理器

為了給CSS提供更強(qiáng)大的功能（嵌套、變量、運(yùn)算等）、使其更易于維護(hù)，誕生了Sass、Less、Stylus等CSS預(yù)處理器。開發(fā)者可以使用這些工具提供的更便捷的語(yǔ)法和特性進(jìn)行開發(fā)，預(yù)處理器則負(fù)責(zé)將代碼編譯為CSS，從而達(dá)到提供樣式的目的。

Sass (Scss) & Less

Sass: 語(yǔ)法 | Sass 中文網(wǎng) [3] 、 語(yǔ)言特性 | Less 中文網(wǎng) [4]

:raising_hand:預(yù)處理器的優(yōu)越性？

• 將CSS從聲明語(yǔ)言轉(zhuǎn)換成一門編程語(yǔ)言
• 可嵌套的語(yǔ)法增加了樣式文件的可讀性和可維護(hù)性
• 變量與混合特性能夠減少很多重復(fù)的樣式聲明

:raising_hand:Sass .vs. Less？

• Less更像CSS，易于上手，能夠從CSS平滑過渡；Sass的縮進(jìn)語(yǔ)法接受度因人而異，Sass3.0中提出了兼容CSS的Scss，用戶可以選擇使用Sass或Scss。
• 當(dāng)項(xiàng)目CSS中需要涉及復(fù)雜邏輯時(shí)，Sass/Scss更適合，Sass提供了更強(qiáng)大、更接近編程語(yǔ)言的@function、@if/@else、@while等語(yǔ)法；當(dāng)項(xiàng)目的樣式復(fù)雜度不高時(shí)，選Sass或Less都可以。（下面是一個(gè)Less和Scss語(yǔ)法對(duì)比例子:chestnut:）

// Less

.mixin( @count )when( @count > 0 ){
    background-color: black;
}
.mixin( @count )when( @count <= 0 ){
    background-color: white;
}
.tag {
    .mixin(100);
}

// Scss
@function checkCount($count) {
    @if $count > 0 {
        return black;
    }
    @else {
        return white;
    }
}
.tag {
    background-color: checkCount(100);
}

• Sass提供了命令行語(yǔ)法，當(dāng)用戶使用Dart或Ruby時(shí)可以通過命令行來(lái)對(duì)Sass進(jìn)行解析（將Sass編譯為CSS）等操作，為開發(fā)者提供了擴(kuò)展空間?；赟ass良好的可擴(kuò)展性，誕生了諸如Compass等Sass框架。

PostCSS

:raising_hand:定義？

狹義的PostCSS：“A tool for transforming CSS with JavaScript”，將CSS轉(zhuǎn)換為JS代碼的工具，提供了將CSS代碼解析為AST的能力，并向開發(fā)者暴露出能夠修改CSS代碼的JavaScript API。

廣義的PostCSS：基于PostCSS工具提供的API開發(fā)出的一系列插件，能夠?qū)τ脩艟帉懙腃SS代碼進(jìn)行處理，這些插件也可以稱之為后處理器。

:raising_hand:有什么較為流行的PostCSS應(yīng)用場(chǎng)景？

• autoprefixer插件：打包時(shí)自動(dòng)添加瀏覽器前綴屬性

div { display: flex }
// 自動(dòng)轉(zhuǎn)換為:point_down:

div{
  display : -webkit-box;
  display : -webkit-flex;
  display : -moz-box;
  display : -ms-flexbox;
  display : flex;
}

• 通過顏色值的識(shí)別與替換來(lái)切換深/淺色模式 前端站點(diǎn)一鍵支持暗色模式 ^[5]
• stylelint插件：CSS代碼檢查工具
• postcss-utilities ^[6] ：為開發(fā)者提供CSS簡(jiǎn)寫方式（原子化）

.cfx {
    @util clearfix;
}

// 等價(jià)于:point_down:
.cfx:after {
    content: '';
    display: block;
    clear: both;
}



.rounded-top {
    @util border-top-radius(4px);
}

// 等價(jià)于:point_down:
.rounded-top {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

CSS in JS

styled-components/Emotion

• 高可復(fù)用性：從組件的層面對(duì) CSS 進(jìn)行封裝，適應(yīng)“組件化”的前端時(shí)代，代碼中不再需要維護(hù)CSS文件。
• 高靈活性：使用 styled-components 能夠很輕松地找到某個(gè)組件關(guān)聯(lián)的樣式；移動(dòng)/刪除HTML元素時(shí)，其樣式也能隨之移動(dòng)/刪除。
• 解決了CSS“全局污染”的痛點(diǎn)：styled-components在編譯時(shí)為樣式生成唯一的class name，開發(fā)者不必再擔(dān)心 class name 重復(fù)。

// 創(chuàng)建一個(gè) Title 組件,它將渲染一個(gè)附加了樣式的 <h1> 標(biāo)簽
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// 創(chuàng)建一個(gè) Wrapper 組件,它將渲染一個(gè)附加了樣式的 <section> 標(biāo)簽，并讀取wrapperColor屬性作為背景色
const Wrapper = styled.section`
  padding: 4em;
  background: ${props => props.wrapperColor || "palevioletred"};
`;

// 就像使用常規(guī) React 組件一樣使用 Title 和 Wrapper
render(
  <Wrapper wrapperColor="red">
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

:raising_hand: styled-components的適用場(chǎng)景

• 使用React或React Native進(jìn)行開發(fā)時(shí)
• 中小型項(xiàng)目；或基于組件庫(kù)開發(fā)、自定義樣式復(fù)雜度不高的大型項(xiàng)目
• 頁(yè)面中元素樣式無(wú)需變化或變化較少時(shí)

總結(jié)

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