在CSS文件中使用:local的好处是什么?

Question

我一直在学习在React中使用CSS，并且遇到了CSS模块的概念，作为其中的一部分，我看到了这篇文章https://blog.fearcat.in/a?ID=00550-af5ece9b-eb49-4e13-8711-26e00c48c84e，其中讨论了在CSS文件中使用:global和:local，但它在某一点上提到了

:当地(.className)，相当于。classname

所以我从这篇文章中理解到，使用:global会把CSS规则放在全局级别，但是如果它相当于只使用。classname，为什么要使用:local呢?似乎没有任何功能上的区别。

Answer 1

默认情况下，CSS模块中的CSS为local。但是当你使用:global限定符/块，并且在其中，如果你想切换回localCSS，那么你应该这样做。

想象你正在使用global模式的CSS模块使用css-loader选项:

module: {
rules: [
{
test: /.css$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
// THIS IS IMPORTANT
modules: 'global'
}
}
],
}
]
}

对于上述配置，考虑以下示例:

.abc { color: red; }
:global(.abc) { color: green; }
:local .xyz { color: blue; }
:local(.xyz) .pqr { color: yellow; }
.abc :local .xyz .pqr { color: cyan; }

它将被编译成以下CSS:

/* Since it is global model for CSS modules, classname is not hashed */
.abc { color: red; }
/* .global(.abc) has no effect here */
.abc { color: green; }
/* :local .xyz means anything after :local will be hashed */
.dkzEiLgPjIar3vTOyiHv { color: blue; }
/* .local(.xyz) .pqr means only .xyz is hashed */
.dkzEiLgPjIar3vTOyiHv .pqr { color: yellow; }
/* Everything after the :local is hashed i.e. both .xyz and .pqr */
.abc .dkzEiLgPjIar3vTOyiHv .k3SKPTpkzRcircxhU4Dd { color: cyan; }

:local和:local(选择器)之间的区别是微妙的。前者是激进的(在它后面散列选择器)，后者是宽松的。如果我使用CSS作用域作为本地，即modules: true或modules: 'local'，则适用相同但相反的逻辑。

现在到你的问题，为什么我要使用:local内部:global是当我有一些组件的样式应该改变时，它是在一些或顶级组件。想象一下，.text应该是18px当它在.blogArticle内时，它的大小。否则，该组件应该默认呈现为14px:

:local .text { font-size: 14px; }
.blogArticle :local(.text) { font-size: 18px ;}

但总的来说，你是对的。您很少需要将local放在global中。这样做的唯一原因是您正在将一些遗留的复杂CSS迁移到较新的代码库，并且希望将相关的CSS块保持在一起以获得更好的可读性。最后但并非最不重要的是，考虑像这样深嵌套的遗留CSS:

.abc :local .xyz .pqr :global(.def) {
color: cyan;
}

我启动global，然后切换到:local，然后再次切换到:global(.def)。但是需要这样做是一个反模式/代码气味的好例子。

Answer 2

在多个组件中使用相同的className是有区别的。例如，你有compoment A和<div className={classes.wrapper}>，然后你有Component B和<div className={classes.wrapper}。对于普通的css，如果在css文件中的属性"wrapper"类将会不同，最后一个会覆盖第一个。就像在你的组件中阻塞了作用域，并且没有"生命"。远离组件。当然，你也可以在global。css文件中添加其他属性它们会出现在整个项目中

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

使用正常的css，最后的属性将覆盖第一个.wrapper，所以与模块是100%不相同的样式在你的div。