現(xiàn)代Web開(kāi)發(fā)中的CSS離完美還差得遠(yuǎn)，這并不奇怪?，F(xiàn)在，項(xiàng)目通常是相當(dāng)?shù)膹?fù)雜的，而CSS樣式又是全局性的，所以到最后總是極容易地發(fā)生樣式?jīng)_突： 樣式相互覆蓋 或 隱式地級(jí)聯(lián)到我們未考慮到的元素 。

為了減輕CSS存在的主要痛點(diǎn)，我們?cè)陧?xiàng)目中普遍采用 BEM 的方法來(lái)。不過(guò)這只能解決CSS問(wèn)題中的一小部分。

對(duì)我們來(lái)說(shuō)是幸運(yùn)的，社區(qū)已經(jīng)開(kāi)發(fā)出了可以幫助我們更徹底地解決問(wèn)題的解決方案。你可能已經(jīng)聽(tīng)說(shuō)過(guò) CSS Modules 、 Styled Componetns 、 Glamorous 或 JSS 。這些只是我們今天可以添加到項(xiàng)目中的一些最流行的工具。如果你對(duì)這個(gè)話題感興趣，你可以查看這篇文章： @Indrek Lasn 詳細(xì)介紹了 CSS in JS的全部思想 。

使用Vue-cli構(gòu)建的Vue應(yīng)用程序提供了兩個(gè)很棒的內(nèi)置解決方案： 作用域CSS 和 CSS Modules 。它們都有一些優(yōu)點(diǎn)和缺點(diǎn)，所以讓我們仔細(xì)看看哪種解決方案更適合你。

作用域CSS

在Vue中引入了CSS作用域 scoped 這個(gè)概念， scoped 的設(shè)計(jì)思想就是讓當(dāng)前組件的樣式不會(huì)影響到其他地方的樣式，編譯出來(lái)的選擇器將會(huì)帶上 data-v-hash 的方式來(lái)應(yīng)用到對(duì)應(yīng)的組件中，這樣一來(lái)，CSS也不需要添加額外的選擇器。也將解決CSS中選擇器作用域和選擇器權(quán)重的問(wèn)題。

在Vue中，為了讓作用域樣式工作，只需要在 <style> 標(biāo)簽添加 scoped 屬性：

<!-- Button.vue -->
<template>
 <button class="btn">
 <slot></slot>
 </button>
</template>
<style scoped>
 .btn {
 color: red;
 }
</style>

通過(guò)使用PostCSS并將上面的示例轉(zhuǎn)換為以下內(nèi)容，它僅將我們的樣式應(yīng)用于相同的組件中的元素：

就像你看到的一樣，整個(gè)過(guò)程不需要做什么就可以達(dá)到很好的效果： 作用域樣式 （CSS中一直以來(lái)令人頭痛的問(wèn)題之一）。

現(xiàn)在假設(shè)你需要調(diào)整 Button 組件的寬度，你可以像平常使用一樣，在調(diào)用這個(gè)組件的地方添加一個(gè)額外的 class 來(lái)設(shè)置其樣式：

<!-- App.vue -->
<template>
 <div id="app">
 <Button class="btn-lg">click</Button>
 </div>
</template>
<script>
 import Button from "./components/Button";
 export default {
 name: "App",
 components: {
  Button
 }
 };
</script>
<style scoped>
 .btn-lg {
 padding: 10px 30px;
 }
</style>

轉(zhuǎn)換后就像下面這樣：

這次還是一樣，不需要做什么就可以很好的控制樣式。

不過(guò)請(qǐng)注意：這個(gè)特性存在一個(gè)缺陷，即如果你子組件的元素上有一個(gè)類已經(jīng)在這個(gè)父組件中定義過(guò)了，那么這個(gè)父組件的樣式就也會(huì)應(yīng)用到子組件上。只不過(guò)其權(quán)重沒(méi)有子組件同類名的重。比如下面這個(gè)示例：

<!-- Button.vue -->
<template>
 <button class="btn btn-lg">
 <slot></slot>
 </button>
</template>
<style scoped>
.btn {
 color: red;
}
.btn-lg {
 padding: 10px 20px;
 border: 2px solid red;
}
</style>
<!-- App.vue -->
<template>
 <div id="app">
 <Button class="btn-lg">click</Button>
 </div>
</template>
<script>
 import Button from "./components/Button";
 export default {
 name: "App",
 components: {
  Button
 }
 };
</script>
<style scoped>
.btn-lg {
 padding: 30px;
 border: 5px solid green;
}
</style>

編譯出來(lái)的效果如下：

還有一些情況是我們需要對(duì)子組件的深層次結(jié)構(gòu)設(shè)置樣式。雖然這種做法并不受推薦，而且應(yīng)該盡量去避免。比如下面這個(gè)示例， Button 組件下有一個(gè) <span> 標(biāo)簽，而在調(diào)用 Button 組件的父組件 App 中設(shè)置 span 樣式：

<!-- Button.vue -->
<template>
 <button class="btn">
 <span>
  <slot></slot>
 </span>
 </button>
</template>
<style scoped>
.btn {
 color: red;
}
</style>
<!-- App.vue -->
<template>
 <div id="app">
 <Button class="btn-lg">click</Button>
 </div>
</template>
<script>
 import Button from "./components/Button";
 export default {
 name: "App",
 components: {
  Button
 }
 };
</script>
<style scoped>
.btn span {
 color: green;
 font-weight: bold;
 border: 1px solid green;
 padding: 10px;
}
</style>

編譯出來(lái)的結(jié)果如下：

從上面的結(jié)果可以看出來(lái)，在父組件 App.vue 中的樣式：

.btn span {
 color: green;
 font-weight: bold;
 border: 1px solid green;
 padding: 10px;
}

上面這段樣式并沒(méi)有編譯出來(lái)，運(yùn)用到子組件 Button.vue 中的 span 中。

在 scoped 樣式中，這種情況可以使用 >>> 連接符或者 /deep/ 來(lái)解決：

<!-- App.vue -->
<style scoped>
 .btn >>> span {
 color: green;
 font-weight: bold;
 border: 1px solid green;
 padding: 10px;
 }
</style>

此時(shí)雖然依舊是在 App.vue 中 scoped 控制 Button.vue 組件中 span ，但上面不同的是，這次樣式生效。編譯出來(lái)的結(jié)果如下：

另外使用作用域樣式還存在一個(gè)問(wèn)題。那就是對(duì) v-html 中內(nèi)在的標(biāo)簽樣式不生效。比如下面這個(gè)示例：

<!-- Button.vue -->
<template>
 <button class="btn">
 <slot></slot>
 </button>
</template>
<style scoped>
.btn {
 color: red;
}
</style>
<!-- App.vue -->
<template>
 <div id="app">
 <Button class="btn-lg" v-html="vhtml"></Button>
 </div>
</template>
<script>
 import Button from "./components/Button";
 export default {
 name: "App",
 data () {
  return {
  vhtml: 'Click <strong>7</strong>'
  }
 },
 components: {
  Button
 }
 };
</script>
<style scoped>
strong {
 color: green;
 border: 1px solid green;
 padding: 10px;
}
</style>

編譯出來(lái)的結(jié)果如下：

從上圖可以看出來(lái)， v-html 中的 strong 標(biāo)簽樣式并未生效。和前面在父組件的 scoped 中設(shè)置子組件內(nèi)部標(biāo)簽未生效一樣。當(dāng)然，其解決方案也是同樣的， 使用 >>> 連接符或 /deep/ 可以讓 v-html 中的標(biāo)簽樣式生效。比如上面的示例，可以將代碼修改為：

<!-- App.vue -->
<style scoped>
 .btn /deep/ strong {
 color: green;
 border: 1px solid green;
 padding: 10px;
 }
</style>

這個(gè)時(shí)候 v-html 中的 strong 樣式生效了，如下圖所示：

話又說(shuō)回來(lái)，雖然 >>> 或 /deep/ 可以幫助我們穿透已封裝好的組件中的樣式，但這也失去了組件封裝的效果。再次回到以前CSS中令人頭痛的問(wèn)題： CSS作用域 。

簡(jiǎn)單的小結(jié)一下，在Vue中 scoped 屬性的渲染規(guī)則：

給DOM節(jié)點(diǎn)添加一個(gè)不重復(fù)的 data 屬性（比如 data-v-7ba5bd90 ）來(lái)表示他的唯一性
在每個(gè)CSS選擇器末尾（編譯后生成的CSS）加一個(gè)當(dāng)前組件的 data 屬性選擇器（如 [data-v-7ba5bd90] ）來(lái)私有化樣式。選擇器末尾的 data 屬性和其對(duì)應(yīng)的DOM中的 data 屬性相匹配
如果組件內(nèi)部包含有其他組件，只會(huì)給其他組件的最外層標(biāo)簽加上當(dāng)前組件的 data 屬性
上面我們看到的是Vue機(jī)制內(nèi)作用域CSS的使用。在Vue中，除了作用域CSS之外，還有另外一種機(jī)制，那就是 CSS Modules ，即 模塊化CSS 。

CSS Modules

CSS Modules的流行起源于React社區(qū)，它獲得了社區(qū)的迅速的采用。Vue更甚之，其強(qiáng)大，簡(jiǎn)便的特性在加上Vue-cli對(duì)其開(kāi)箱即用的支持，將其發(fā)展到另一個(gè)高度。

在Vue中使用CSS Modules和作用域CSS同樣的簡(jiǎn)單。和作用域CSS類似，在 <style> 標(biāo)簽中添加 module 屬性。比如像下面這樣：

<style module>
 .btn {
 color: red;
 }
</style>

然后在 <template> 里這樣寫(xiě)：

<template>
 <button :class="$style.btn">{{msg}}</button>
</template>

這個(gè)時(shí)候編譯出來(lái)的效果如下：

正如上圖所示， :class="$style.btn" 會(huì)被 vue-template-compiler 編譯成為 .Button_btn_3ykLd 這個(gè)類名，并且樣式的選擇器也自動(dòng)發(fā)生了相應(yīng)的變化。

但在這里有一點(diǎn)需要注意，我們平時(shí)有可能在類名中會(huì)使用分隔線，比如：

<style module>
 .btn-lg {
  border: 1px solid red;
  padding: 10px 30px;
 }
</style>

如果通過(guò) $style 調(diào)用該類名時(shí)要是寫(xiě)成 $style.btn-lg ，這樣寫(xiě)是一個(gè)不合法的JavaScript變量名。此時(shí)在編譯的時(shí)候，會(huì)報(bào)一個(gè)錯(cuò)話信息：

按鈕的樣式也不會(huì)生效。如果要生效，我們需要通過(guò)下面這樣的方式來(lái)寫(xiě)：

<template>
 <button :class="$style['btn-lg']">{{msg}}</button>
</template>

編譯出來(lái)的結(jié)果如下：

除了$style.btn-lg這種方式會(huì)報(bào)錯(cuò)之外，寫(xiě)在駝峰（$style.btnLg）的也會(huì)報(bào)錯(cuò)。

上面說(shuō)的 module 屬性會(huì)經(jīng)由Vue-loader編譯后，在我們的 component 產(chǎn)生一個(gè)叫 $style 的隱藏的 computed 屬性。也就是說(shuō)，我們甚至可以在Vue生命周期的 created 鉤子中取得由CSS Modules生成的 class 類名：

<script>
export default {
 created () {
  console.log(this.$style['btn-lg'])
 }
}
</script>

在瀏覽器的 console 中可以看到 modules 編譯出來(lái)對(duì)應(yīng)的類名：

利用這樣的特性，在 <template> 也可以這樣寫(xiě)：

<!-- App.vue -->
<template>
 <div id="app">
  <Button msg="Default Button" />
  <Button :class="{[$style['btn-lg']]: isLg}" msg="Larger Button" />
  <Button :class="{[$style['btn-sm']]: isSm}" msg="Smaller Button" />
 </div>
</template>
<script>
 import Button from './components/Button'
 export default {
  name: 'app',
  components: {
   Button
  },
  data () {
   return {
    isLg: true,
    isSm: false
   }
  }
 }
</script>
<style module>
.btn-lg {
 padding: 15px 30px;
}
.btn-sm {
 padding: 5px;
}
</style>

這個(gè)時(shí)候編譯出來(lái)的結(jié)果如下：

如上圖所示，當(dāng) data 中的 isLg 屬性值為 true 時(shí)， Larger Button 按鈕的 padding 變了，按鈕也同時(shí)變大了。除此之外，我們還可以通過(guò) props 將 class 傳到子組件中。比如像下面這樣使用：

<!-- Button.vue -->
<template>
 <button :class="[$style.btn, primaryClass]">{{msg}}</button>
</template>
<script>
 export default {
  name: 'Button',
  props: {
   msg: String,
   primaryClass: ''
  }
 }
</script>
<style module>
 .btn {
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 5px 15px;
  background: #fefefe;
  margin: 5px;
 }
</style>
<!-- App.vue -->
<template>
 <div id="app">
  <Button msg="Default Button" />
  <Button :class="{[$style['btn-lg']]: isLg}" msg="Larger Button" />
  <Button :class="{[$style['btn-sm']]: isSm}" msg="Smaller Button" />
  <Button msg="Primary Button" :primaryClass="$style['btn-primary']" />
 </div>
</template>
<script>
 import Button from './components/Button'
 export default {
  name: 'app',
  components: {
   Button
  },
  data () {
   return {
    isLg: true,
    isSm: false
   }
  }
 }
</script>
<style module>
 .btn-lg {
  padding: 15px 30px;
 }
 .btn-sm {
  padding: 5px;
 }
 .btn-primary {
  background: rgb(54, 152, 244);
  border-color: rgb(32, 108, 221);
  color: #fff;
 }
</style>

編譯出來(lái)的效果如下圖所示：

如果我們想要在JavaScript里面將獨(dú)立的CSS文件作為CSS模塊來(lái)加載的話，需要在 .css 文件名前添加 .module 前綴，比如：

<script>
 import barStyle from './src/style/bar.module.css'
</script>

如果你是在項(xiàng)目中引入的是處理器文件也是如此，比如 .scss 文件：

<script>
 import fooSassStyle from './src/scss/foo.module.scss'
</script>

如果你覺(jué)得這樣比較麻煩，可以在 vue.config.js 文件中 css.modules 設(shè)為 true ：

// vue.config.js
module.exports = {
 css: {
  modules: true
 }
}

注意，上面的示例創(chuàng)建的項(xiàng)目是使用Vue-cli 3創(chuàng)建的。如果是使用Webpack的話，需要根據(jù)Webpack的相關(guān)機(jī)制進(jìn)行配制。

從上面的示例中我們可以看出。使用 module 和 scoped 不一樣的地方就是在于所有創(chuàng)建的類可以通過(guò) $style 對(duì)象獲取。因此類要應(yīng)用到元素上，就需要通過(guò) :class 來(lái)綁定 $style 這個(gè)對(duì)象。它的好處是，當(dāng)我們?cè)贖TML中查看這個(gè)元素時(shí)，我們可以立刻知道它所屬的是哪個(gè)組件。如果你夠細(xì)心的話，可以看到編譯出來(lái)的類名，都會(huì)以組件名為前綴，比如：

除了這個(gè)好處之外，還有另一個(gè)好處，即： 一切都變成顯式的了，我們擁有了徹底的控制權(quán) 。

總結(jié)

不管是CSS Modules還是作用域CSS，這兩種方案都非常簡(jiǎn)單，易用。在某種程度上解決的是同樣的痛點(diǎn)（CSS的痛）。那么你應(yīng)該選擇哪種呢？

scoped 樣式的使用不需要額外的知識(shí)，給人舒適的感覺(jué)。它所存在的局限，也正它的使用簡(jiǎn)單的原因。它可以用于支持小型到中型的Web應(yīng)用程序。在更大的Web應(yīng)用程序或更復(fù)雜的場(chǎng)景中，對(duì)于CSS的運(yùn)用，我們更希望它是顯式的，更具有控制權(quán)。比如說(shuō)，你的樣式可以在多組件中重用時(shí)，那么 scoped 的局限性就更為明顯了。反之，CSS Modules的出現(xiàn)，正好解決了這些問(wèn)題，不過(guò)也要付出一定的代價(jià)，那就是需要通過(guò) $style 來(lái)引用。雖然在 <template> 中大量使用 $style ，讓人看起來(lái)很蛋疼，但它會(huì)讓你的樣式更加安全和靈活，更易于控制。CSS Modules還有一個(gè)好處就是可以使用JavaScript獲取到我們定義的一些變量，這樣我們就不需要手動(dòng)保持其在多個(gè)文件中同步。

最后還是那句話， 任何解決CSS的方案，沒(méi)有最好的，只有最合適的！ 我們應(yīng)該根據(jù)自己的項(xiàng)目、場(chǎng)景和團(tuán)隊(duì)進(jìn)行選擇。當(dāng)然，不管選擇哪種方案，都是為了幫助我們更好的控制樣式，解決原生CSS中存在的痛點(diǎn)。最后希望這篇文章對(duì)大家有所幫助。

最新評(píng)論