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

[pscl]

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

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

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

[learnshare]

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

[LyleRockkk]

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

[ChineseCabbage]

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

[pscl]

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

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

[ChineseCabbage]

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

[temporary]

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

[seki]

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

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

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

[DT27]

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

[Sivan]

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

[murmur]

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

[dremy]

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

[ayase252]

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

[isukkaw]

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

[shcolo]

用 scoped，然后样式穿透

[lingo]

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

[hoythan]

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


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

[myEzekiel]

加 scoped，外层加 class，加 deep

[hoythan]

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

[pscl]

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