CSS 已经从一种纯粹的表现层语言，演变为一种逻辑能力日益增强的语言。这得益于容器查询、关系型伪类和 if() 函数等新特性。那么，CSS 仍然只用于样式设计吗？抑或它正在变得更加强大？本文将探讨多年来 CSS 如何变得更加智能、它的发展方向、它所解决的挑战、它是否变得过于复杂以及开发者如何应对这一转变。
历史背景：CSS 的刻意简化
曾几何时，CSS 纯粹是表现性的。它命令式地处理着标记语言的字体、颜色、背景、间距和布局等样式。它是一种“外观”语言，只做被要求的事情，从不思考或做决定。至少，这是 Håkon Wium Lie 在 1994 年提出 CSS，并在两年后被万维网联盟 (W3C) 采用时的初衷。
快进到今天，随着新功能的加入，以及更多将样式语言转向更命令式范式的功能即将推出，一切都发生了巨大的变化。CSS 现在积极地为复杂的响应式和交互式用户界面提供支持。随着容器查询、关系型伪类和 if() 函数等最新进展，这种曾经只存在于表现领域的语言，已经涉足逻辑领域，从而减少了对迄今为止一直处理其逻辑方面的语言 JavaScript 的依赖。
CSS 长期以来一直刻意地停留在样式领域，但现在是时候改变了吗？此外，CSS 仍然是它最初的表现层语言，还是正在变得更加强大和宏大？
CSS3：迈向上下文感知的第一步
当 CSS3 推出时，情况发生了变化。开发者们曾期待像以前版本一样进行单一的整体更新，但他们的期望与最新版本的现实不符。CSS3 揭示了一个模块化系统，其中包含 Flexbox、CSS Grid 和媒体查询等强大的布局工具，首次定义了开发者如何建立响应式设计。CSS3 拥有 20 多个模块，标志着“更智能 CSS”的诞生。
Flexbox 大约在 2012 年引入，提供了一个灵活的一维布局系统；而 CSS Grid 于 2017 年推出，通过提供二维布局框架，使使用最少代码实现复杂设计成为可能。这些进步减少了对浮动等“hack”方案的依赖。
CSS3 的一个突出发布是媒体查询，它是智能 CSS 的主要贡献者之一。通过媒体查询，CSS 可以对不同设备的屏幕做出反应，调整其样式以适应屏幕尺寸、宽高比和方向。在第五级，它增加了用户偏好媒体特性，如 prefers-color-scheme 和 prefers-reduced-motion，使 CSS 更以用户为中心，通过调整样式适应用户设置，增强了可访问性。
驱动智能的新 CSS 特性
目前有几个特性正在将 CSS 推向动态和自适应的边缘，从而使其变得更智能，其中最值得一提的是：容器样式查询和 if() 函数。
什么是容器样式查询，为什么它们很重要？
容器尺寸查询允许开发者根据其父容器的尺寸来设置元素的样式。容器样式查询更进一步，允许您根据容器上设置的自定义属性（即 CSS 变量）来设置元素的样式。这些特性在 CSS 中非常重要，因为它们开启了上下文感知的组件。
if() 函数：展望未来
CSS if() 函数可能是迄今为止最根本性的转变。如果实现（Chrome 是唯一支持它的浏览器，从版本 137 开始），它将允许开发者直接在属性声明中编写内联条件逻辑。想象一下 CSS 中的三元运算符。例如：padding: if(style(--theme: dark): 2rem; else: 3rem); 尽管目前 if() 函数尚未在任何浏览器中得到支持，但它已在 CSS 工作组的关注范围内。
新 CSS：CSS 与 JavaScript 的界限正在模糊吗？
传统上，关于样式关注点的分离是这样的：CSS 负责事物的“外观”，而 JavaScript 负责事物的“行为”。然而，容器样式查询和已规范的 if() 函数等特性正开始模糊这一界限。CSS 开始拥有“行为”，并非指 API 调用或事件监听器，而是指能够根据逻辑或上下文有条件地应用样式。
随着 Web 开发的发展，CSS 开始侵蚀 JavaScript 的领域。CSS3 引入了动画和过渡，这对于交互式 Web 开发来说是一个强大的组合，而这在早期没有 JavaScript 是不可能的。今天，研究证明 CSS 已经承担了许多以前由 JavaScript 处理的交互任务。
虽然新特性带来了很多好处，但它们也带来了以前不存在的复杂性：当逻辑分散在 CSS 和 JavaScript 中时会发生什么？如何在不清楚触发条件的情况下调试条件样式？
警示与限制：为什么智能并非总是更好
推动更智能的 CSS 伴随着控制和灵活性的同时，也带来了显著的权衡。多年来，历史表明，向语言、框架或库添加新功能，很可能会引入复杂性，不仅对于新手，对于专家开发者也是如此。危险不在于 CSS 获得能力，而在于这种能力如何被实现、教授和使用。
CSS 最大的优势之一始终是它的易上手性。设计人员和初学者可以快速学习基础知识：选择器、属性和值。随着更多逻辑、作用域和高级选择器的引入，学习曲线变得更加陡峭。风险在于“基本 CSS”和“真实世界 CSS”之间的差距越来越大，这与 JavaScript 及其生态系统所发生的情况如出一辙。
此外，更多的逻辑意味着更多意外结果的可能性。可能会出现更难发现和修复的新问题。像 DevTools 这样的资源将需要发展，以可视化作用域边界、条件应用和复杂的选择器链。在那之前，调试可能仍然是一个挑战。
结论
我们刚刚回顾了 CSS 的历史，探讨了它的现状，并展望了它的未来。我们都同意，CSS 已经从一种简单、声明性语言发展成为一种动态、上下文感知，并且确实更智能的语言。这种演变当然伴随着一些矛盾：一个更智能的样式语言可以减少对脚本的依赖，但也可能变得更复杂，学习曲线更陡峭。
因此，我得出结论：CSS 的未来不应是为了添加逻辑而竞相添加逻辑。相反，它应该是一个深思熟虑的扩展，能力与清晰度平衡，创新植根于可访问性。这意味着在发布新功能之前要提出尖锐的问题。这意味着确保新功能能够解决实际问题，而不会引入新的障碍。
