面试题答案
一键面试CSS Modules
- 原理：通过将 CSS 类名进行局部作用域处理，生成唯一的类名。在构建过程中，每个 CSS 文件中的类名会被自动重命名，确保在整个项目中是唯一的，从而实现样式隔离。例如，定义
.button { color: red; }，构建后会变成类似.button_abcdef123 { color: red; }的唯一类名。 - 优点：
- 实现简单，不需要引入额外的复杂工具。
- 对现有 CSS 开发模式侵入性小，开发者容易上手。
- 支持模块化开发，样式只在对应的组件文件内生效，不会影响其他组件。
- 缺点：
- 命名仍然需要开发者手动管理，虽然有唯一化处理，但如果命名不规范，可能导致类名冗长复杂。
- 对于复杂的样式结构，如全局样式的复用等场景处理不够灵活。
styled - components
- 原理：使用 JavaScript 来创建样式组件，通过标签模板字符串语法将样式直接写在 JavaScript 代码中。在运行时，styled - components 会为每个组件生成唯一的 CSS 类名并注入到 DOM 中，实现样式隔离。例如：
const Button = styled.button${props => props.primary? 'background: blue' : 'background: gray'}; - 优点：
- 完全在 JavaScript 环境中编写样式，与组件的逻辑紧密结合，便于维护和管理。
- 支持动态样式，可根据组件的 props 动态改变样式，灵活性高。
- 自动生成唯一的类名，无需手动管理，减少命名冲突。
- 缺点：
- 学习成本相对较高，对于纯 CSS 开发者需要适应 JavaScript 与 CSS 混合的写法。
- 可能导致代码体积增加，因为每个组件的样式都通过 JavaScript 生成并注入。
CSS - in - JS Libraries（如 emotion）
- 原理：和 styled - components 类似，都是在 JavaScript 中编写样式。emotion 使用标签模板字符串或对象语法来定义样式，在运行时生成唯一的 CSS 并注入到 DOM 中。例如：
const buttonStyles = { color: 'white', background: 'blue' }; const Button = () => <button css={buttonStyles}>Click me</button>; - 优点：
- 提供了灵活的样式定义方式，既支持模板字符串也支持对象语法，方便不同习惯的开发者使用。
- 性能较好，通过优化生成的 CSS 代码，减少了不必要的重复。
- 同样实现了样式隔离，且在动态样式处理上表现出色。
- 缺点：
- 同样存在学习成本，需要熟悉 JavaScript 与 CSS 结合的开发方式。
- 与一些传统 CSS 工具和插件的兼容性可能存在问题。