CSS

分离结构与样式

早期HTML里，样式直接写在标签属性里：、

CSS的核心机制是选择器与声明块：p { color: red; font-size: 16px; }，选择器找到目标元素，声明块设定属性值。级联（cascade）是CSS名字的来源：同一个元素可能匹配多条规则，浏览器按来源（用户代理样式、作者样式、用户样式）和特异性（specificity）计算最终生效的值。这套规则让样式表可以分层复用和覆盖。

CSS2（1998年）加入了定位（position: absolute/relative）、伪元素（::before）和媒体类型。但CSS2.1的浏览器实现花了将近十年才趋于一致，这段时期「IE hack」和浏览器兼容问题困扰了整整一代Web开发者。[1]

Flexbox、Grid与现代布局

CSS3没有一个统一发布的版本，而是分拆成独立模块各自演进。2012年前后进入主流浏览器的Flexbox（弹性盒模型）解决了一个长达十年的痛点：垂直居中和等高列布局。display: flex加几行属性就能做到曾经需要float、负margin或表格布局才能勉强实现的效果。

2017年，CSS Grid（网格布局）在主流浏览器中稳定可用。Grid是真正的二维布局系统，可以同时控制行和列，grid-template-columns: repeat(3, 1fr)这样的声明直接定义栅格，比嵌套float或Flexbox处理复杂版面时更清晰。

• CSS变量（--color-primary: #007bff）在CSS4中标准化，让主题切换（含暗色模式）无需预处理器
• @media (prefers-color-scheme: dark)媒体查询让系统主题与网页联动
• CSS动画和transition把大量过去需要JavaScript的视觉效果移入纯CSS，性能也更好（可利用GPU合成层）
• CSS Houdini（2020年代逐步实现）让开发者以JavaScript扩展浏览器的CSS引擎

Sass、Less、PostCSS等预处理器在CSS原生能力不足的年代填补了嵌套和变量的缺口，现在随着原生CSS能力增强，部分场景已不再需要预处理器。

CSS