dev.to | 📄 原文链接 | 2026-11-04 收录

你还在用 2015 年的方式写 CSS

来源：dev.to — 2026-09-28

📋 概述

写一条干净的选择器却没有生效，开发者工具里一条三年前写的 `#app .sidebar .widget .button` 悄悄覆盖了它，最后只能上 !important。这场二十年的挣扎催生了 BEM、CSS Modules、CSS-in-JS 和工具类框架。作者的判断是：CSS 从来没有坏掉，坏的是大多数人被教成了「装饰规则」，而不是「浏览器渲染管线执行的计算引擎」。

🔑 核心要点

渲染管线分四段：重算样式、布局回流、绘制、合成，理解它是调试视觉 bug 的前提。
DOM 与 CSSOM 合成渲染树，display:none 的节点被整棵剔除。
近三年 CSS 的架构级进化包括 @layer、@container、:has() 与 content-visibility。
这些能力解决的正是过去需要成兆字节 JavaScript 工具才能解决的架构问题。

💡 金句

“CSS was never broken. The reality is simpler: most developers were taught CSS as a collection of cosmetic styling rules rather than a layout calculation engine executed by a browser rendering pipeline.”
译：CSS 从来没有坏掉。现实更简单：大多数开发者被教成把 CSS 当成一堆装饰性的样式规则，而不是浏览器渲染管线执行的布局计算引擎。

← 返回 dev.to 首页