前端小白耿直提问，组件 css 被污染的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1720 天前的主题，其中的信息可能已经有所发展或是发生改变。

请问，我写了个 vue 组件，被别人引入到其他页面中使用时，他在外层写了个

div {
  display: flex;
  justify-content: center;
}

我组件里面的样式就被带崩了，请问这种情况怎么处理呢？就是完全不受外面的这些样式影响，找了一些重置 css 的方法都不行。

组件

CSS

请问

样式

19 条回复 • 2020-03-10 10:12:50 +08:00

learnshare

2020-03-09 14:35:41 +08:00

建立 CSS 规范，任何一条属性都必须限制作用域

LyleRockkk

2020-03-09 14:39:51 +08:00

这种情况，还是让用组件的人规范一点吧。像这种直接给 div 设置 display 的，很明显不规范

ChineseCabbage

2020-03-09 14:49:19 +08:00

最简单粗暴的方法，给你的组件设置 scoped，再在 style 第一行将你组件里面的 div 的 display 设置为 block ；

pscl

2020-03-09 14:58:20 +08:00

@learnshare
@LyleRockkk 感谢，确实我也知道它这不规范，不过这办法也只能作为兜底的存在了，改遗留问题有点麻烦。。。

@ChineseCabbage 感谢，我是设置了 scoped，然后按你说的加 block，不过这个 block 执行顺序在外层的 div 之前，所以还是被覆盖掉了。。

ChineseCabbage

2020-03-09 15:03:54 +08:00

@pscl 加个类名，增加权重就好了 .xxxx div { xxx }

temporary

2020-03-09 15:05:21 +08:00

@pscl #4 选择器多写几个类名加权重实在不行就加 important
但这正确的应该是他改自己的吧自己不控制影响范围

seki

2020-03-09 15:06:41 +08:00

首先不赞成全局轰成 flex，就算轰成 flex，全弄成居中也不合适

然后多层级选择器的优先度比单层级要高的

.foo.bar 和 .foo .bar 这样的就会比 .bar 要高

DT27

2020-03-09 15:08:54 +08:00

人家要全局设置，你怎么管的着。。。

Sivan

2020-03-09 15:14:30 +08:00

你示例中的这种代码耶稣都救不了你，用 Web Components 写组件做隔离吧。临时兜底的话就在你的组件根基，把能发现的污染代码全部重置一遍。

murmur

2020-03-09 15:17:09 +08:00

要么 scope 要么带前缀，全局 css 只允许负责人专门做，如果还执行不了，建议打一顿

dremy

2020-03-09 15:40:30 +08:00 via iPhone

直接写 style 属性就好啦，除非别人加上!important 才能覆盖

ayase252

2020-03-09 15:43:43 +08:00 via iPhone

vue 的话直接 scope 啊.....全局的话有挺多规范的，像 BEM

isukkaw

2020-03-09 15:52:56 +08:00 via Android

真正可以规避污染的办法只有 iframe，剩下的只能想想奇技淫巧搞点提高优先级的办法。

shcolo

2020-03-09 16:14:55 +08:00

用 scoped，然后样式穿透

lingo

2020-03-09 16:29:47 +08:00

不带 scope 还选择器直接写 div，浪的飞起！

hoythan

2020-03-09 16:38:11 +08:00

vue 里面写
<template>
<div class="page">
...
</div>
</template>

.page div {
display: block;
justify-content: initial
}

myEzekiel

2020-03-09 16:38:34 +08:00

加 scoped，外层加 class，加 deep

hoythan

2020-03-09 16:38:43 +08:00

不建议加 important，否则你下面的每个 div 都要被覆盖。

pscl

2020-03-10 10:12:50 +08:00

@ChineseCabbage
@temporary
@seki
@DT27
@Sivan
@murmur
@dremy
@ayase252
@isukkaw
@shcolo
@lingo
@hoythan
@myEzekiel
感谢诸位的思路，已经准备让上层使用规范点来避免这种问题的再次发生了，：-）。