样式冲突解决方案

 

Scoped CSS与CSS Module是两大解决CSS中不存在模块化缺陷的有效手段，其中CSS Module通过将class名称做编码转换的方式来保证唯一性，从而避免样式冲突，比如

 

 <h1 className={style.title}>

 

     Hello World

 

 </h1>

 

被转换为

 

 <h1 class="_3zyde4l1yATCOkgn-DBWEL">

 

     Hello World

 

 </h1>

 

而相应的

 

 .title {

 

   color: red;

 

 }

 

被转换为

 

 ._3zyde4l1yATCOkgn-DBWEL {

 

   color: red;

 

 }

 

由于转换过后发生同名的可能性实在是太小了，这样就保证了在开发阶段可以放心的使用各种样式名称，即便发生同名也不会造成冲突。

 

而Scoped CSS使用的是另一种解决方案 —— 在HTML标签上做文章，比如

 

 <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>

 

这样，example的样式被限定在具有data-v-f3f3eg9属性的HTML标签上，也间接保证了唯一性，避免冲突。

 

本来到此好好的，不过官方文档接下来的一段话反而让我迷惑了

 

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

 

看来还是得要做实验

 

准备

 

准备三个组件

 

Level1.vue

 

Level2.vue

 

Level3.vue

 

其中Level1.vue包含了Level2.vue，Level2.vue包含了Level3.vue

 

接着加上一些方便于辨析的样式，最终效果如下

 

样式继承

 

在三个组件中加上文本，以Level1.vue组件为例