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

This topic created in 2295 days ago, the information mentioned may be changed or developed.

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

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

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

组件

CSS

请问

样式

19 replies • 2020-03-10 10:12:50 +08:00

learnshare

Mar 9, 2020

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

LyleRockkk

Mar 9, 2020

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

ChineseCabbage

Mar 9, 2020

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

pscl

Mar 9, 2020

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

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

ChineseCabbage

Mar 9, 2020

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

temporary

Mar 9, 2020

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

seki

Mar 9, 2020

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

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

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

naver1

Mar 9, 2020

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

Sivan

Mar 9, 2020

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

murmur

Mar 9, 2020

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

dremy

Mar 9, 2020 via iPhone

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

ayase252

Mar 9, 2020 via iPhone

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

isukkaw

Mar 9, 2020 via Android

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

ofDamon

Mar 9, 2020

用 scoped，然后样式穿透

lingo

Mar 9, 2020

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

hoythan

Mar 9, 2020

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

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

myEzekiel

Mar 9, 2020

加 scoped，外层加 class，加 deep

hoythan

Mar 9, 2020

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

pscl

Mar 10, 2020

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