CSS：那些无法避免的糟糕部分
原文：CSS: Unavoidable Bad Parts · 作者：matklad（rust-analyzer 作者）
这是一篇写给非 Web 开发者的 CSS 教程——给那些需要给网页写样式、但不是专业前端的人。作者自认不是写这个的最佳人选，但不得不从 MDN 中摸索学习，于是把心得体会记录下来。
CSS、HTML 和 Web API 非常庞大，需要整个职业生涯才能成为专家。好消息是，现代 Web 有一个规模合理、可学习子集，足以应付编程博客或简单 GUI 等任务。坏消息是，有一堆陷阱会破坏你的页面、需要几天调试才能搞明白。不过，也没那么糟——作者对这个网站的样式很满意，只用了大约 200 行可读的 CSS。
好的部分：HTML5 语义标签名
值得翻阅 MDN 元素参考。像 main、article、nav、kbd 这些标签让页面结构更清晰。不太明显的用法：ul 用于任何列表、details 用于目录、dl/dt 用于键值对列表。
坏的部分：包装器（Wrappers）
查看"真实"网站的源码，你会发现层层叠叠的包装器元素。作者建议反过来——只使用有语义意义的标签，然后写出在这些标记上能正常工作的 CSS。
坏的部分：布局（Layout）
布局是每个 GUI 框架的难点。不存在终极布局算法。不同的系统使用不同的启发式方法。不要想"我如何做布局"，而要想"这个系统允许哪些布局"。
坏的部分：浏览器默认样式
不同浏览器的默认样式不同。解决方案是 CSS reset 或归一化。推荐的 reset 第一行：* { box-sizing: border-box; }
好的部分：Classless CSS
reset 之后直接给通用 HTML 元素设置样式，不需要写任何 CSS 选择器。使用 main、header、footer、nav 标签就能设置整体页面布局。
不好的部分：CSS 选择器
编程领域不信任继承而偏好组合，但默认 CSS 是超级增强版继承。两种合理做法：用 classless CSS + inline styles（如 Tailwind），或用 CSS nesting 避免"范围过大"的选择器。
Chaotic Good：Margin Collapsing
两个相邻的 margin 用 max 而非 sum 合并。建议父容器控制子元素间距：section > * + * { margin-top: 1rem; }
好的部分：Flexbox
这是现代 Web 开发的关键。允许垂直或水平排列元素，适应可用空间。
关于 Box-Sizing
* { box-sizing: border-box; } 应该作为 CSS reset 的第一行，使元素边框和内边距不改变元素计算宽度。
关于 Font-Size
如果写 font-size: 16px，16px 是什么的大小？答案是"没有具体所指"。建议设置 font-size-adjust。默认 16px 在有些字体下偏小。
关于 Line-Height
line-height 不设置"行"的高度，而是设置"同一字体"文本行的高度。混用不同字体时可能产生意外效果。
关于 Word-Break
长行内代码或 URL 在移动设备上容易溢出。需要特别注意 word-break 设置。
原文地址：https://matklad.github.io/2026/06/04/css-unavoidable-bad-parts.html
