通过添加父类，作用域 CSS 和“作用域”之间的区别答案

【问题标题】：Difference between scoped CSS and "scope" by adding a parent class通过添加父类，作用域 CSS 和“作用域”之间的区别
【发布时间】：2018-02-20 18:32:07
【问题描述】：

在使用 vue、vue-loader 和官方样板构建应用程序时，我注意到 scoped css 用于将 CSS 限制为当前组件。我看不出这有什么意义。当我觉得需要它时，我总是通过在包装类中定义它来“限定”css。

例如在 SASS 中：

.some-module {
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
}

那么我从使用作用域 CSS 中获得了什么？或者它只是实现相同目标的另一种方法？

【问题讨论】：

标签： css vue.js

【解决方案1】：

如果您在全局文件中添加 css，您可以导入任何位置，但是当您使用作用域 css 时，它只会将样式与相应的组件连接起来。

作用域 CSS

当标签具有 scoped 属性时，其 CSS 将仅适用于当前组件的元素。这类似于 Shadow DOM 中的样式封装。它带有一些警告，但不需要任何 polyfill。它是通过使用 PostCSS 对以下内容进行转换来实现的：

<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] 比.data-v-f3f3eg9.example 更好，我可以通过将所有组件类嵌套在一个非常复杂的包装类中来实现名称 =)

【解决方案2】：

正如w3.org所说“如果存在范围属性，则用户代理必须仅将指定的样式信息应用于样式元素的父元素（如果有），并且该元素的子节点。”

详细了解范围here 和here。

据我所知，<style scoped> 已从规范中删除，并且甚至支持它的浏览器也拉了它。

【讨论】：

【解决方案3】：

这里你的作用域是.some-module，但这个作用域是全局的，在其他网站或框架中可能是相同的，所以它并不是真正孤立的，它只是一个名称。

使用作用域 CSS，它更像是 iframe 中的 CSS。您可以共享您的组件，而不必担心该名称是否已被使用。您仅将样式封装在组件中。

定义经典 CSS 范围的“技巧”是在类前面加上应用程序/框架的名称。例如material design 在所有类前面加上.mdl- 以避免冲突。

【讨论】：

好吧，如果 .some-class 更改为例如 .data-v-f3f3eg9 会怎样。我不会获得同样数量的独特性吗？
这是一种创建范围的方法，是的，但它不是真正的范围，因为它仍在全局空间中。