前端UnoCSS面试题及参考答案

UnoCSS 的核心设计理念是什么？它与传统 CSS 框架（如 Bootstrap）有何本质区别？

UnoCSS 的核心设计理念围绕原子化和灵活性展开。原子化意味着将 CSS 样式拆分成最小的、不可再分的原子类，每个类只负责单一的样式属性，例如控制字体大小、颜色、边距等。这种设计让开发者能够像搭积木一样，通过组合不同的原子类来构建复杂的样式。灵活性则体现在 UnoCSS 高度可定制，开发者可以根据项目需求自定义规则、变体和预设，无需受限于框架的默认设置。

与传统 CSS 框架如 Bootstrap 相比，存在多方面本质区别。在设计模式上，Bootstrap 采用组件化设计，提供了一系列预定义的组件，如导航栏、按钮组、表单等，开发者直接使用这些组件并进行少量定制即可快速搭建页面。而 UnoCSS 专注于原子化，不提供预定义组件，开发者需要自己组合原子类来创建组件。

从代码体积来看，Bootstrap 包含大量预定义组件和样式，代码体积较大，即使只使用部分组件，也会引入整个框架的代码，不利于项目的轻量化。UnoCSS 采用按需生成机制，只有在代码中实际使用到的样式才会被生成，大大减少了最终打包的 CSS 体积。

在定制性方面，Bootstrap 的定制相对复杂，需要修改 Sass 变量或重写