关于CSS module scoped相关的知识

背景:

日常在使用react,vue做开发写CSS的时候,会不会遇到CSS污染呢?我和另外一个小伙伴写的css名称是一样的,结果我写的css被另外一个小伙伴给覆盖了,至少我就有遇到过,不过是几年前的事了,后面由于自己有一套命名规则,这类事故基本就没发生过了.css module也是为了防止css污染而产生的,它会给你的class名称加上hash字符串,避免命名污染.下面就用vue与react来实现相关的css隔离.

在vue里如何避免css污染?

  1. <style scoped>
      .self-repair{
        margin-top: 16px;
      }
    </style>

加上scoped经过编译后:

<div data-v-f9904c26=”” class=”self-repair”>

vue会给所在元素上加上data-v  随机字符串,浏览器生成的样式为:

.self-repair[data-v-f9904c26] {
    margin-top: 16px;
也自动为这个class多加了一个属性判断,这样便能保证其唯一性.
但是这个也同时也引起了一个问题,如果修改子组件里的css样式呢? 这个时候深度选择器就可以用上了,可以在要修改子组件的样式前加上 /deep/  或者 >>>,例如:
.self-repair>>> .van-button__text{
    color: red;
  }
.self-repair/deep/ .van-button__text{
    color: red;
  }
经过编译后的在浏览器上是这样的代码:
.self-repair[data-v-f9904c26] .van-button__text {

       color: red;

这样就可以穿透到子组件修改其样式了.
关于css module 这个在react与vue中都有使用到,原理都差不多,都是把css当成模块来引用
vue中的写法:
<style module>
  .selfRepair{
    margin-top: 16px;

  }
</style>
<div :class="$style.selfRepair">
  提交
</div>
这样便可以生效了,在style里加上module,这个webpack在编译的时候就知道如何去编译这段css了,通过编译后的代码如下:
.index_selfRepair_2B4Cz {

    margin-top: 16px;

也是带有hash值的,保证了唯一性.
在react也基本同理,把css引入,进而像引用函数方法一样把这个样式放到元素上,均可以保证样式的唯一性.
总结:
        自己在开发的过程中心面的scoped与module其实并不常用,因为有时候为了复用css,会把样式写到全局,如果用了module的方式就会很死板,必须要通过引入才能生效,那我日常开发是如何保证不重复呢?其实很简单,css也有自己的命名规范—-BEM,这个也只是针对新项目来说,对于一些老项目,别人从来不按照类似的规范来写,只能越填越乱,有时间为了表示唯一性,就加上了自己名字拼音的首字母.
Author: kaykie

发表评论

邮箱地址不会被公开。