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

在使用vue构建应用程序时，我注意到vue loader和官方样板文件

scoped

css用于将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，则可以在任何位置导入，但在使用范围css时，它将仅将样式与相应组件连接

请参考更多信息

作用域CSS

当标记具有scoped属性时，其CSS将仅应用于当前组件的元素。这类似于影子DOM中的样式封装。它附带了一些警告，但不需要任何多边形填充。通过使用POSTSS转换以下内容来实现：

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

.举例{
颜色：红色；
}
你好

具体如下：

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

.示例[数据-v-F3EG9]{
颜色：红色；
}
你好

这里您的范围是

。一些模块

但是这个范围是全局的，在其他网站或框架中可能是相同的，所以它不是真正孤立的，它只是一个名称

有了作用域CSS，它更像是iframe中的CSS。您可以共享您的组件，而无需担心名称是否已被使用。您只能在组件中封装样式

---

定义经典CSS的一个“黑客”是在类前面加上应用程序/框架的名称。例如，使用

.mdl-

作为所有类的前缀，以避免冲突。

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

了解更多有关scope&的信息

据我所知，

已从规范和 即使是支持它的浏览器也将其删除

---

好吧，如果。某个类被更改为例如。data-v-f3eg9。我不会获得同样数量的唯一性吗？这是一种创建范围的方法是的，但它不是一个真正的范围，因为它仍然在全局空间中。我了解它是如何工作的，我不明白的是为什么

。示例[data-v-f3eg9]

比

好。data-v-f3eg9。示例

我只需将所有组件类嵌套在一个包装类中，并使用一个非常复杂的名称=）