CSS多类名作用及CSS Modules下多类名渲染差异咨询

• 第一是做样式职责拆分，减少重复代码。拿你贴的代码举例，classes.paper可以统一承载Paper组件所有公共基础样式：包括默认定位、阴影、圆角、宽高、过渡动效配置等不管组件展开/收起都要生效的规则，不需要在每个状态类里重复写这些通用属性。classes.paperShift只需要单独写位移相关的属性（比如横向偏移值、z-index调整等），代码体积更小，后续改基础样式不用挨个状态类修改。
• 第二是提升样式复用性。像位移、显隐、主题色这类通用样式规则，可以抽成独立类，给侧边栏、抽屉、悬浮面板等不同组件复用，不用每个组件单独写一套相同逻辑的样式。
• 第三是降低状态逻辑和样式的耦合度。你不需要为了一个状态变化重新写一整套组件样式，只需要按需挂载/移除对应的状态类就行，JS里只需要维护状态布尔值，不用写复杂的样式拼接判断。

CSS Modules本身只是通过类名哈希化解决全局样式污染问题，底层完全遵循浏览器原生CSS的渲染规则，没有额外黑魔法：

1. 浏览器渲染元素样式时，会把元素挂载的所有类对应的CSS规则全部收集，按CSS权重、书写顺序合并后应用到元素上。
2. 你写的模板字符串逻辑本质是做类名的动态挂载：
   • 当open为false时，元素上只会挂载paper对应的哈希类名，仅应用基础样式，保持默认位置不变；
   • 当open为true时，元素会同时挂载paper和paperShift两个类，两个类的样式会合并生效。因为两个类的选择器权重完全一致，写在后面的paperShift里的位移规则（比如transform: translateX(240px)），会覆盖paper类里默认的位置规则（比如transform: translateX(0)），最终呈现出位移后的效果。

小提示：你现在的写法在open为false时会往className里插入false字符串，大部分现代框架和组件库会自动过滤掉类名字段里的布尔值、undefined值，不会造成样式异常；如果要做更严谨的类名拼接，可以用专门的类名处理工具实现，不用手动拼接模板字符串。

内容的提问来源于stack exchange，提问作者user19251203