V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
pscl
V2EX  ›  问与答

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

  •  
  •   pscl · 2020-03-09 14:23:54 +08:00 · 2551 次点击
    这是一个创建于 1749 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    19 条回复    2020-03-10 10:12:50 +08:00
    learnshare
        1
    learnshare  
       2020-03-09 14:35:41 +08:00
    建立 CSS 规范,任何一条属性都必须限制作用域
    LyleRockkk
        2
    LyleRockkk  
       2020-03-09 14:39:51 +08:00
    这种情况,还是让用组件的人规范一点吧。 像这种直接给 div 设置 display 的,很明显不规范
    ChineseCabbage
        3
    ChineseCabbage  
       2020-03-09 14:49:19 +08:00
    最简单粗暴的方法,给你的组件设置 scoped,再在 style 第一行将你组件里面的 div 的 display 设置为 block ;
    pscl
        4
    pscl  
    OP
       2020-03-09 14:58:20 +08:00
    @learnshare
    @LyleRockkk 感谢,确实我也知道它这不规范,不过这办法也只能作为兜底的存在了,改遗留问题有点麻烦。。。

    @ChineseCabbage 感谢,我是设置了 scoped,然后按你说的加 block,不过这个 block 执行顺序在外层的 div 之前,所以还是被覆盖掉了。。
    ChineseCabbage
        5
    ChineseCabbage  
       2020-03-09 15:03:54 +08:00
    @pscl 加个类名 ,增加权重就好了 .xxxx div { xxx }
    temporary
        6
    temporary  
       2020-03-09 15:05:21 +08:00
    @pscl #4 选择器多写几个类名加权重 实在不行就加 important
    但这正确的应该是他改自己的吧 自己不控制影响范围
    seki
        7
    seki  
       2020-03-09 15:06:41 +08:00
    首先不赞成全局轰成 flex,就算轰成 flex,全弄成居中也不合适

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

    .foo.bar 和 .foo .bar 这样的就会比 .bar 要高
    DT27
        8
    DT27  
       2020-03-09 15:08:54 +08:00
    人家要全局设置,你怎么管的着。。。
    Sivan
        9
    Sivan  
       2020-03-09 15:14:30 +08:00
    你示例中的这种代码耶稣都救不了你,用 Web Components 写组件做隔离吧。临时兜底的话就在你的组件根基,把能发现的污染代码全部重置一遍。
    murmur
        10
    murmur  
       2020-03-09 15:17:09 +08:00
    要么 scope 要么带前缀,全局 css 只允许负责人专门做,如果还执行不了,建议打一顿
    dremy
        11
    dremy  
       2020-03-09 15:40:30 +08:00 via iPhone
    直接写 style 属性就好啦,除非别人加上!important 才能覆盖
    ayase252
        12
    ayase252  
       2020-03-09 15:43:43 +08:00 via iPhone
    vue 的话直接 scope 啊.....全局的话有挺多规范的,像 BEM
    isukkaw
        13
    isukkaw  
       2020-03-09 15:52:56 +08:00 via Android
    真正可以规避污染的办法只有 iframe,剩下的只能想想奇技淫巧搞点提高优先级的办法。
    shcolo
        14
    shcolo  
       2020-03-09 16:14:55 +08:00
    用 scoped,然后样式穿透
    lingo
        15
    lingo  
       2020-03-09 16:29:47 +08:00
    不带 scope 还选择器直接写 div,浪的飞起!
    hoythan
        16
    hoythan  
       2020-03-09 16:38:11 +08:00
    vue 里面写
    <template>
    <div class="page">
    ...
    </div>
    </template>


    .page div {
    display: block;
    justify-content: initial
    }
    myEzekiel
        17
    myEzekiel  
       2020-03-09 16:38:34 +08:00
    加 scoped,外层加 class,加 deep
    hoythan
        18
    hoythan  
       2020-03-09 16:38:43 +08:00
    不建议加 important,否则你下面的每个 div 都要被覆盖。
    pscl
        19
    pscl  
    OP
       2020-03-10 10:12:50 +08:00
    @ChineseCabbage
    @temporary
    @seki
    @DT27
    @Sivan
    @murmur
    @dremy
    @ayase252
    @isukkaw
    @shcolo
    @lingo
    @hoythan
    @myEzekiel
    感谢诸位的思路,已经准备让上层使用规范点来避免这种问题的再次发生了,:-)。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2681 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 15:10 · PVG 23:10 · LAX 07:10 · JFK 10:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.