css命名衝突解決方法

看風景就發表於2018-09-03
CSS

css的命名衝突目前有幾種解決方法：

1.命名約定

人為的制定一下命名規則以避免衝突，例如字首，巢狀等

2.CSS in JS

在JavaScript中寫CSS，使用工具編譯為css，最常見的是styled-components

3.使用編譯工具改變css類名

最常見的是CSS Modules

4.HTML5的style scoped

可以部分解決css重名問題，缺陷很多

1. CSS Modules

CSS Modules只轉換 class 和 id 選擇器。在 js 中 styles 就像一個物件一樣使用，因此如果樣式名為 .site-wrapper，那麼在使用時應該寫成 styles['site-wrapper']。我們可以設定 css-loader 的 camelCase 引數為 true 來啟動自動轉換，這樣在 js 中就可以通過 styles.siteWrapper 使用

支援的工具有webpack的css-loader和postcss的postcss-modules

例如css-loader:

module: {
  loaders: [
    // ...
    {
      test: /\.css$/,
      loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"
    },
  ]
}

1. CSS Modules支援全域性和區域性作用域

:local(.title) {
  color: red;
}

:global(.title) {
  color: green;
}

2.CSS Modules在vue元件中可以直接使用，方式如下

<template>
  <p :class="$style.gray">
    Im gray
  </p>
</template>

<style module>
.gray {
  color: gray;
}
</style>

編譯為：

<p class="gray_3FI3s6uz">Im gray</p>

.gray_3FI3s6uz {
    color: gray;
}

由此可見，css module直接替換了類名，排除了使用者設定類名影響元件樣式的可能性。

這樣$style.red就可以當做一個變數，並且可以在js中使用，如下：

<script>
export default {
  created () {
    console.log(this.$style.gray)
    // -> "gray_3FI3s6uz"
    // 一個基於檔名和類名生成的識別符號
  }
}
</script>

我們可以看到，module在使用時多出了繫結和$style，如果你想更優雅，可以看一下這個vue-css-modules

2. css scoped

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

會轉換為：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

1. scoped在DOM中新增了一個唯一的屬性data-v-f3f3eg9，在css中也新增了一個屬性.example[data-v-f3f3eg9]
來保證唯一性，這樣如果外部使用了同名的class，依然有可能影響元件的樣式
2. scoped使用了屬性選擇器，會使得選擇的效率降低
3. scoped在html和css中都新增了雜湊值，會使得兩者的提交都變大，降低載入速度，影響渲染效率
4. scoped修改子元件的樣式，必須使用深度選擇器，形式如下：

<template>
  <div id="app">
    <gHeader></gHeader>
  </div>
</template>

<style lang="css" scoped>
  .gHeader /deep/ .name{ //第一種寫法
      color:red;
  }
  .gHeader {
      /deep/ .name{
        color:red;
      }
  }
  .gHeader >>> .name{   //第二種寫法
     color:red;
  }
</style>

<div class="gHeader">
  <div class="name"></div>
</div>

總體而言，CSS Modules優於scoped，提倡使用CSS Modules。

 

參考：https://www.cnblogs.com/macq/archive/2018/05/17/9051097.html
　　　https://blog.csdn.net/hezh1994/article/details/78899641
         http://www.ruanyifeng.com/blog/2016/06/css_modules.html

相關文章