HTML/CSS 工程化面试题
模拟真实面试场景，训练对 HTML 语义化、CSS 架构、响应式与性能的理解与表达。
一、基础题
1. 什么是语义化 HTML？为什么要语义化？基础
2. 解释 BEM 命名规范，并说明其优缺点。基础
3. CSS 中 `em`、`rem`、`px`、`vw` 有什么区别？如何选择？基础
4. 什么是 CSS 优先级？如何计算？基础
5. 如何实现一个三栏布局，中间自适应？基础
二、进阶题
6. 什么是 CSS 工程化？前端项目中为什么需要 CSS 工程化？进阶
7. 解释一下容器查询（Container Query）及其使用场景。进阶
8. 如何减少 CSS 引起的重排和重绘？进阶
9. Design Token 是什么？为什么现代设计系统需要它？进阶
三、高级题
10. 设计一个支持多主题的组件库样式体系。深入
参考答案要点：
- Token 层：定义原始 Token 和语义 Token，使用 CSS 变量。
- 主题切换：通过切换根元素的
data-theme属性修改变量值。 - 组件层：组件只引用语义 Token，不直接引用原始颜色。
- 构建层：使用 PostCSS 或构建工具处理变量回退。
- 文档与工具：在 Storybook 中提供主题切换器。
:root {
--color-primary: #3b82f6;
}
[data-theme="dark"] {
--color-primary: #60a5fa;
}
.btn-primary {
background: var(--color-primary);
}
评分维度：
- 设计 Token 分层（30%）
- 说明主题切换机制（30%）
- 考虑组件与工具链集成（25%）
- 表达清晰、有扩展性（15%）
11. 你如何评估和重构一个存在大量技术债的样式代码库？深入
参考答案要点：
- 现状评估：统计样式文件大小、重复规则、
!important数量、选择器平均深度。 - 建立基线：用 Lighthouse、Stylelint、PurgeCSS 等工具量化问题。
- 制定规范：命名约定、分层架构、Token 体系。
- 分阶段重构：
- 第一阶段：禁止新增
!important，引入变量。 - 第二阶段：拆分文件，建立组件样式。
- 第三阶段：响应式统一，主题化。
- 第一阶段：禁止新增
- 验证与监控：自动化检查、视觉回归测试、性能指标跟踪。
评分维度：
- 评估方法（25%）
- 规范制定（25%）
- 分阶段方案（35%）
- 验证机制（15%）
12. 在前端性能优化中，CSS 加载策略有哪些最佳实践？深入
参考答案要点：
- 关键 CSS 内联：将首屏所需 CSS 直接写入
<head>，减少渲染阻塞。 - 异步加载非关键 CSS：
<link rel="preload" as="style" href="non-critical.css"><link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
- 避免 @import：串行加载会阻塞解析。
- 压缩与去重：Minify、PurgeCSS、CSS 分割。
- 利用缓存：为 CSS 文件设置长期缓存，配合文件名 hash。
- 减少重排重绘：动画使用
transform/opacity。
评分维度：
- 关键 CSS 策略（25%）
- 异步加载方案（25%）
- 构建优化（25%）
- 运行时性能（25%）
标签：#html #css #面试题 #css架构 #响应式设计
最后更新：2026-06-25