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