vue中慎用style的scoped屬性

2ue發表於2017-11-28
Vue

本文釋出在我的部落格vue中慎用style的scoped屬性
許可協議: 署名-非商業性使用-禁止演繹4.0國際 轉載請保留原文連結及作者。

在vue元件中，在style標籤上新增scoped屬性，以表示它的樣式作用於當下的模組，很好的實現了樣式私有化的目的，這是一個非常好的機制。但是為什麼要慎用呢？在實際業務中我們往往會對公共元件樣式做細微的調整，如果新增了scoped屬性，那麼樣式將會變得不易修改。初寫這篇文章時，本人沒有找到一個好的方法去解決這個問題，後來經過大夥的解答，才讓我恍然大悟。

何為謹慎使用

謹慎使用不是不用，而是持一種審視的目光去看待它。scoped肯定是解決了樣式私有化的問題，但同時也引入了新的問題---樣式不易（可）修改，而很多時候，我們是需要對公共元件的樣式做微調的。所以我才說要謹慎使用

解決方案

首先要說明的問題是，最開始我以為這是一個BUG或者說一個弊端(因為當時沒有搞明白scoped的真正作用)，就很英勇的去提了一個issue，然後理所當然的被關閉了，關閉的理由是：scoped設計的初衷就是讓樣式變得不可修改。但是由於我在業務中經常遇到需要修改有scoped屬性的元件，我就寫了一篇文章記錄一下這個問題，希望大家謹慎的使用這個屬性。
然而事實再一次證明了我的愚蠢，在vue-loader的文件中已經詳細的對這個問題做了分析，並且對我遇到這種問題給出瞭解決方法：vue-loader的深度作用選擇器。
因為我並沒有去深入瞭解這些問題，所以註定這篇文章被大夥拍磚，??????

解決方案：vue-loader之scoped-css

鑑於此，雖然這篇文章沒有什麼價值，但為了提醒我自己深究的意義，我對後面的內容做了保留，以下內容是最開始文章的原文，請大家忽略，上面的內容才是正文，沒錯，正文就是這麼少。

--------------------------------正文分割線，以下是無營養的內容--------------------------------

scoped實現私有化樣式的原理

為什麼會說，會增加複雜度？那麼我們先從的實現模組的原理說起。為了方便稱呼，我們假設把這種元件叫做模組私有元件，其他的未加scoped的叫做模組一般元件。
通過檢視DOM結構發現：vue通過在DOM結構以及css樣式上加唯一不重複的標記，以保證唯一，達到樣式私有化模組化的目的。具體的渲染結果是怎樣的，通過一個例子來說明。

公共元件button元件

一個公共元件button，為了樣式模組化，給其加上scoped屬性，

//button.vue
<template>
    <div class="button-warp">
        <button class="button">text</button>
    </div>
</template>
...
<style scoped>
    .button-warp{
        display:inline-block;
    }
    .button{
        padding: 5px 10px;
        font-size: 12px;
        border-radus: 2px;
    }
</style>複製程式碼

瀏覽器渲染button元件

button元件在瀏覽器渲染出的html部分和css部分分別為：

<div data-v-2311c06a class="button-warp">
    <button data-v-2311c06a class="button">text</button>
</div>複製程式碼
.button-warp[data-v-2311c06a]{
    display:inline-block;
}
.button[data-v-2311c06a]{
    padding: 5px 10px;
    font-size: 12px;
    border-radus: 2px;
}複製程式碼

從上面的字可以看出，新增了scoped屬性的元件，為了達到元件樣式模組化，做了兩個處理：

  • 給HTML的DOM節點加一個不重複data屬性(形如：data-v-2311c06a)來表示他的唯一性
  • 在每句css選擇器的末尾（編譯後的生成的css語句）加一個當前元件的data屬性選擇器（如[data-v-2311c06a]）來私有化樣式

大家都知道css樣式有一個優先順序的說法，scoped的這一操作，雖然達到了元件樣式模組化的目的，但是會造成一種後果：每個樣式的權重加重了：理論上我們要去修改這個樣式，需要更高的權重去覆蓋這個樣式。這是增加複雜度的其中一個維度。

其他元件引用button元件

上面分析了單個元件渲染後的結果,那麼元件互相呼叫之後會出現什麼樣的結果呢？，具體分兩種情況：模組一般元件引用模組私有元件（本質和模組私有元件引用模組一般元件一樣）；模組私有元件引用模組私有元件。

舉個例子：在元件content.vue中使用了button元件，那麼content.vue元件是否新增scoped屬性渲染出來的結果有什麼區別呢？

//content.vue
<template>
    <div class="content">
        <p class="title"></p>
        <!-- v-button假設是上面定義的元件 -->
        <v-button></v-button>
    </div>
</template>
...
<style>
    .content{
        width: 1200px;
        margin: 0 auto;
    }
    .content .button{
        border-raduis: 5px;
    }
</style>複製程式碼

模組一般元件（未新增scoped）引用模組私有元件

如果style上沒有加scoped屬性，那麼渲染出來html和css分別就是：

<div class="content">
    <p class="title"></p>
    <!-- v-button假設是上面定義的元件 -->
    <div data-v-2311c06a class="button-warp">
        <button data-v-2311c06a class="button">text</button>
    </div>
</div>複製程式碼
/*button.vue渲染出來的css*/
.button-warp[data-v-2311c06a]{
    display:inline-block;
}
.button[data-v-2311c06a]{
    padding: 5px 10px;
    font-size: 12px;
    border-radus: 2px;
}
/*content.vue渲染出來的css*/
.content{
    width: 1200px;
    margin: 0 auto;
}
.content .button{
    border-raduis: 5px;
}複製程式碼

可以看出，雖然在content元件中，修改了button的border-raduis屬性，但是由於權重關係，生效的依然是元件內部的樣式（此時是外部的樣式被覆蓋）。所以如果要達到修改樣式的目的，就必須加重我們要修改樣式的權重（增加選擇器層級，ID選擇器，並列選擇器，impotant等）

模組私有元件（新增scoped）引用模組私有元件

如果加了scoped屬性呢？按照開始分析出來的規則（事實也是這麼的）：
首先是在所有的DOM節點加上data屬性
然後在css選擇器尾部加上data屬性選擇器

那麼渲染出來html和css分別就是：

<div data-v-57bc25a0 class="content">
    <p data-v-57bc25a0 class="title"></p>
    <!-- v-button假設是上面定義的元件 -->
    <div data-v-57bc25a0 data-v-2311c06a class="button-warp">
        <button data-v-2311c06a class="button">text</button>
    </div>
</div>複製程式碼
/*button.vue渲染出來的css*/
.button-warp[data-v-2311c06a]{
    display:inline-block;
}
.button[data-v-2311c06a]{
    padding: 5px 10px;
    font-size: 12px;
    border-radus: 2px;
}
/*content.vue渲染出來的css*/
.content[data-v-57bc25a0]{
    width: 1200px;
    margin: 0 auto;
}
.content .button[data-v-57bc25a0]{
    border-raduis: 5px;
}複製程式碼

對於上面的兩種情況，可以明顯看出來渲染後的結果大不相同。
雖然我們在content新增了想要修改button元件的樣式的程式碼，但是仔細看，由於.content .button這句在末尾加的是content元件的scoped標記，最後這句其實根本作用不到我們想要的DOM節點上，所以這種情況我們在content內部寫的任何樣式都不會影響到button.vue元件，所以這就尷尬了。。。。
當然這個問題也是可以解決的，就是直接加全域性樣式可以修改到，但這勢必會影響全部地方的元件；所以需要另外一種方法在content.vue元件內再加一個不帶scoped屬性的style標籤，也就意味著要加兩個style，一個用於私有樣式，一個用於共有樣式。這肯定是有點shit的，並且這兩種解決方案都回避不了一個問題：權重！！！

//content.vue
<template>
    <div class="content">
        <p class="title"></p>
        <!-- v-button假設是上面定義的元件 -->
        <v-button></v-button>
    </div>
</template>
...
<style scoped>
    .content{
        width: 1200px;
        margin: 0 auto;
    }
</style>
<style>
    .content .button{
        border-raduis: 5px;
    }
</style>複製程式碼

這樣符合規範麼？貌似沒看到不能這麼寫，並且這麼寫也確實生效了。。。但這樣確實增加了思維的複雜度，有點苦惱啊。

總結scoped的渲染規則

總結一下scoped三條渲染規則

  • 給HTML的DOM節點加一個不重複data屬性(形如：data-v-2311c06a)來表示他的唯一性
  • 在每句css選擇器的末尾（編譯後的生成的css語句）加一個當前元件的data屬性選擇器（如[data-v-2311c06a]）來私有化樣式
  • 如果元件內部包含有其他元件，只會給其他元件的最外層標籤加上當前元件的data屬性

解決方案

對於引用的三方庫，如果對方使用了scoped，我們無力改變什麼，如果確實需要修改他的樣式最能在不加scoped的元件中修改樣式，或者全域性樣式直接修改，這很粗暴！
對於自己維護的元件，一定要想清楚，元件的樣式能否滿足所有的情況。如果確實需要加，無疑會增加使用這個元件的開發同學的工作！

當然對於這個問題，如果諸君有更好的解決方案，請諸君TELL ME一下下！

趣事

在使用scoped一定要謹慎scoped的這個特性，本人以為這是一個BUG，就去提了issue ，結果尤大很霸氣的回覆
scoped設計的初衷就是不能讓當前元件的樣式修改其他任何地方的樣式，因為設計如此。所以理所當然的這個issue已被幹掉。。。??????

相關文章