Why CSS

CSS 的诞生与发展

CSS（层叠样式表）诞生于 1994 年，由 Håkon Wium Lie 在 CERN 工作期间首次提出。在 CSS 出现之前，HTML 文档的样式是通过 HTML 标签直接控制的，比如使用<font>标签来改变文字样式，使用<table>来进行页面布局。这种方式存在许多问题：

1. 样式与内容耦合，难以维护
2. 代码冗余，相同的样式需要重复编写
3. 样式控制能力有限
4. 页面加载速度慢

CSS 的出现解决了这些问题，它实现了内容与样式的分离，为 Web 开发带来了革命性的变化。

为什么需要 CSS？

CSS 最重要的特点是实现了内容（HTML）与表现（CSS）的分离。

• 提高了代码的可维护性
• 使得同一份 HTML 内容可以适应不同的展示需求
• 有利于团队协作，前端开发者可以专注于样式开发
• 可以通过类名重用样式
• 支持继承机制，子元素可以继承父元素的某些样式
• 使用选择器可以精确控制要修改的元素样式
• 支持复杂的布局系统（Flexbox、Grid）
• 提供丰富的视觉效果（渐变、动画、变形等）
• 支持响应式设计，适应不同设备

CSS 是如何工作的？

• 浏览器载入 HTML 文件（比如从网络上获取）。
• 将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式，下一节将更加详细的解释 DOM。
• 接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理，简单起见，同时此节主讲 CSS，所以这里对如何加载 JavaScript 不会展开叙述。
• 浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
• 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
• 网页展示在屏幕上（这一步被称为着色）

CSS 性能

在使用 CSS 时，需要注意以下性能相关的问题：

• 选择器的性能影响
• 重排（reflow）和重绘（repaint）的性能消耗
• CSS 动画性能优化

现代 CSS 的发展

近年来，CSS 持续发展，增加了许多强大的特性：

• CSS 变量（自定义属性）
• CSS Grid 和 Flexbox 布局
• CSS Modules 和 CSS-in-JS
• CSS 预处理器（Sass、Less）
• CSS 框架（tailwindCSS）
• 新的选择器和伪类
• 更多的单位和计算能力