webpack合并 CSS 后，不同组件的样式互相影响(兄弟组件样式影响)

Question

先声明: 个人对 css in js 的写法不太感冒

依赖: webpack, react

1. css-modules 没法很好消除组件间样式影响 (当使用路由时, 兄弟组件之间的样式会相互影响)

但是目前除了 css-modules 还有什么好的解决方法吗?

举例说明:

例如一个很普通的一个类 .icon。 app.js 是入口文件, nav.js(每个页面公用的导航栏) 与 home.js (主页) 是兄弟组件, 在与 nav.js 同文件夹下的 style.css 定义了

.icon{  display: inline-block;
    vertical-align: 0;}

,

同时也在与 home.js 同文件夹下的

.icon{  display: inline-block;
    width: 16px;
    height: 16px;
    opacity: 0.33;
    margin-right: 10px;}

,

由于是单页面, home.js 文件夹下的 style.css 的css优先级会高于 nav.js 文件夹下的 style.css 优先级, 导致 nav.js 文件夹下的 style.css 的样式被覆盖了。

Answer 1

我一般都是直接用less来层层嵌套一个组件的各级Dom样式的，当然层数多了性能会下降，那么可以考虑BEM，就是类名太长看着有点烦。

也不知道你这里说的组件是哪种组件，如果是公用的话统一维护一套，命名注意点就OK了；如果是某个页面特有的，那么大概可以考虑给页面起个id来营造个scope？