CSS 里那些戒不掉的写法
发布 分类 coding
当前浏览器未执行 JavaScript，下面是本篇的 Markdown 原文，内容一字未改。
CSS 是我写过最多次的语言，也是最多人觉得「没学好」的语言。下面这些是踩了很久才稳下来的习惯。
<!-- more -->
## 一、能用类就别用 id
id 的优先级是 100，一旦用它定了样式，后面想覆写就得靠 `!important` 或更长的选择器链，越补越烂。id 只留给锚点和 `label` 关联。
## 二、先想栅格，再想组件
我几乎所有页面都是这个骨架：
```css
.grid{
display:grid;
grid-template-columns:minmax(0,1fr) 272px;
gap:24px;
align-items:start;
}
@media (max-width:1080px){ .grid{ grid-template-columns:minmax(0,1fr); } }
```
`minmax(0,1fr)` 而不是 `1fr` 是血泪：内容里有长表格或长代码块时，`1fr` 会被撑爆，`minmax(0,1fr)` 才会老老实实收缩。
## 三、动效只碰 transform 和 opacity
改 `width`、`top`、`left` 会触发重排，动画再顺也会掉帧；`transform` 和 `opacity` 走合成层。位移就写 `translateY(-3px)`，别写 `margin-top:-3px`。
```css
.card{ transition:transform .32s cubic-bezier(.22,.61,.36,1), box-shadow .32s; }
.card:hover{ transform:translateY(-3px); }
```
## 四、给焦点环留位置
`:focus-visible` 只对键盘用户显示焦点环，是最优雅的方案。别用 `outline:none` 抹掉它，那等于把键盘用户赶出门。
## 五、字号用相对单位，行高用无单位数
正文 `16px / 1.85`、标题 `clamp(2rem, 4.6vw, 3.1rem)`，行高永远用无单位数，这样继承时不会出怪问题。中文正文行高尽量给到 1.8 以上，不然读起来很挤。
## 六、为「太长」和「太窄」都写一次
- 长：表格包 `overflow:auto`、正文 `max-width:76ch`、代码块允许横向滚动。
- 窄：断点别设太多，我全站只用 1080 / 860 / 620 三个。
## 七、选择器别太深
超过三层的选择器几乎都是结构没设计好。真需要时可以给元素加一个语义类，而不是从祖先一路 `>` 下来。
> [!NOTE]
> 这几条没有一条是新技术，全是「不再犯」的清单。写 CSS 的进步大多来自减掉坏习惯，而不是学会新语法。
