What is the benefit of using :local in CSS files?-CodePudding

I've been learning about using CSS in React and have come across the idea of CSS modules, as part of that I came across this article https://blog.fearcat.in/a?ID=00550-af5ece9b-eb49-4e13-8711-26e00c48c84e which discusses using :global and :local in CSS files but it mentions this at one point

:local(.className) , Which is equivalent to .className

So I understand from this article that using :global would put that CSS rule at the global level, but why use :local if it is equivalent to just having .className? there doesn't seem to be any functional difference.

CodePudding user response：

By default, the CSS in CSS modules is local. But when you use :global qualifier/block, and inside that, if you want to switch back to local CSS, then you should it:

:global {
   .someClass1 {
    ...
  }
  :local(.someClass2) {
    
  }
}

CodePudding user response：

There is a difference when you will have the same className in multiple components. For example you have the compoment A with <div className={classes.wrapper}> and then you have Component B with <div className={classes.wrapper}. With normal css the if the attributes in css file of those "wrapper" class will be different will overide the first one by the last one. Is like blocked scoped in your component and dont "lives" away from the component. And of course you can add every other attribute in global.css file that will occur in the whole project

.wrapper{                //component A
  display:flex;
  flex-direction:column;
}

.wrapper {              //component B
  display:flex;
  flex-direction:column;
  width:60%;
}

With normal css the last attributes will overide the first .wrapper so with modules is 100% not the same style in your div.