node.js - 继承 - React 和 Webpack 中的 CSS 模块

Question

假设我有一个名为 React 的模块，其中嵌套nav了多个<li>和标签。<a>使用 CSS 模块，我如何拥有“可继承”或“级联”规则，例如：

nav {
    background: red;

    > li > a {
        background: green;    
    }
}

看来我只能将一种样式直接应用于一个元素？

Answer 1

您的代码示例演示的不是继承或级联，而是选择器组合器的使用。

您的示例显示了支持嵌套的 SCSS 代码，因此：

nav {
    background: red;
    > li > a {
        background: green;
    }
}

被转译成：

nav {
    background: red;
}

nav > li > a {
    background: green;
}

CSS Modules 并没有阻止你使用这些组合器—— CSS Modules 是 CSS 的超集，所以第二个例子可以开箱即用。如果与 SCSS 一起使用，第一个示例将起作用。

可能值得注意的是，CSS 模块背后的许多理性认为上述 CSS 很差，至少有两个原因：

1. 定位标签
   • nav，li并且a都是非常通用的，因此除了最小的项目之外，它极有可能与其他规则发生冲突。
2. 高特异性
   • nav > li > a是不必要的特定（并且与标记结构紧密耦合）。为了使 CSS 成功扩展，通常认为降低特异性是一种很好的做法，因此选择器不必竞争（！重要）。