统一 box-sizing: border-box、按语义选单位（rem/em/px/fr/%）、组件尺寸含 padding/border、margin 交由父级控制——这是 CSS 组件封装中避免尺寸失控的四大核心原则。
封装 CSS 组件时，尺寸失控往往不是因为写错了 width 或 padding，而是盒模型规则没统一、单位混用、或默认行为被忽略。提前规范好盒模型，能大幅减少“明明设了 200px 却撑到 240px”这类问题。
统一设置 box-sizing: border-box
这是最基础也最关键的一步。默认的 content-box 会让 width/height 只管内容区，而 padding 和 border 额外叠加，极易导致尺寸溢出，尤其在响应式或嵌套容器中。
- 全局重置（推荐）：在样式入口或 reset 中加一句
html { box-sizing: border-box; }
- 组件内部不依赖父级 box-sizing，自包含更可靠
- 避免对 img、input 等替换元素意外触发怪异行为（它们默认不继承 box-sizing，但显式声明更稳妥）
按用途选尺寸单位，不随意混用
单位不是越“高级”越好，关键是语义清晰、缩放可控、上下文一致。
- rem：用于组件整体宽高、字体、间距等需随根字体缩放的场景（如响应式断点、主题字号切换）
- em：用于组件内部与自身字体相关的尺寸（如按钮内边距、图标大小），保持比例跟随 font-size 变化
- px：用于绝对固定值，如边框粗细、阴影偏移、1px 分割线——这些本就不该随缩放变化
- fr / %：仅在 Flex/Grid 容器内使用，不用于独立组件的宽高定义（避免脱离上下文后失效）
组件边界要明确，padding 和 border 必须计入设计稿
设计师给的标注通常是“视觉总宽”，即包含 padding 和 border 的最终尺寸。如果组件代码只写 width: 200px，又加了 padding: 12px 和 border: 1px，实际占位就是 226px —— 这在栅格布局或卡片流中会直接错位。
立即学习“前端免费学习笔记（深入）”；
- 封装时把组件的“占用尺寸”作为 API 明确约定（例如：Button 组件默认 width 包含 padding + border）
- 对外暴露的尺寸类（如
.btn--sm）应基于border-box计算，确保调用方所见即所得 - 若需支持无边框/无内边距变体，用修饰类（如
.btn--no-border）并同步调整 width 或 max-width，而非靠覆盖 padding/border 破坏盒模型一致性
预留 margin 处理机制，不靠组件内部硬写
外边距（margin）不属于组件自身尺寸，而是它和外部环境的“社交距离”。把它写死在组件里，会导致复用时无法灵活组合。
- 组件本身不设 margin（除非是强语义布局，如独立卡片需默认下边距）
- 由父容器或布局工具类（如
.space-y-4）统一控制间距，保持隔离性 - 必要时提供间距辅助类（如
.m-2、.mb-3），但不在组件样式中耦合
