我想了解将CSS模块与React/Vue一起使用的好处。
目前在我公司的开发人员使用以下开发：
return (
<div className={styles.User}>
<div className={styles.name}>...</div>
</div>
)
当使用CSS模块文件时，类似于：
.User {
background-color: var(--bg-color, red);
.name { color: white; }
}
HTML输出应该是什么，例如：
<div class="_User_xyz_1">
<div class="_name_abc_1">...</div>
</div>
这对我来说有点困惑，因为这个">编码"；所有的类名，如果我需要进行父级修改，这会带来很大的困难。例如：
<div class="SomeParent">
<User name="David" />
</div>
因此：
.SomeParent {
> .User {
--bg-color: blue; // Will not words, because .User is not .User, in fact.
}
}
在个人项目中，我更喜欢将模板的主元素命名为"；主要类别"；，主。例如：
return (
<div className="User">
<div className="name">...</div>
</div>
)
和常规CSS/SCSS：
.User {
background-color: var(--bg-color, red);
> .name { color: white; }
}
因此，父元素的代码可以在预期和受控的条件下影响子元素。
我的问题是：使用我公司使用的我看不到的模型有什么好处？我是不是用了一个更多的">中等/原始"；模型
另一种可能性是：即使类的名称以这种方式编码，我也可以通过父元素修改子元素的样式吗？
CSS模块为每种样式生成自定义类名，从而防止您在解决方案中遇到问题。因为每个css模块样式都有自己的类名，所以不能意外地更改子组件样式。
hash className，防止其他开发人员快速反编译您的样式方案。
SCSS模块样式由非常独特的类应用，这得益于哈希，因此没有意外样式冲突的真正风险。这允许您使用简短而有意义的类名，而不必考虑任何可能与之冲突的全局样式。您可以自信地进行风格设计，而不用担心在应用程序的其他地方破坏东西。
理论上，您可以添加未通过scs模块应用的通用类名，为父组件提供一个可以使用的类名。
我个人认为React组件应该尽可能模块化和通用。我认为应该从一个组件导出类型。样式应该是内联的，或者位于样式对象的底部。