讲解
学完 24 章，最后把散落的经验收成一份工程清单。第一是「开局的三个默认动作」：全站 box-sizing: border-box；合理的现代 reset（至少清掉 body 的 margin、让 img 默认 max-width: 100% 自适应）；:root 上定义设计令牌（颜色、间距、圆角、字号阶梯），业务代码里尽量引用变量而不是散落魔法数字。这三件事做完，后续所有样式都在正轨上。
第二是「保持低优先级与可预测性」：全程用类选择器，避免 ID 选择器和元素选择器堆叠长链；优先级能一层解决就不写两层；绝不轻易 !important（它唯一合理的用途是覆盖第三方组件或行内样式）。命名推荐 BEM 思路（block__element--modifier，如 card__title--large）或任何团队统一的约定——约定本身比流派重要。工具类方案（Tailwind 的 flex pt-4 text-center）和 CSS Modules（局部类名）是另外两条主流路线，各有适用场景，本教程教的原生 CSS 是理解它们全部的基础。
第三是「用工具而不是靠记忆」：DevTools 是 CSS 开发的主战场——Elements 面板看盒模型图、划掉的声明（无效或被覆盖）、Computed 面板看最终值、强制 :hover 状态调试悬停样式；新特性上 caniuse.com 查支持度；拿不准的属性查 MDN。最后是几条大实话：布局优先 Flex/Grid，别再用 float 布局；间距优先 gap，别再用 margin 拼图；尺寸优先相对单位，别把 px 钉死一切；动画只动 transform/opacity；写完在窄屏、深色模式、200% 缩放下各看一遍。CSS 的功夫在调试和取舍，不在背诵。
示例
/* 一个项目的现代起手式 */
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--brand: #1c7ed6;
--text: #343a40;
--bg: #fff;
--radius: 8px;
--space-2: 8px;
--space-4: 16px;
--space-8: 32px;
}
body {
margin: 0;
font-family:
-apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
line-height: 1.7;
color: var(--text);
background: var(--bg);
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* BEM 命名 + 低优先级：一层类解决 */
.card {
}
.card__title {
}
.card__title--large {
}
/* 间距用 gap，而不是给每个子元素 margin 再清首尾 */
.toolbar {
display: flex;
gap: var(--space-2);
}
常见坑
- 优先级通胀：从一个 !important 开始，到满屏长链选择器结束。定期审视：优先级超过两层的规则能不能拆平。
- 魔法数字满天飞：margin: 13px、width: 347px 这种从设计稿像素级照抄的值，维护时无人敢动。换算进间距阶梯和设计令牌。
- 复制粘贴不理解：从 AI 或博客粘来的样式「能跑就行」，布局一换就崩。每一行都要能说出为什么需要它。
- 只在自己设备上验收：窄屏、触屏、深色模式、系统大字号、200% 缩放——至少过一遍再交付。
- 追逐每个新特性：@container、:has()、视图过渡都很棒，但先确认浏览器支持底线（caniuse），生产环境渐进增强而不是激进依赖。
小结
起手三件套：border-box、reset、设计令牌；类选择器 + 低优先级 + 统一命名；DevTools、caniuse、MDN 是三大日常工具；多环境验收。至此 CSS 教程完结——接下来选一个真实页面动手复刻，是最好的复习。