CSS 工程化方案
CSS 预处理器是什么？
- CSS 预处理器: 扩展 CSS 语法的编译语言;
- 作用: 提升 CSS 的编程能力、复用性与可维护性;
- 代价: 需编译步骤, 生成 CSS 后才被浏览器使用;
常见预处理器与特性有哪些？
- 常见: Sass、Less、Stylus;
- 特性: 变量、作用域、代码混入、嵌套、模块化;
CSS in JS 是什么？
- 定义: 在 JS 中定义样式, 运行时动态生成 CSS;
- 集成: 样式与组件逻辑放在同一文件;
CSS in JS 的优缺点是什么？
| 优点 | 缺点 |
|---|---|
| 无全局样式冲突, 减少命名冲突 | 运行时生成, 降低渲染性能 |
| 实现动态样式 | 增加包体积 |
| 结合 JS, 便于组件化与模块化 | 调试困难 |
原子化 CSS 是什么？
- 定义: 把样式拆为小型独立单元类;
- 用法: 组合原子类拼出复杂样式;
- 代表: Tailwind 等工具类方案;
原子化 CSS 的优缺点是什么？
| 优点 | 缺点 |
|---|---|
| 类名固定唯一, 减少命名负担与冲突 | 记忆负担 |
| 复用性强, 减小包体积, 提高渲染性能 | 复杂样式类名过多, 难读难维护 |
| 自带设计系统, 样式统一 | |
| 便于状态管理与响应式设计 |