继承 - React 和 Webpack 中的 CSS 模块答案

【问题标题】：Inheritence - CSS Modules in React and Webpack继承 - React 和 Webpack 中的 CSS 模块
【发布时间】：2016-04-08 21:11:07
【问题描述】：

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

nav {
    background: red;

    > li > a {
        background: green;    
    }
}

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

【问题讨论】：

【解决方案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 很差，至少有两个原因：

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

【讨论】：