Vue下是如何实现CSS私有作用域的

在web开发中,css是一个利器,它可以使得我们的页面更加炫酷华丽,但是在好用的前提下它也给迭代开发带来了一定的麻烦,比如样式相互覆盖或者样式影响到了未考虑的元素等,所以css的私有化就显得很有必要了。

但从严格意义上来说,css样式都是全局的,并不存在私有作用域这一说法,所以我们会通过各种各样的方式来模拟实现css的私有化。其中大部分都说基于BEM思想来实现的。

css私有化的实现原则是匹配规则尽可能精确。比如通过全局唯一的id来匹配或通过全局唯一的class来匹配,如每一个需要赋予样式的元素都添加一个独一无二的类名,然后只通过类名来书写样式,避免使用通配符、标签选择器和后代选择器等。

在css私有化领域中非常出名的是BEM(Block Element Modifier)命名规则,它的主要思想是:

只通过  块__元素--修饰符  来定义规则

BEM的好处:清晰易懂,看到类名就知道作用是什么,方便维护;

BEM的缺点:丑、长(服务器开启gzip后会小一点);

简单介绍BEM后,我们再看看vue下的实现。在vue单文件组件下,我们只需要在style标签上添加scoped属性就可以实现css私有化的功能,那么它又是如何实现的呢?

未添加scoped属性前
添加scoped属性后

可以清楚看到,添加scoped后,vue-loader加载器会做两个处理:

1、给html标签添加data-v-hash属性
2、给css样式添加[data-v-hash]选择器

这样一来,css样式就只对带有相应data-v-hash的标签起作用了,也就变现实现了css作用域的功能。

当然,在开发过程中,也会遇到父之间无法操作子组件样式的问题(比如在自己的页面上用了element-ui的el-button组件)

element-ui

如果父组件加了scoped属性,那么所以规则都会自动在最后追加data-v-hash选择器,自然找不到子组件的元素,此时我们需要把父组件的scoped去掉,或者使用深度作用选择器


参考链接:https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html

你可能感兴趣的:(Vue下是如何实现CSS私有作用域的)