本文討論了Vue CLI中為Element UI添加樣式為何不起作用的原因，以及正常思路的解決方案，廢話比較多，隨便看看就好了，如果關(guān)注問題的解決方案，請(qǐng)往后翻吧，等我弄明白簡書如何做錨點(diǎn)跳轉(zhuǎn)了再附上傳送門。
前言
前端是個(gè)極好的行業(yè)，大家面對(duì)令人不怎么愉快的設(shè)計(jì)，在噴爽了之后，還是會(huì)認(rèn)真想很多辦法。這里推薦閱讀黃玄的css-sucks-2015
關(guān)于如何書寫CSS，使其能夠適應(yīng)大型項(xiàng)目，我們有很多辦法，一開始有從命名上解決問題的：OOCSS、BEM ...... 一些CSS的擴(kuò)展語言甚至為BEM的書寫提供了便利，如SASS。
在組件化開發(fā)的思想獲得大家的一致認(rèn)可后，我們就如何書寫“遺世而獨(dú)立”的CSS進(jìn)行了探索。
React說那就CSS in JS吧，只需要養(yǎng)成一些極其別扭的習(xí)慣，我們就可以把所有的樣式都用JS來表達(dá)，類似于以下寫法：
...
render() {
const style = {
fontSize: '1.5em',
backgroudColor: 'red',
}
return (
<div style={style}>Something Amazing...</div>
)
}
...
當(dāng)然，在定義keyframes、font-face、偽類、偽元素等時(shí)，可能會(huì)變得非常頭疼（我現(xiàn)在還是沒搞明白怎么用JS寫這些玩意兒）。如果想要進(jìn)一步了解，可以閱讀阮一峰老師的CSS in JS 簡介。
我們當(dāng)然還有稍好一些的解決方案，依然不敵無需任何學(xué)習(xí)成本的CSS Module。
CSS Module
這種方案的學(xué)習(xí)成本實(shí)在是太低了，以致于我們?cè)谑褂肰ue CLI的時(shí)候沒有意識(shí)到它的存在，這種方案的原理非常簡單，就是我們?cè)跇?gòu)建最終頁面時(shí)為每個(gè)文件中的類名加上基于該文件路徑的哈希值（我猜的），也就是所謂的scoped解決方案（在vue單文件組件中的scoped屬性與Firefox所支持的style標(biāo)簽的scoped屬性是完全不一樣的）。
<!--before build-->
<div class="title"></div>
<!--after build-->
<div class="title-hf3hb6sn"></div>
這樣的寫法會(huì)降低類名在瀏覽器中的可讀性，對(duì)開發(fā)者不是很友好，尤其是對(duì)網(wǎng)絡(luò)爬蟲有了解的老師可能會(huì)知道，每次發(fā)版就更改類名實(shí)在是太喪心病狂了，這可能會(huì)讓一些通過類名來定位信息的爬蟲經(jīng)常死掉。
Vue CLI中CSS Module的實(shí)現(xiàn)
在Vue CLI中我們通過為單文件組件中的style標(biāo)簽添加scoped屬性來啟用CSS Module，與最初我們所設(shè)想的為類名添加哈希尾綴不同的是，Vue CLI利用了CSS的屬性選擇器，通過data-屬性來區(qū)別其他組件中使用相同類名的類。這樣設(shè)計(jì)的目的在于使得當(dāng)前的組件無法修改其他組件的樣式。
<!--before build-->
<template>
<div class="demo">Hello, CSS Module</div>
</template>
<style scoped>
.demo {color: red;}
</style>
<!--after build-->
<template>
<div class="demo" data-v-20174629>Hello, CSS Module</div>
</template>
<style scoped>
.demo[data-v-20174629] {color: red;}
</style>
咋整呢？
明白了Vue CLI是如何工作的之后，我們也明白只需要不讓Vue CLI為我們添加data-屬性就能解決這個(gè)問題，一般的思路是，在App.vue或者公用CSS文件中使用無scoped屬性的style標(biāo)簽，并為其套上一層附有注釋意義的父元素類名（也可以使用data-進(jìn)行注釋），以免影響全局的樣式：
<style>
.demo .el-option {
font-size: 1.5em;
}
</style>
這樣的做法依然有問題，因?yàn)槠湔加昧斯驳拿臻g。如何做到很好地封裝第三方庫，并寫出“遺世而獨(dú)立”的樣式呢？哎，等我弄明白了再補(bǔ)充吧。
