面试题：除了scoped，Vue还有哪些方式解决组件间样式冲突

Question

除了使用 scoped 来解决Vue组件间样式冲突外，还有哪些其他的解决方案？请详细描述每种方案的优缺点，并说明在何种场景下适合使用这些方案。

Answer 1

1. 使用BEM命名规范
   • 优点：
     • 样式具有很高的可读性和可维护性，通过命名结构可以清晰知道样式作用于哪个组件及元素。例如，.component - block__element--modifier，一看便知是component - block组件下的element元素且有modifier修饰。
     • 全局样式下也能有效避免样式冲突，因为命名唯一且有规律。
   • 缺点：
     • 命名冗长，编写样式时需要花费更多时间思考和书写。
     • 对于复杂组件，命名可能变得非常复杂。
   • 适用场景：适用于开发大型项目，团队协作开发时，大家遵循BEM规范，能有效避免样式冲突，提高代码可维护性。例如开发电商平台，组件众多，使用BEM规范可使样式管理更有序。
2. CSS Modules
   • 优点：
     • 本地作用域，每个组件的样式只在该组件内生效，避免全局污染，与scoped类似效果。
     • 支持样式模块化，可按需引入和复用，例如可以将通用的按钮样式单独抽成一个模块在多个组件中使用。
   • 缺点：
     • 配置相对复杂，尤其是在非Webpack等支持CSS Modules的构建工具环境下，使用起来有一定门槛。
     • 对动态样式支持不太友好，如通过JavaScript动态添加类名，可能需要额外处理。
   • 适用场景：适合基于Webpack等构建工具的项目开发，特别是注重样式模块化和局部作用域的场景。比如开发单页应用（SPA），组件之间样式隔离需求高，CSS Modules可很好满足。
3. 使用CSS-in-JS
   • 优点：
     • 真正做到样式和组件逻辑紧密结合，在JavaScript文件中编写样式，便于管理和维护，例如styled - components库。
     • 动态样式处理非常方便，可以根据组件的状态或props实时改变样式。
   • 缺点：
     • 学习成本较高，因为要在JavaScript中书写CSS，语法和传统CSS有差异。
     • 对纯CSS开发者不太友好，可能需要重新学习。
   • 适用场景：适用于注重组件逻辑和样式紧密耦合的项目，尤其是需要频繁根据组件状态改变样式的场景。例如开发交互性强的UI组件库，使用CSS - in - JS可方便实现各种动态样式效果。