为什么生成式 AI 在 CSS 理解上表现糟糕

CSS 就是这样一种东西：看起来很简单，直到你真正尝试理解它的运行逻辑。大多数人都认为 CSS 是一门容易学习的语言，但不知为何，能够解答微积分问题的 LLM，依然会被寥寥几行 CSS 难倒。

在本文中，我会分享自己对于 Generative AI 为何难以创建出优秀布局的思考，以及 TailwindCSS 如何帮助它们克服这一挑战。

假设我们按照 Web 最初设想的方式使用 CSS：单独维护一个 CSS 文件、定义选择器，然后通过链接引入样式表。在这样的前提下，我们来讨论一下 CSS 的本质。

1. 一切都取决于上下文

在 CSS 中，像 position: relative 这样一条简单的规则，就可能彻底改变布局，甚至影响其他所有属性的行为。因此，同一行代码可能表现出许多不同的效果，具体取决于它用在什么地方。

从设计上来说，你不可能只查看 CSS 文件中的某一小部分，就准确预测出浏览器最终会呈现什么效果。

对于任何布局属性，你都需要理解它的堆叠上下文、包含块、布局模式、writing-mode、direction，诸如此类，不胜枚举。

这些隐藏关系极其复杂，以至于很多开发者甚至意识不到它们的存在。我们经常只能通过反复试错来“修复”布局：不断调整各种属性，直到某种组合终于奏效。

现在，让我们把事情变得更糟一些！

2. CSS 永远不会告诉你完整的故事

一个 CSS 文件只能提供一半的上下文。

你可以阅读任意数量的选择器和属性，但在看到 HTML 之前，你根本不知道这些样式究竟会如何与真实元素关联起来。

这就像试图通过阅读顺序被打乱的字幕来理解一部电影。信息确实都在那里，却完全脱离了上下文。甚至可能更加糟糕。由于 CSS 具有层叠特性，就连那些你自以为已经理解的部分，也可能在后面发生变化。

3. CSS 没有唯一正确的写法

⚠️ 请仔细阅读下一段，每一个词都很重要。

CSS 是一门持续演进、声明式、具有层叠特性的语言。它由一个开放社区共同塑造，并由不同浏览器分别实现；每家浏览器都有自己的优先事项，同时又无法承受破坏性变更带来的代价。CSS 的抽象程度还不足以直接表达布局意图。

这就是为什么居中一个 div 会有那么多种方法。

除了有无数种方式可以实现同样的结果，编写 CSS 本身也存在同样多的方法论。你是否接触过 BEM、SMACSS、OOCSS、atomic CSS 等方案？如果没有，那么你也可以把自己的写法加入这份清单。

技术、约定和方法论的无穷组合，意味着我们无法用一种通用方式去理解不同项目中的 CSS。每个团队都有自己的风格，这进一步加剧了混乱，对 LLM 来说尤其如此。

现在，把这三个问题结合起来：

• 行为依赖上下文
• 缺失了一半的信息
• 没有一致的结构或约定

CSS 就变成了一道由依赖关系、样式覆盖和不可见上下文共同构成、难以预测的谜题。对于依赖清晰模式与关系的语言模型来说，“这简直就是一场噩梦”。

但 GenAI 也没有那么差，对吧？

Tailwind 被低估的贡献

在我看来，Tailwind CSS 是 AI 时代被低估的英雄。它为混乱建立了秩序，也为机器提供了一种可预测的样式推理方式。原因如下：

• 结构与样式共置： 在同一个地方提供完整的上下文。
• 具有明确主张： 一套规模较小且保持一致的工具类，意味着不需要猜测或自行发明约定，并且能够形成可重复的模式。
• 输出可预测： 每个 class 只负责一件事，不会产生意料之外的层叠影响。

这种可预测性，正是 Tailwind 对 LLM 友好的原因。所以下次你让 AI 帮你构建网页时，只需要说一句“使用 Tailwind”。反正它本来很可能也会这么做。😄

感谢阅读 :)

PS：我并不是在推广 Tailwind，也不是说它优于其他方案。我只是分享一些观察，解释为什么它如此适合 AI 模型。

部分评论可能仅对已登录的访客可见。登录后即可查看全部评论。

如需采取进一步措施，你可以考虑屏蔽此人和／或举报滥用行为。