CSS 的难点往往来自几个规则同时生效。先确定某条声明为什么胜出，再分析元素如何取得尺寸，最后才调整视觉细节。不断补更强的选择器会让局部修复变成全站负担。
声明怎样胜出
层叠先比较来源、重要性和层，再比较选择器优先级与出现顺序。同一层里，id 选择器通常比 class 更强；但优先级不能跨越层叠前面的步骤。继承只影响会继承的属性，color 常继承，margin 不会。浏览器开发者工具的 Styles 面板能显示声明为何被划掉，比猜测可靠。
组件样式尽量使用稳定的 class；主题使用 CSS 自定义属性。不要把 !important 当作默认修复手段。全局选择器会影响第三方控件，重置样式应有明确范围。
尺寸先算对
默认 content-box 的 width 只算内容区，边框和内边距另加。border-box 把它们包含在声明宽度中；外边距始终不在 width 内。块布局、Flex、Grid 使用的尺寸规则不同，垂直 margin 合并也不适用于所有上下文。
* { box-sizing: border-box; }
main { max-width: 68rem; margin-inline: auto; padding: 1rem; }
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;
}
.card { min-width: 0; overflow-wrap: anywhere; }
.toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; }
Grid 适合同时安排行列，Flex 适合沿一个主要方向分配空间。这不是绝对分工；选择能最直接表达约束的模型。Flex 子项默认的最小内容尺寸可能阻止收缩；出现长代码或 URL 溢出时，先检查 min-width、内容换行和滚动边界。
position:absolute 脱离常规流，定位参照取决于包含块，不能用一组固定坐标代替正常页面布局。sticky 还受滚动容器和 inset 影响；“不吸顶”时要查祖先的 overflow。
用内容检查响应式
布局实验页 放了短标题、超长路径和工具栏。分别在窄屏、宽屏、200% 缩放、较大默认字号下检查：卡片是否溢出、按钮是否能换行、阅读顺序是否与 DOM 一致。
断点应来自内容开始拥挤的位置。媒体查询适合页面级条件，容器查询适合复用组件所处的空间。rem 通常跟随根字号，百分比的参照依属性而异；vh 在移动浏览器地址栏变化时有边界，可按用途考虑动态视口单位。动画需照顾 prefers-reduced-motion，文字与控件不能只靠缩小来塞进一行。
练习：给卡片增加图片，固定宽高比并避免图片原始尺寸撑开网格。再故意移除 min-width:0，记录是哪一个内容造成溢出。
面试自查：层叠与继承有什么区别？Flex 的 shrink 为什么未必让元素缩小？为什么负 margin 只能改变局部结果，不能说明尺寸来源已经正确？