【组件模块化2】css模块化

这是css模块化的写法

仔细观察有什么不同

仔细观察不同

这里的css在style处写了module。同时上面用的:class绑定.home这个样式，而不是class。

我们平时的写法是这样的:

平时的写法

同时在浏览器中，看到的是这样的

这里显示的是class="home"

用了css模块化以后：

注意看不同

这里的class不再是home。多了一长串东西。css样式也变了

区别

• css优先级

scoped处理会造成每个样式的权重加重，因为除了使用类名还使用了标签选择器，如demo-c[data-v-48baf84c]。module不会加重权重。

• 渲染

scoped使用了标签选择器，渲染更慢。

• 覆盖

若用户使用第三方库一样的类名，可能会影响到第三方组件的样式。

• 官方说明

具体可见这里：戳我