昨天看了一道面試題，說(shuō)如何管理 CSS 代碼瞬沦；它談到了君子協(xié)定BEM 規(guī)范（然后樓主就說(shuō)自己馬上就拿到 offer 了??）贰您。但是怎抛，BEM 規(guī)范說(shuō)實(shí)在已經(jīng)不夠接地氣了，現(xiàn)代 CSS 開發(fā)的基調(diào)是模塊化哲虾。這期就借此談?wù)勗?vue 項(xiàng)目中管理 CSS 的幾種常用技術(shù)丙躏。

全局樣式表

CSS 的初衷就是全局樣式择示，并通過(guò)不同優(yōu)先級(jí)的特征值覆蓋其他樣式。在 vue 開發(fā)中晒旅，我們一般會(huì)把全局的 CSS 樣式表放在/asserts/css/main.css里栅盲，然后在入口文件 index.html 上加樣式表的 link：

<!-- index.htm -->
<link rel="stylesheet" type="text/css" href='/asserts/css/main.css'>

不過(guò)，在工程中一般會(huì)使用 webpack废恋。Webpack 會(huì)幫我們把 css link 添加到 index.html 里谈秫；所以 vue 模版通常就直接在 main.js 里導(dǎo)入 main.css 了。

//main.js
import Vue from 'vue'
import App from './App.vue'

// Importing the global css file
import "@/assets/css/main.css"

new Vue({
  render: h => h(App)
}).$mount('#app')

上面是最傳統(tǒng)的 CSS 管理方式鱼鼓，但是我自己很少在 main.css 里添加代碼拟烫，主要原因還是影響面太大；通常的做法還是在 vue 組件里添加局部樣式（即便復(fù)用率不高迄本，我也忍了）硕淑。

<style> in vue

除了在全局樣式文件里編寫 CSS，Vue 原生組件還支持在組件內(nèi)部定義樣式表嘉赎，也就是在 vue 的<style>標(biāo)簽里添加 CSS 選擇器置媳。這里科普一下：工程上，vue 文件通常有三種標(biāo)簽公条，<template>拇囊、<script>、<style>赃份，分別盛放 html寂拆，js 和 css。但事實(shí)上 vue 文件只是一個(gè)模版抓韩，不可以直接運(yùn)行纠永，我們是依靠了 webpack 的vue-laoder將 vue 模版轉(zhuǎn)換成 js 文件才得以運(yùn)行；而<style>還需要vue-style-loader谒拴、css-loader等加載器才能最終編譯到全局的 css 文件中尝江。

通常，我們還會(huì)給<style>加一個(gè)叫scoped的屬性英上；效果是：這里的 CSS 樣式將只作用于當(dāng)前組件（相當(dāng)于組件級(jí)樣式表）炭序。當(dāng)然，這些樣式最終還是會(huì)作用到全局苍日，只是耍了個(gè)小花招惭聂。我們看看樣例：

<template>
  <div class="content">Onion</div>
</template>

<style scoped>
.content {
  width: 300px;
}
</style>

scoped 屬性會(huì)給涉及的 DOM 標(biāo)簽自動(dòng)添加一個(gè)唯一屬性——data-v-{componentHash}——為組件內(nèi)的 CSS 指定作用域；接著 webapck 再把 scoped style 里的選擇器改名為.{className}[data-v-{componentHash}]相恃；最后辜纲，利用組合選擇器（如，.content[data-v-b52c41]）的特性實(shí)現(xiàn)了所謂的 CSS 模塊化管理了。

<div class="content" data-v-b52c41>Onion</div>

<style>
.content[data-v-b52c41] {
  width: 300px;
}
</style>

CSS modules

CSS modules 也是現(xiàn)在很流行的一種模塊化管理技術(shù)耕腾，在 react 社區(qū)里應(yīng)用得很多见剩。Vue 里也可以作為 scoped 樣式的替代方案。和 scoped style 相比扫俺，它也沒(méi)啥神秘感的苍苞，寫法上略有不同罷了：

• <style>里換一個(gè)叫module的屬性
• <template>調(diào)用時(shí)，通過(guò)$style綁定 CSS 對(duì)象
• 在 webpack 里給 css-loader 加一個(gè)modules:true的參數(shù)

<!-- Component.vue -->
<template>
  <div class="$style.content">Onion</div>
</template>

<style module>
.content {
  width: 300px;
}
</style>

// webpack.config.js
rules: [
  {
    test: /\.css$/,
    use: [
      {
        loader: 'css-loader',
        options: {
          // enable CSS Modules
          modules: true,
          // customize generated class names
          localIdentName: '',
        }
      }
    ]
  }
]

我這里順便定制了 class 類名：[name]__[local]__[hash]狼纬，也即.{componentName}__{className}__{randomHash}羹呵。最后生成的文件會(huì)是如下所示：

<div class="Component__content__2Kxy9sid">Onion</div>

<style>
.Component__content__2Kxy9sid {
  width: 300px;
}
</style>

scoped style 和 CSS modules 都是利用 HASH 把組件內(nèi)的 CSS class 唯一化；這樣各個(gè)模塊內(nèi)的 CSS 就不會(huì)互相覆蓋了疗琉。除此之外担巩，CSS modules 比 scoped style 再多一個(gè)功能——可以使用數(shù)組或是對(duì)象語(yǔ)法：

<template>
  <div>
    <p :class="{ [$style.red]: isRed }">
      Am I red?
    </p>
    <p :class="[$style.red, $style.bold]">
      Red and bold
    </p>
  </div>
</template>

CSS in JS

所謂 CSS in JS，就是使用了一個(gè)叫 styled-components 的庫(kù)没炒；它把樣式表定義寫在了 JS 文件里（最后也會(huì)被抽取成某 CSS 文件，類名 hash 處理）犯戏。CSS in JS 最早也是在 React 社區(qū)里活躍起來(lái)的送火，后來(lái)有團(tuán)隊(duì)為 vue 也寫了一個(gè)庫(kù)，叫vue-styled-components先匪，很快這個(gè)概念也迅速蔓延到了 vue 實(shí)戰(zhàn)中种吸。所謂 styled-components（樣式化組件）就是寫一個(gè)只包含樣式，不包含業(yè)務(wù)邏輯的組件呀非；這與我之前介紹過(guò)的renderless components恰巧相反坚俗。

用法如下：

• 安裝 vue-styled-components

  yarn add vue-styled-components
  

• 寫一個(gè) styled 控件（JS 文件）

  // @/components/content.js
  import styled from 'vue-styled-components';
  
  export const Content = styled.div`
    width: 300px;
  `;
  

  p.s. 這里styled.div是函數(shù)，之后跟一個(gè)模板字符串岸裙，用到了 ES6 的Tagged templates語(yǔ)法

• 調(diào)用該 styled component

   <!-- Component.vue -->
  <template>
    <content>Onion</content>
  </template>
  
  <script>
  import { Content } from '@/components/content.js'
  export default {
    components: { Content },
  }
  </script>
  

OK猖败，基本用法如上所示，但寫成樣式化組件有什么好處呢降允？很明顯嘛恩闻，一是組件復(fù)用性更高；二是 vue 組件可以傳 props 呀剧董。

比如我們希望傳一個(gè) color 屬性幢尚，定制字體顏色。傳統(tǒng)方案基本只能在行內(nèi)樣式:style上做文章翅楼。但是行內(nèi)樣式的特征優(yōu)先級(jí)太高尉剩，過(guò)多使用不利于維護(hù)。

<template>
  <div :style="{color: customizedColor}">content</div>
</template>

<script>
export default {
  data: () => ({ customizedColor: 'red' })
}
</script>

這時(shí)候毅臊，樣式化組件的優(yōu)勢(shì)就出來(lái)了：它修改的是 CSS class 的某個(gè)屬性理茎。我們看看怎么寫帶 props 的 styled component：

// @/components/content.js
import styled from 'vue-styled-components';

export const Content = styled('div', {
  color: {
    type: String,
    default: 'black',
  }
})`
  width: 300px;
  color: ${{color} => color}
`;

寫法有點(diǎn)變化，調(diào)用的是一個(gè)柯里化的函數(shù)styled，第一個(gè)參數(shù)是 DOM 標(biāo)簽功蜓，第二個(gè)參數(shù)就是 Vue 組件里常用到的props了园爷；之后繼續(xù)接模板字符串，這樣在${}里就可以調(diào)用props值了（所以式撼，你理解為什么要用模版字符這種寫法了吧童社？）。使用如下：

<template>
  <content :color="customizedColor">Onion</content>
</template>

<script>
import { Content } from '@/components/content.js'
export default {
  components: { Content },
  data: () => ({ customizedColor: 'red' }),
}
</script>

該組件渲染出來(lái)的 html 代碼如下所示著隆。相比原生組件只能綁定行內(nèi)樣式:style——直接作用到 DOM 標(biāo)簽上扰楼，樣式化組件是將屬性直接嵌入到 CSS 里，在代碼易維護(hù)方面更進(jìn)一步美浦；此外弦赖，相比于原生組件使用組合選擇器（如，.content[data-v-7ba5bd90]）浦辨，樣式化組件生成的是一個(gè)隨機(jī)類名（如蹬竖，fGdyfT），只有一個(gè)選擇器流酬，在渲染效率方面無(wú)形中也拉開了一點(diǎn)距離币厕。

<div class="fGdyfT">Onion</div>

<style>
.fGdyfT {
  width: 300px;
  color: red;
}
</style>

小結(jié)

這期介紹了現(xiàn)代前端技術(shù)中比較常見(jiàn)的四種 CSS 管理方式。從全局樣式表芽腾，到 CSS modules旦装，再到 CSS in JS，CSS 進(jìn)化的趨勢(shì)就是模塊化摊滔。那為什么需要 CSS 模塊化呢阴绢？CSS 本身的規(guī)則是全局的，任何一個(gè)樣式變化艰躺，都對(duì)整個(gè)頁(yè)面起效呻袭。于是，樣式?jīng)_突（污染）的問(wèn)題一直是 CSS 解不開的難題描滔。傳統(tǒng)的做法無(wú)非是把類命寫長(zhǎng)一點(diǎn)棒妨，多加幾個(gè)選擇器覆蓋之前的樣式表等等；加多了之后發(fā)現(xiàn)含长，這種代碼根本無(wú)助于可讀性券腔，還不如直接使用 hash 避免沖突，再依據(jù) source map 尋找模塊代碼來(lái)得有實(shí)在拘泞。

最后纷纫，至于項(xiàng)目中該使用哪一種技術(shù)，還是要視情況而定陪腌∪杩客觀上講烟瞧，CSS in JS 和 CSS modules 更強(qiáng)大更新穎，但在寫法上很多人可能還轉(zhuǎn)不過(guò)來(lái)染簇；scoped style 雖然功能弱一些参滴，倒也能滿足基本需求。所以锻弓，還是需要項(xiàng)目決策者自行斟酌砾赔。

相關(guān)

文章同步發(fā)布于an-Onion 的 Github。碼字不易青灼，歡迎點(diǎn)贊