CSS 最佳实践

学完了 CSS 的所有核心主题，这一篇从工程角度总结最佳实践，帮你写出可维护、高性能、可扩展的 CSS 代码。

1. 命名约定：BEM

BEM（Block Element Modifier）是 CSS 命名方法中最流行的一种。它让类名具有清晰的结构语义：

css

/* Block（块） */
.card { }

/* Element（元素）—— Block 的组成部分 */
.card__title { }
.card__body { }
.card__footer { }

/* Modifier（修饰符）—— 块的变体 */
.card--featured { }
.card--compact { }
.card__title--large { }

html

<div class="card card--featured">
  <h2 class="card__title card__title--large">标题</h2>
  <div class="card__body">内容</div>
  <div class="card__footer">底栏</div>
</div>

BEM 的核心价值：看到类名就能知道元素之间的关系和角色。

BEM 不是唯一的选择——你也可以用其他方法论（如 SMACSS、OOCSS）或现代方案（CSS Modules、Tailwind 的 utility-first）。关键是保持项目内一致。对于中小项目，简单的 .nav-link、.is-active 命名也足够清晰。

2. 文件组织

text

styles/
├── tokens.css       # 设计令牌（CSS 变量）
├── reset.css        # 浏览器默认样式重置
├── base.css         # 基础元素样式（body, h1-h6, a, p）
├── layout.css       # 布局组件（header, footer, grid）
├── components/      # UI 组件样式
│   ├── button.css
│   ├── card.css
│   └── modal.css
└── utilities.css    # 工具类（.hidden, .sr-only）

核心原则：一个文件做好一件事。不要把所有样式写在一个几千行的 style.css 里。如果项目使用了组件框架（React、Vue），样式应就近放置在组件目录中。

3. 选择器策略

css

/* ✅ 优先使用 class */
.nav-link { color: #2563eb; }

/* ⚠️ 必要时使用类型选择器（全局基础样式） */
h1 { font-size: 2rem; }

/* ⚠️ 属性选择器适合状态 */
[aria-current="page"] { font-weight: 700; }

/* ❌ 避免深层嵌套 */
.header .nav .menu .item .link { color: blue; }

/* ❌ 避免 ID 选择器做样式 */
#main-title { font-size: 3rem; }

选择器不超过 3 层嵌套。过深的选择器让优先级难以管理，也让样式与 HTML 结构强耦合——移动一个元素到别的位置就可能破坏样式。

4. CSS 变量体系

用 CSS 变量建立设计令牌的一级和二级抽象（见 CSS 变量章节）：

css

:root {
  /* 一级：原始色板 */
  --blue-500: #2563eb;
  --blue-600: #1d4ed8;
  --red-500: #ef4444;
  --gray-50: #f8fafc;
  --gray-900: #1e293b;

  /* 二级：语义化令牌 */
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-danger: var(--red-500);
  --color-bg: var(--gray-50);
  --color-text: var(--gray-900);
}

一级色板定义所有可用颜色；二级语义令牌赋予颜色含义。更换主题时只需改二级令牌的映射。

5. 布局策略

css

/* 优先使用现代布局 */
/* ✅ Flexbox: 一维排列 */
.nav { display: flex; gap: 1rem; }

/* ✅ Grid: 二维网格 */
.page { display: grid; grid-template-columns: 250px 1fr; }

/* ⚠️ 传统布局仅在必要时使用 */
/* 图片文字环绕 → float */
/* 复杂覆盖层 → absolute/fixed */
/* 兼容旧浏览器 → table-cell */

不要用 float 和 position 来做宏观页面布局——那是 Flexbox 和 Grid 出现之前的无奈之选。float 仅适用于文字环绕图片等特定场景。

6. 响应式策略

css

/* ✅ 移动优先 + min-width */
.card { padding: 1rem; }
@media (min-width: 768px) {
  .card { padding: 2rem; }
}

/* ✅ 利用内在响应式特性 */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.title { font-size: clamp(1.5rem, 4vw, 3rem); }
.container { width: min(100% - 2rem, 1200px); }

/* ❌ 不要为每个设备写独立的断点和样式 */
/* ❌ 不要用 device-width（device-pixel-ratio 差异太大） */

7. 性能清单

优化项	做法
减少重排（reflow）	动画仅用 `transform` 和 `opacity`
减少选择器复杂度	避免深层嵌套和通配选择器
避免 `@import`	用 `<link>` 并行加载
关键 CSS 内联	首屏关键样式放在 `<style>` 中
压缩 CSS	构建工具自动处理
移除无用 CSS	使用 PurgeCSS 或框架的 tree-shaking
字体加载策略	使用 `font-display: swap`

8. 常见陷阱

陷阱	解决
margin 叠加（collapse）	用 `padding` 或 `border` 阻隔，或用 Flexbox/Grid
`z-index` 不生效	检查元素是否是定位元素、是否在同一个层叠上下文中
`height: 100%` 无效	确保父元素有明确高度，或用 `min-height: 100vh`
`inline-block` 间隙	父元素 `font-size: 0` 后用子元素恢复，或改用 Flexbox
`overflow: hidden` 裁剪了 sticky	sticky 父元素不能设 overflow hidden
`100vw` 出现水平滚动条	用 `100%` 替代，或 `width: 100vw; max-width: 100%`
动画抖动（jank）	避免对触发布局变化的属性设置动画

9. 重置样式

每个项目都应该有一个轻量的 CSS reset：

css

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%; /* 防止 iOS 横屏时字体放大 */
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;     /* 消除行内元素底部 descender 间隙（图片底部 3-4px 留白） */
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit; /* 表单元素默认不继承字体 */
}

10. 工具与资源

工具	用途
Can I Use	浏览器兼容性查询
CSS-Tricks	CSS 教程和技巧
MDN CSS Reference	权威参考文档
Chrome DevTools	调试布局、动画、盒模型
Easing Functions	缓动函数可视化
CSS Grid Generator	Grid 可视化生成
Specificity Calculator	优先级计算器

HTML + CSS + JavaScript：下一步

完成 CSS 教程后，建立起了页面样式的能力。配合 HTML（结构）和 JavaScript（交互），你就拥有了构建完整网页的全部技能。

建议下一步：

巩固实践 — 综合 HTML 和 CSS 知识，完成几个静态页面练习（个人主页、产品展示页、博客列表页）
JavaScript 教程 — 学习如何给页面添加交互逻辑
持续练习 — CSS 的语感需要在大量实践中培养。遇到不理想的效果时，打开 DevTools 逐属性调试是最有效的学习方式

“CSS is easy to learn but hard to master.” — 规则是简单的，但组合起来创造出优雅、强健的界面，需要持续的练习和品味。