直接在 CSS 中定义颜色变量，让开发与设计系统保持一致，关键是把设计规范里的色值转化为可维护的 CSS 自定义属性（CSS Custom Properties），并建立清晰的命名和层级结...

用类选择器（class selector）是最直接、最可靠的方式——它天然只作用于带有指定 class 的元素，完全不影响其他标签或未加该类的同类标签。

直接在 Elements 面板中右键目标元素 → 选 Reveal in Styles，就能跳转到右侧 Styles 面板中该元素实际生效的全部规则。重点看带删除线的声明——它们被更高优先...

页面元素在做位移动画时如果出现卡顿或不流畅，通常是因为直接改变了会影响布局的属性（如 left、top、margin 等），导致浏览器频繁触发重排（reflow）和重绘（repaint）。...

要让一个网格项跨多行，必须用 grid-row 指定起始和结束行线。它不接受“跨 2 行”这种相对描述，只认行线编号（从 1 开始）或命名线。

子元素在 CSS Grid 中无法居中，通常不是 justify-items: center 和 align-items: center 组合本身有问题，而是它们作用的对象和前提条件被忽略...

列表标记（如 disc、circle、square）默认出现在行框左侧，但一旦给 li 设置了 position: relative 或内边距（padding），标记位置常会偏移、错位甚至...

元素旋转时过渡不自然，通常不是因为用了 transition 和 transform: rotate()，而是过渡的**起始值、结束值或时间函数设置不合理**，或者浏览器对角度插值的处理方...

旧项目里内联样式（style=”…”）多，直接全量迁移容易出问题，推荐“渐进式剥离”：先保功能、再理结构、最后收口。核心原则是——不改行为，只挪位置；每...

图片在CSS中变形，通常是因为容器尺寸和图片原始宽高比不一致，又没做适配处理。用 object-fit 是最直接有效的解决方式，它能控制图片如何适应其容器，同时保持自身比例不拉伸、不变形。...