II.3 CSS：样式和布局

II.3.1 基础：选择器、层叠、特异性、继承

CSS（层叠样式表）用于样式化和布局网站，控制外观、颜色、字体和定位。样式通过标签、类和 ID 选择器应用于目标 HTML 元素。

• 层叠决定了当多个规则针对同一元素时，样式如何根据来源、重要性和顺序应用。
• 特异性是分配给 CSS 声明的权重，决定了当多个选择器针对同一元素时哪个规则适用。
• 继承是指属性可以从父元素继承到其子元素。

理解层叠、特异性和继承 至关重要，因为 CSS 本质上是声明式的和非线性的。对这些概念的误解直接导致不可预测的样式行为和“样式覆盖问题”，突出了理论理解与实际可维护性之间的因果关系。

II.3.2 盒模型：理解元素尺寸

每个 HTML 元素都呈现为一个矩形盒子，由内容、内边距、边框和外边距组成。掌握外边距折叠也很重要。盒模型是 CSS 布局的基本心智模型。没有它，开发者无法准确预测或控制元素的大小和间距。

II.3.3 现代布局技术：Flexbox 和 CSS Grid

Flexbox（弹性盒布局）是一种一维布局方法，用于在行或列中排列项目，实现灵活的对齐和空间分配。

CSS Grid Layout 是一种二维布局系统，用于设计复杂的响应式 Web 布局。

从旧的布局方法（浮动、表格）到 Flexbox 和 Grid 的转变代表了 CSS 的重大演变。这些现代技术简化了复杂布局，是响应式设计的基础，直接影响开发效率和 UI 质量。

II.3.4 响应式设计：媒体查询、容器查询和移动优先原则

响应式设计确保网页在各种设备和屏幕尺寸上都能良好呈现。

• 媒体查询是 CSS 技术，用于根据设备特性（例如，屏幕宽度、高度、方向）应用不同的样式。
• 容器查询 (Container Queries)：基于父容器 (Container) 尺寸的微观布局调整。
  • 传统的媒体查询无法感知组件所在的上下文。例如，同一个“卡片组件”既可能出现在宽敞的主内容区，也可能出现在狭窄的侧边栏。
  • 使用 @container，组件可以根据其所在父容器的宽度自动调整样式，实现了真正的组件级响应式。这使得组件能够完全独立于页面布局，实现“编写一次，到处运行”。
• 移动优先是一种设计策略，从最小的屏幕开始设计，然后向上扩展，这通过媒体查询得到隐式支持。

移动优先设计是由移动互联网使用驱动的战略转变。它通过优先考虑受限环境下的核心内容和功能，然后逐步增强以适应更大屏幕，从而有效地实现响应式设计。

II.3.5 现代 CSS 逻辑、交互与动画

随着浏览器引擎的演进，CSS 已具备了处理逻辑判断、感知状态以及驱动高性能动画的能力，大幅减少了对 JavaScript 的依赖，显著提升了渲染性能。

• 逻辑选择器与原生嵌套：

  • :has() (父类选择器)：它允许根据子元素的状态来控制父元素或兄弟元素的样式。例如，form:has(input:invalid) 可以直接在 CSS 中实现当输入框非法时改变表单背景的逻辑，而无需 JS 介入。
  • 原生嵌套 (CSS Nesting)：浏览器现已原生支持类似 Sass/Less 的嵌套语法，允许开发者直接在 CSS 中编写层级清晰的代码，减少了对构建工具的强依赖。

• 视图过渡 (View Transitions API)：

  • 提供了一种原生机制来创建平滑的 DOM 状态切换动画。无论是单页应用 (SPA) 的路由跳转，还是多页应用 (MPA) 的页面加载，浏览器都能自动对新旧状态进行截图并生成过渡效果（如元素形变、淡入淡出），无需复杂的 JS 动画库。

到 2026 年，这些能力的意义已经不仅是“浏览器终于支持了”，而是它们越来越多地进入 Baseline / Interop 语境，开始成为现代 CSS 与平台级交互设计的现实选项。
也就是说，学习它们不再只是“了解前沿”，而是要学会什么时候可以在生产项目里把它们当成正式能力来使用。

• 滚动驱动动画 (Scroll-driven Animations)：
  • 允许将动画进度直接绑定到滚动容器的滚动位置，而非时间线。
  • 性能优势：此类动画运行在浏览器的合成线程 (Compositor Thread) 上，完全不阻塞主线程。即使 JavaScript 忙于处理繁重的业务逻辑导致页面卡顿，滚动动画（如视差滚动、阅读进度条）依然能保持丝滑流畅。

II.3.6 高级样式：单位（rem、em、vw/vh）、函数（clamp()、calc()）

CSS 使用各种单位（rem、em、vw、vh）和函数（clamp()、calc()）来动态和响应式地定义属性值。

• rem（根 em）和 em 相对于字体大小，而 vw（视口宽度）和 vh（视口高度）相对于视口尺寸。

• calc() 允许数学表达式，而 clamp() 将值限制在上限和下限之间。这些高级单位和函数使开发者能够创建高度动态和适应性强的设计，而无需过度依赖 JavaScript 进行布局，从而提高性能和可维护性。

II.3.7 BEM (Block, Element, Modifier) 命名规范：告别 CSS 混乱

BEM 不仅是一种命名约定，它更是一种前端开发的思维方法，旨在将混乱的 CSS 样式转化为清晰、可维护的组件化结构。您可以把它想象成是为前端组件制定的一套“身份证编码规则”。

在大型项目中，如果没有统一规范，CSS 样式很容易互相干扰，造成所谓的“样式污染”。开发者为了覆盖已有样式，往往需要写出越来越复杂的选择器，陷入“权重战争”的泥潭，最终造成 !important 满天飞的乱象。BEM 通过其结构化的命名模式，为每个组件创建了独立的“命名空间”，从根本上解决了这些问题，让代码库变得高度可预测。

核心构成

• Block - 块 ( block )

  • 定义： 一个独立的、可在项目中任意位置复用的页面组件。可以把它想象成一块乐高积木，比如一个“搜索表单”、一个“产品卡片”或一个“导航菜单”。它自身是完整且有意义的。

• Element - 元素 ( __element )

  • 定义： 块的组成部分，它在语义上完全从属于这个块，不能脱离块而独立存在。如果“产品卡片”是块，那么“卡片标题”、“卡片图片”和“购买按钮”就是元素。
  • 命名规则： 元素的名称通过双下划线 (__) 与其所属的块连接。例如 card__title。

• Modifier - 修饰符 ( --modifier )

  • 定义： 一个用来描述块或元素的外观、状态或行为的“标志”或“形容词”。它定义了组件的变体。
  • 命名规则： 修饰符的名称通过双中划线 (--) 与它所修饰的块或元素连接。
  • 示例：
    • 修饰一个块：比如普通的 card 组件可以有一个“特别推荐”的版本，我们称之为 card--featured。
    • 修饰一个元素：比如 card__button 默认是灰色，但可以有一个“主要”状态，我们称之为 card__button--primary。或者菜单项 menu__item 可以有一个“当前激活”的状态，即 menu__item--active。

核心优势

• 结构清晰： 仅通过阅读类名，就能直观地理解 UI 元素的结构和组件间的从属关系。
• 高可读性： 类名本身就成为了一种文档，清晰地传达了其功能和状态。
• 易于维护： 所有样式都基于单一的类选择器，避免了复杂的嵌套和特异性问题，使得样式覆盖和修改变得简单而安全。