继承 - React和Webpack中的CSS模块

Question

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

nav {
    background: red;

    > li > a {
        background: green;    
    }
}

似乎我只能将一种风格直接应用于一个元素？

Answer 1

您的代码示例不是inheritance或the cascade，而是使用了选择器combinators。

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

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

被转化为：

nav {
    background: red;
}

nav > li > a {
    background: green;
}

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

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

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