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

Question

当使用 vue、vue-loader 和官方样板构建应用程序时，我注意到scopedcss 用于将 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 可以获得什么好处呢？或者这只是实现同样目标的另一种方法？

Answer 1

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

请参阅https://vue-loader.vuejs.org/en/features/scoped-css.html了解更多信息

作用域 CSS

当标签具有scoped属性时，其CSS将仅应用于当前组件的元素。这类似于 Shadow DOM 中的样式封装。它有一些警告，但不需要任何填充。它是通过使用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>