波仔
🕸️ 第二章 Web特有的架构
📄 一句话概括

CSS 是网页的皮肤：同一份 HTML，换一套 CSS 就能变成完全不同的样子——内容与外观分开写，是这个设计里最值钱的一条。

📝 本节和前面几节的关系

2-3 说 HTML 管【有什么】，这一条说 CSS 管【长什么样】。教材把它叫【次要部分】，指的是顺序：先有内容，再谈样子。这个顺序不是等级高低，是依赖关系——没有内容，样子无从谈起。

一、把样子和内容拆开

CSS 的做法是给元素写规则：选中哪些元素，然后给它们一组属性。

这样做最大的好处是一处改、处处变。同一个样式写在文件里，改一行，所有用到它的地方一起变——这也是 2-1 里说的【改得起】在页面这一层的体现。

另一个好处是同一份内容能换不同的样子：手机、平板、打印，甚至是给读屏软件用的版本，都是同一份 HTML 配不同的规则。

二、CSS 这几年把预处理器吃掉了

十来年里，前端团队几乎都会装一个预处理器（最典型的是 Sass），图的是三样东西：嵌套、变量、作用域隔离。

现在这三样 CSS 自己都有了：原生嵌套、自定义属性、@scope。所以还在用预处理器的团队，多半是为了循环、带逻辑的函数这类原生确实做不到的事。

三、动手 Demo：省下来的不止是行数

m = ["媒体查询：按视口写 4 套断点", 12]
c = ["容器查询：按容器写 1 套规则", 5]
print("行数 %d -> %d，省掉 %.0f%%" % (m[1], c[1], (1 - c[1] / m[1]) * 100))
print("更要紧的：组件搬去别处，规则要不要重写？")

实跑输出：

--------------------------------------------------------------------
D4  Web 网页的次要部分：CSS
--------------------------------------------------------------------
  HTML 管【这一页有什么】，CSS 管【长什么样】。
  教材把它叫【次要部分】，指的是顺序：先有内容，再谈样子。

  近年 CSS 的变化比过去十年都大，下面四个特性已经可以放心用了：
  ----------------------------------------------------------------------------------------
  特性            解决了什么老问题                        Baseline 状态
  ----------------------------------------------------------------------------------------
  容器查询        组件按【自己有多宽】变，不按视口        2023-02 广泛可用
  :has()          按【里面有什么】选中父元素              2023-12 广泛可用
  原生嵌套        不用 Sass 也能把子规则写进父规则里      2023-12 广泛可用
  @scope          样式只作用于一棵子树，不外漏            2026-03 新近可用
  ----------------------------------------------------------------------------------------

  拿一个真实场景算笔账。一张卡片，放在窄侧栏和宽主区要长得不一样：
  ----------------------------------------------------------------------------------------
  写法        怎么判断                              要写几套            行数
  ----------------------------------------------------------------------------------------
  媒体查询    只看视口宽度，得为每种布局各写一套    按断点，约 4 套     12
  容器查询    看卡片自己所在容器有多宽              一套规则，两个分支  5
  ----------------------------------------------------------------------------------------

  5 行对 12 行，省掉 58%。更要紧的是：卡片搬去别的页面，规则不用重写。

  这也是 Sass 这类预处理器这两年淡出的原因——
  它当年主要卖三样东西：嵌套、变量、作用域隔离。
  现在这三样 CSS 自己都有了：嵌套、自定义属性、@scope。
  还在用 Sass 的团队，多半是为了循环、带逻辑的 mixin 这类原生做不到的事。

  ⚠️ 2026 现状：CSS 特性该不该加兜底，现在有个统一答案叫 Baseline：
    newly available（新近可用）= 每个主流浏览器都发了，但老设备可能没更新；
    widely available（广泛可用）= 新近可用之后再等 30 个月。
    保底判据：广泛可用的直接用，新近可用的配兜底，其余当增强写。

读这个输出：省掉一半多行数只是表面。真正值钱的是最后那句——媒体查询写的是【视口多宽时怎么办】，所以一个组件放到别的位置就得重写；容器查询写的是【我自己容器多宽时怎么办】，组件搬到哪儿都成立。这就把【可复用】从口号变成了事实。

四、怎么判断一个 CSS 特性能不能用

CSS 特性越来越多，光靠记忆已经不行了。现在有个统一的答案叫 Baseline（基线）：

newly available（新近可用）：每个主流浏览器都发了，但老设备可能还没更新——用的时候配个兜底。widely available（广泛可用）：在新近可用之后再等 30 个月——可以直接用。

这个判据的好处是：它不问你信不信，只问时间够了没有。

五、⚠️ 2026 现状

到 2026 年，容器查询、:has()、原生嵌套、cascade layers、OKLCH 颜色这些都已经进入【广泛可用】，主流团队可以放心用。

十年前有人写过一篇《CSS 已死》，十年过去，死掉的是那些当年的变通办法；CSS 本身反而把它们的活儿都接了过来。

30 秒实验

  1. 随便打开一个网站，按 F12，在 Elements 面板里点中一个标题。
  2. 在右侧找到它对应的样式规则，试着把字号改大一倍，看页面其他部分有没有跟着动。
  3. 再找一条同时影响很多元素的规则，改掉它的颜色，看一次改动能影响多少个地方。

常见误区

  1. 错误：CSS 只是把页面弄好看。——纠正：它还管布局、响应式、可访问性。字体大小够不够读、颜色对比度够不够、打印出来是什么样，全是 CSS 的事。把它当装饰，就会在真正要改结构的时候发现无从下手。
  2. 错误：既然有 Tailwind 这类框架，就不用学 CSS 了。——纠正：框架只是把常用写法打包，出问题时还是要回到底层。而且正因为 CSS 自己长出了嵌套、变量、作用域，工具和语言之间的界线这几年反而在往回退。
  3. 错误：新特性都要等很久才敢用。——纠正：有了 Baseline 就不用靠感觉等了。广泛可用的直接用，新近可用的配兜底，其余当增强——判断标准从【我觉得稳不稳】变成了【时间够不够】。
  4. 错误：媒体查询和容器查询差不多，用哪个都行。——纠正：它们问的不是同一个问题。媒体查询问【外面的窗口多宽】，容器查询问【我自己这块地方多宽】。做可复用组件时，后者才是对的问法。
自测三问（点开对答案） 1. 为什么说【内容与外观分开】是这个设计里最值钱的一条？ —— 因为它同时解决了三件事：**改一处能改一片**（维护成本）、**同一份内容能配多种样子**（手机与打印不用重做）、**去掉样式后内容仍然可读**（可访问性）。这三件事本质上都来自同一个决定：内容只写一次。 2. 预处理器为什么这两年淡出了？ —— 因为它当年主要卖的三样东西——**嵌套、变量、作用域隔离**——现在 CSS 自己都有了。它没有做错什么，只是**它擅长的那些活被语言本身接走了**；还在用它的团队，图的是原生确实做不到的部分。 3. 【新近可用】和【广泛可用】在实际开发里怎么用？ —— **新近可用配兜底，广泛可用直接用**。前者指的是【浏览器都发了，但用户可能还在旧版本】，所以要准备一条旧路；后者指的是发布之后又等了 30 个月，**按统计规律，还在旧版本的设备已经少到可以不管**。

相关笔记