在 CSS 文件中使用 :local 有什么好处？答案

【问题标题】：What is the benefit of using :local in CSS files?在 CSS 文件中使用 :local 有什么好处？
【发布时间】：2021-12-03 06:42:28
【问题描述】：

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

:local(.className) , 相当于.className

所以我从这篇文章中了解到，使用 :global 会将 CSS 规则置于全局级别，但如果 :local 等同于仅使用 .className，为什么还要使用它呢？似乎没有任何功能差异。

【问题讨论】：

标签： css reactjs webpack

【解决方案1】：

默认情况下，CSS 模块中的 CSS 是本地的。但是当你使用:global qualifier/block 时，如果你想切换回local CSS，那么你应该这样做。

假设您正在使用 global 模式使用 css-loader 选项的 CSS 模块：

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(selector) 之间的区别很微妙。前者是激进的（在它之后是散列选择器），后者是宽松的。如果我将 CSS Scope 用作本地，即 modules: true 或 modules: 'local'，则适用相同但相反的逻辑。

现在你的问题是，我为什么要在 :global 内部使用 :local 是当我有一些组件在某个或顶级组件内部时应该更改其样式。想象一下，.text 在.blogArticle 内时的大小应该是18px。否则这个组件应该默认呈现为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)。但是需要这样做是反模式/代码异味的一个很好的例子。

【讨论】：

谢谢Harshal，你能告诉我这会编译成什么CSS吗？因为您在全局中混合了本地类，这样布局似乎令人困惑。一个例子会很好地说明如何使用它，谢谢
@jobe 更新了答案。
这些编译成 2 个单独的类吗？如果单独使用它们，将 :local 放在 :global 中有什么意义，在您的示例中，一个似乎不会影响另一个。抱歉，不清楚
@jobe 我想你会问的。用更详细的解释更新了答案。
@jobe 确实正确。当使用:global，然后你想切换回:local，那么你将需要它。

【解决方案2】：

当您在多个组件中具有相同的 className 时会有所不同。例如，您有 compoment A 和 <div className={classes.wrapper}>，然后您有 Component B 和 <div className={classes.wrapper}。对于普通的 css，如果这些“包装器”类的 css 文件中的属性不同，那么最后一个将覆盖第一个。就像您的组件中的阻塞范围一样，并且不会“远离”组件。当然，您可以在 global.css 文件中添加将在整个项目中出现的所有其他属性

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

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

对于普通 css，最后一个属性将覆盖第一个 .wrapper，因此对于模块，div 中的样式 100% 不同。

【讨论】：