工具类必须按固定步进生成，以确保视觉节奏统一和团队协作可控；推荐用CSS自定义属性+calc实现响应式、可维护的间距系统，并避免混用margin/padding、对行内元素用垂直间距、在Flex/Grid中同时使用gap和margin。
为什么 margin/padding 工具类必须按固定步进生成
直接写 margin-top: 12px 看似快，但团队协作中会迅速失控：有人用 8px，有人用 10px，还有人写 1.25rem，视觉节奏彻底断裂。工具类的核心不是“多”，而是“可预期”——所有间距值必须来自同一套缩放比例，比如 0.25rem / 0.5rem / 0.75rem / 1rem / 1.5rem / 2rem（即 4px / 8px / 12px / 16px / 24px / 32px，假设 1rem = 16px）。跳过这一步，后续所有“统一”都是假命题。
如何用 CSS 自定义属性 + calc 实现响应式间距工具类
硬编码每个值（如 .mt-1 { margin-top: 4px; }）维护成本高，且无法响应字体缩放或视口变化。推荐用 CSS 自定义属性动态计算：
:root {
--space-unit: 0.25rem; /* 基础单位，可全局调整 */
--space-xs: calc(var(--space-unit) * 1); /* 4px */
--space-sm: calc(var(--space-unit) * 2); /* 8px */
--space-md: calc(var(--space-unit) * 4); /* 16px */
--space-lg: calc(var(--space-unit) * 6); /* 24px */
--space-xl: calc(var(--space-unit) * 8); /* 32px */
}
<p>.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.p-xl { padding: var(--space-xl); }这样改 --space-unit 就能整体缩放，也方便媒体查询中覆盖：
@media (min-width: 768px) {
:root {
--space-unit: 0.375rem; /* 平板端基础单位变大 */
}
}哪些组合必须避免，否则会破坏布局一致性
- 混用
margin和padding实现相同视觉距离（比如用mb-2和pt-2拼凑间隙）——语义错乱，后期无法批量调整 - 对行内元素（
<span>、<a>）使用垂直方向工具类（mt-、mb-）——多数无效，除非显式设display: inline-block或display: block - 在 Flex/Grid 容器子项上同时用
gap和margin工具类——gap更可靠，margin可能导致意外溢出或折叠
如何让工具类不污染全局，又支持按需加载
全量生成所有方向 + 所有尺寸的类（如 mt-1 到 mt-96）会让 CSS 体积暴增。实际只需三类：
立即学习“前端免费学习笔记（深入）”；
-
方向最小集：只提供
m（margin）、p（padding）、mt/mr/mb/ml、pt/pr/pb/pl、mx/my—— 足够覆盖 95% 场景 -
尺寸合理范围：从
0到xl（共 6 级），超出用custom类手动覆盖，而非生成2x、3x等冗余类 -
按需注入：用 PostCSS 插件（如
postcss-tailwindcss）或构建时配置，只将项目中实际用到的工具类写入最终 CSS，而非全量输出
真正难的不是写多少类，而是让每个类出现的位置，都让人一眼看懂它在解决什么空间问题——这取决于命名是否直白、步进是否自然、以及有没有守住「一个地方只管一种距离」的边界。
