第 4 章 工具类断案

第 4 章 · 工具类断案

章节摘要：工具类（utilities）是单职责的原子样式——间距、颜色、排版、显示、定位各立门户，全部支持断点前缀。旧版教程把十二类工具拆成十二节，本册并成四节大案：间距、外观（颜色/边框/阴影）、排版文本、显示定位尺寸对齐速查。读完你能不查文档写完八成日常样式，并把「该用工具类还是该写自定义 CSS」的边界判清。

学习目标

阅读完本章，你应当能够：

1. 默写间距刻度（0 到 16 级，乘数 0.25rem）并按方向（t/b/s/e/x/y）与断点组合出任意留白判决；
2. 用语义色族（primary 到 danger、body、muted、tertiary）给文字、背景、边框、阴影上色，并说清 text-bg-* 与 bg-* + text-* 的区别；
3. 用 fs-*、fw-*、lh-*、text-truncate 等处理字号字重行高与文本溢出；
4. 在速查台上一次判清显示盒型、定位、尺寸、文本对齐、垂直对齐五类高频工具。

核心概念速览

工具类的判案哲学：一个类只判一件事。组合的成本永远低于新写 CSS 的成本——直到你需要「判一件框架没提供的事」为止。

子章节导航

4.1 间距工具类：响应式留白判决

m-* 与 p-* 两族撑起页面呼吸感，刻度、方向、断点三个维度自由组合，是使用频率最高的一族。

4.2 颜色边框与阴影工具类

语义色体系一鱼多吃：文字色、背景色、边框色、链接色共享同一组词根；圆角与阴影是外观族的收尾。

4.3 排版与文本工具类

字号字重行高的刻度化，加文本溢出三判（截断、省略、折行）——内容页排版的最后一块拼图。

4.4 显示定位尺寸对齐速查断案

把 d-*、position-*、w-*/h-*、text-*、align-* 集中到一张速查台上，用「改判成本」决定用类还是写 CSS。

子章节之间的逻辑关系

四节从「间距」这个最大用量开始，经外观与排版两个表现层，最后以速查台收拢所有盒子层面的裁决，为第 5 章定制立好「哪些先动工具类、哪些才动变量」的判断基线。

4.1 间距 ──► 4.2 外观 ──► 4.3 排版
                                │
        4.4 速查台 ◄────────────┘
        （把前三节与第 2 章的盒子类一起归档）
​

本章知识点清单

逐条可考核，学完本章请自查：

1. 能默写间距刻度：每级 0.25rem、常用 0 到 5 加 auto，并能现场换算 mb-4 折合多少像素（假设根字号 16）；
2. 能解释方向字母 t、b、s、e、x、y 各管哪条边，以及 s 与 e 为什么取代了旧的 left 与 right——逻辑属性随书写方向翻转；
3. 能把 mt-lg-3 读成「从 lg 断点起生效，直到被更高断点的同类改判」，并据此推断不写断点前缀时的默认区间；
4. 能说清 text-bg-* 一步到位与 bg-* 加 text-* 两步组合的差异：前者把前景色与底色绑定成对，避免对比度失衡；
5. 能按「状态优先于美观」的原则从 primary 到 danger 八个语义色里选对颜色，而不是挑顺眼的；
6. 能用 border 与 border-start-0 做单边裁决，能区分 rounded 圆角三档与 shadow 阴影三档的使用场合；
7. 能区分 fs-1 到 fs-6 与 h1 到 h6 两套字号刻度的分工，知道 display 类标题是给巨幅标语用的；
8. 能说出 text-truncate 生效的三个前提（块级元素、确定宽度、单行内容），并在截断、省略、折行三判里选对工具；
9. 能按「改判成本」在速查台上决定用工具类还是写自定义 CSS——一次性的用类，成片复用的抽成自定义。

前置知识与后续延伸

• 前置知识：第 1.3 节类名三段式；第 2 章栅格与 flex（工具类是它们的胶水）；CSS 盒模型 margin/padding 的区别。
• 后续延伸：第 5 章 Sass 变量是刻度与色板的「立法权」——本章用刻度，第 5 章改刻度；第 7 章实战是工具类密度的压力测试。