CSS Intelligence: Speculating On The Future Of A Smarter Language

CSS已经从纯粹的表现层语言演变为具有日益增长逻辑能力的技术——这得益于容器查询、关系型伪类和if()函数等特性。它是否仍然仅用于样式设计，还是正在变成更强大的存在？Gabriel Shoyombo探讨了CSS这些年来变得多么智能，它的发展方向，它解决的挑战，是否变得过于复杂，以及开发者如何应对这种转变。

历史背景：CSS的刻意简洁

回顾CSS历史，可以看到这是一种为分离内容与表现而诞生的语言，使网页更易于管理和维护。第一个官方版本CSS1于1996年发布，引入了基本样式功能，如字体属性、颜色、盒模型（内边距、外边距和边框）、尺寸（宽度和高度）、几种简单显示方式（none、block和inline）以及基本选择器。

两年后，CSS2推出，通过定位、z-index、增强选择器、表格布局和针对不同设备的媒体类型等功能扩展了CSS对HTML的样式控制能力。然而，样式语言内部存在不一致性，这个问题在2011年由CSS2.1解决，成为现代CSS的标准。

在CSS1到CSS2.1期间，CSS基本上是静态和声明式的。开发者经历了项目中的挫折和突破。由于缺乏Flexbox和CSS Grid等直观布局，开发者依赖表格布局、定位或浮动的变通方案来处理复杂设计，尽管浮动最初是为文本环绕网页上的障碍物（通常是媒体对象）而设计的。结果，开发者面临容器坍塌和意外换行行为等问题。

CSS3：迈向上下文感知的第一步

当CSS3推出时，情况发生了变化。开发者期望像以前版本那样的单一整体更新，但他们的期望与最新发布的现实不符。CSS3红毯揭示了一个模块化系统，具有强大的布局工具，如Flexbox、CSS Grid和媒体查询，首次定义了开发者如何建立响应式设计。拥有超过20个模块，CSS3标志着"更智能CSS"的开端。

Flexbox在2012年左右引入，提供了一个灵活的一维布局系统，而2017年推出的CSS Grid通过提供二维布局框架将布局推进了一步，使使用最少代码实现复杂设计成为可能。正如Chris Coyier所讨论的，这些进步减少了对浮动等技巧的依赖。

媒体查询是CSS3的一个重要发布，是这种智能CSS的主要贡献者之一。通过媒体查询，CSS可以响应不同设备的屏幕，调整其样式以适应屏幕尺寸、宽高比和方向，这是早期版本无法轻易实现的壮举。在第五级中，它添加了用户偏好媒体功能，如prefers-color-scheme和prefers-reduced-motion，通过根据用户设置调整样式使CSS更加以用户为中心，增强了可访问性。

CSS3标志着上下文感知CSS的开始。

推动智能化的新CSS特性

目前有几个特性正在将CSS推向动态和自适应的边缘，从而使其更智能，但这两个值得提及：容器样式查询和if()函数。

什么是容器样式查询，为什么它们重要？

为了更好地理解容器样式查询，有必要快速了解其近亲：CSS Containment Module Level 3中引入的容器大小查询。

容器大小查询允许开发者根据其父容器的尺寸来设置元素样式。这对于基于组件的设计是一个巨大的胜利，因为它消除了将响应式样式硬塞到全局媒体查询中的需要。

1
2
3
4
5
6

/* 基于大小的容器查询 */
@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
}

容器样式查询更进一步，允许您根据容器上设置的自定义属性（即CSS变量）来设置元素样式。

1
2
3
4
5
6
7

/* 基于样式的容器查询 */
@container style(--theme: dark) {
  .button {
    background: black;
    color: white;
  }
}

这些特性在CSS中很重要，因为它们解锁了上下文感知组件。按钮可以根据父级设置的–theme属性改变外观，而无需使用JavaScript或硬编码类。

if()函数：窥见未来

CSS if()函数可能是最激进的转变。当实现时（截至137版本，只有Chrome支持它），它将允许开发者在属性声明中直接编写内联条件逻辑。可以将其视为CSS中的三元运算符。

1

padding: if(style(--theme: dark): 2rem; else: 3rem);

这个假设的行或伪代码（不是语法）如果–theme变量等于dark，则将文本颜色设置为白色，否则设置为黑色。目前，if()函数在任何浏览器中都不支持，但它在CSS工作组的雷达上，像Lea Verou这样有影响力的开发者已经在探索其可能性。

新CSS：CSS和JavaScript之间的界限是否模糊？

传统上，关于样式设计的关注点分离是这样的：CSS负责外观，JavaScript负责行为。然而，像容器样式查询和规范的if()函数这样的特性开始模糊这条线。CSS开始表现出行为，不是在API调用或事件监听器的意义上，而是在根据逻辑或上下文有条件地应用样式的能力上。

随着Web开发的发展，CSS开始 encroach JavaScript领域。CSS3带来了动画和过渡，这是交互式Web开发的强大组合，在早期没有JavaScript是不可能的。今天，研究证明CSS已经承担了先前由JavaScript处理的几个交互任务。

这些CSS向JavaScript领域的扩展现在使后者仅处理Web应用程序中复杂、关键的交互，如用户输入、进行API调用和管理状态。

分歧观点：CSS中的逻辑是有益还是有害？

虽然上一节的证据倾向于边界模糊，但开发者之间存在重大争议。许多现代开发者认为CSS中的逻辑早就应该出现了。随着Web开发变得更加组件化，声明式样式的局限性变得更加明显，导致支持者将逻辑视为曾经纯粹样式语言的必要演变。

其他人则反对它。将逻辑引入CSS是一个滑坡，CSS可能会失去其核心优势——简单性、可读性和可访问性——通过变得太像编程语言。担心的是开发者冒着使Web比它应该的更复杂的风险。

不失去灵魂的更智能CSS

CSS通过声明性、可访问性和目的驱动，始终与完整的编程语言（如JavaScript）区分开来。

如果CSS要变得更智能，挑战不在于为了自身利益而使其更强大，而是在发展时不妥协其主要关注点。

条件规则（if, @when…@else）与谨慎引入的逻辑

CSS演进的一个主要前沿是通过if()函数和@when…@else at-rules引入原生条件，这些是CSS Conditional Rules Module Level 5规范的一部分。虽然仍处于早期草案阶段，这将允许开发者根据评估的条件应用样式，而无需转向JavaScript或预处理器。

更强大、有意的选择器

选择器一直是CSS的主要优势之一，以有针对性的方式扩展它们将使声明式表达关系和条件更容易，而无需类或脚本。

无JavaScript的作用域样式

开发者在基于组件的框架（如React或Vue）中面临的挑战之一是样式作用域。样式作用域确保样式仅应用于特定元素或组件，并且不会泄漏。过去，为了实现这一点，您需要实现BEM命名约定、CSS-in-JS或像CSS Modules这样的构建工具。CSS中的原生作用域样式，通过新的实验性@scope规则，允许开发者在特定上下文中封装样式，而无需额外工具。

注意事项和约束：为什么智能并不总是更好

推动更智能CSS伴随着控制和灵活性的重大权衡。多年来，历史表明向语言或框架或库添加新功能很可能会引入复杂性，不仅对新手，而且对专家开发者也是如此。危险不在于CSS获得力量，而在于这种力量如何被实现、教授和使用。

CSS最大的优势之一一直是其易接近性。设计师和初学者可以快速学习基础知识：选择器、属性和值。随着更多逻辑、作用域和高级选择器的引入，学习曲线变得更加陡峭。

随着CSS变得更强大，开发者越来越依赖工具来管理和抽象这种力量，如构建系统（例如webpack、Vite）、linter和格式化程序，以及具有严格样式约定的组件库。这创造了难以摆脱的依赖关系。

结论

我们刚刚走过了CSS的历史长廊，探索了它的现状，并窥见了它的未来可能是什么。我们都同意CSS已经从一种简单、声明式的语言发展成为一种动态、上下文感知的，是的，更智能的语言。当然，演进伴随着张力：一个更智能的样式语言，对脚本的依赖更少，但也是一个更复杂、学习曲线更陡峭的语言。

CSS的未来不应该是为了自身利益而添加逻辑的竞赛。相反，它应该是一种深思熟虑的扩展，力量与清晰度平衡，创新基于可访问性。

这意味着在发布新功能之前要问棘手的问题。这意味着确保新能力帮助解决实际问题而不引入新障碍。