scoped css可以直接在能跑起来的vue项目中使用。

使用方法：

使用scoped划分本地样式的结果编译结果如下：

即在元素中添加了一个唯一属性用来区分。

缺点

一、如果用户在别处定义了相同的类名，也许还是会影响到组件的样式。

二、根据css样式优先级的特性，scoped这种处理会造成每个样式的权重加重了：

即理论上我们要去修改这个样式，需要更高的权重去覆盖这个样式。

所以在引用包含scoped的第三方插件时如若需要修改样式则需要全局修改，而且要注意权重问题，0.0迫不得已再使用!important。

三、如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性：

所以一般父组件如果加了scoped，会比已经设置过自己样式的子组件内除最外层标签的内层标签的权重低，影响不到他们的样式。

不过也是可以通过如下方法影响到的：

四、scoped会使标签选择器渲染变慢很多倍

官方给了一些注意事项如下：

我们可以看到用标签选择器时scoped会严重降低性能，而使用class或id则不会。

css module

使用如下：

使用module的结果编译如下：

由此可见，css module直接替换了类名，排除了用户设置类名影响组件样式的可能性。

这样$style.red就可以当做一个变量，并且可以在js中使用，如下：

使用css module在keyframes中的问题