前段时间在抖音上看到一位大佬直播，他试图用纯自然语言指挥 AI 编写代码。本应是展现高效便捷的炫技时刻，结果却在一个看似简单的样式定位问题上栽了跟头。他反复调整提示词，折腾了半个多小时，问题依然悬而未决，最终让我耗尽耐心退出了直播间。
这个现象引人深思：难道最简单的 CSS 样式，反而成了阻碍 AI 编程发展的最大拦路虎吗？这似乎预示着一个趋势：在 AI 时代，精通 CSS 的程序员可能会拥有巨大的优势。
作为一名前端开发，我使用 AI 辅助编码时，确实很少遇到它完全无法解决的 CSS 难题。它能够快速生成一些繁琐的样式代码，例如复杂的渐变或背景图案，从实现功能的角度看，效率确实很高。
然而，它生成的代码质量却常常令人不敢恭维。对于一个有代码洁癖的开发者来说，每次看到 AI 的输出，都不得不花费大量时间进行重构和优化。那么，究竟是哪些因素在“污染” AI 的 CSS 水平呢？我们以 Tailwind CSS 为例，来看几个典型的“病症”。
1、对 w-full 的执念
AI 似乎对 div 等块级元素默认宽度为 100% 这一基本规则缺乏认知。它总是过度担心容器的宽度会受到影响，只要遇到容器组件，就不假思索地加上 w-full 类名。
尤其是在仅要求它输出局部代码片段时，这种情况尤为严重。这不仅增加了无意义的类名，也反映出它对HTML/CSS基础布局的上下文理解不足。
2、无脑滥用 flex 布局
Flexbox 的滥用，堪称 AI 输出样式代码的“重灾区”。在它看来，仿佛任何布局离开了 flex 就无法实现。
无论是左右结构还是上下结构，一律使用 flex。这种“废话文学”在布局上体现得淋漓尽致。问题在于，一旦用了 flex，为了确保布局正确，它又不得不补充如 flex-col、justify-center 等一系列冗余类名，连带子元素也需要进行额外调整。
它完全无视浏览器默认的文档流（从上到下）布局规则，强行用 flex 制造出一堆“样式屎山”。
3、意义不明的类名堆砌
有时候，AI 会输出一长串令人费解的样式类名，其目的令人摸不着头脑。
仔细审视才发现，这似乎是 AI 从某些新手代码中学到的“居中焦虑症”发作——生怕内容对不齐，于是把所有与居中相关的样式全部堆上去。
经过手动优化，实现同样效果的代码可以简洁得多：
<div class="flex size-full items-center justify-center">
<!-- ... -->
</div>
这种对比让人哭笑不得。你说它功能实现了吗？实现了。效率高吗？高。但代码质量，实在令人难以接受。
4、对层叠上下文理解的局限
在处理定位元素时，AI 往往倾向于使用极大的 z-index 数值，试图用“暴力”解决遮挡问题。
除非在提示词中明确提出，要求它理解父子元素间的层叠关系与层叠上下文的嵌套规则，它才有可能处理好项目的整体定位逻辑。而且这通常依赖于全局上下文，如果只是在单个文件中提问，你指出遮挡问题，它很可能只是简单地给出一个更大的 z-index 值，最终问题依旧。这让我又想起了那个直播半小时未果的层级难题。
5、样式体积膨胀的潜在风险
样式代码的无节制膨胀带来的影响是巨大的，尤其在拥有数千个页面的大型项目中，其累积的副作用不可忽视。
原子化 CSS 的本意是通过复用减少最终样式文件的体积。但 AI 对 Tailwind CSS 的滥用，可能会让这一优势荡然无存，甚至适得其反。
原因在于 Tailwind CSS 的工作原理（JIT 模式）：你在 HTML 中编写了哪个类名，它就在编译阶段生成对应的原子 CSS 规则。例如，你使用了 w-1，就会生成：
.w-1 {
width: calc(var(--spacing) * 1); /* 0.25rem = 4px */
}
这意味着，如果项目中因 AI 的滥用而存在大量非必要的、独特的类名组合，就会生成大量冗余的原子样式。原子化 CSS 之所以能减负，并非其本身体积小（全覆盖的样式库可能高达 10MB），而是因为它通过“按需生成”的机制，只打包项目中实际用到的样式。
然而，如果 AI 无节制地创造新组合，CSS 的体积将逐渐逼近全量覆盖的规模，这对于许多追求性能的项目来说是无法接受的。更糟糕的是，如果直接编写原生 CSS，这种膨胀将毫无上限。
想象一下，当你用 AI“爽快”地堆砌出上千个页面后，老板忽然质疑：“这个项目加载怎么有点慢？优化一下。” 面对这种程度的“样式债”，重构和优化的工作量将是噩梦级别的。
6、如何引导 AI 走向正轨
要避免上述问题，一个思路是在项目中建立并遵循严格的样式规范。在编码时，尽量基于如 Ant Design 这类本身具有严格设计规范的 UI 库来编写代码，减少直接生成底层样式的机会。
如果无法使用成熟的 UI 库，那么对开发者自身的能力和项目规范的要求就更高了。
另一个更直接的方法是在给 AI 的指令（System Prompt 或任务描述）中，明确加入项目特定的 CSS 规则，例如：
Role: 资深前端工程师
Task: 使用 Tailwind CSS 实现...
Requirements:
1. No Magic Numbers: 严禁使用 [] 任意值语法（如 h-[50px]），严格使用 Tailwind 标准工具类（如 h-12）。
2. DRY 原则: 如有重复元素，请封装成组件或通过循环渲染，禁止复制粘贴冗余的 class 字符串。
3. 色彩规范: 仅使用 slate 和 indigo 色系，避免混用多种灰色。
4. 可访问性: 必须包含合适的 hover、focus 交互状态。
5. 代码整洁: 单个元素的 class 若超过 5 个，应考虑使用 clsx 库进行管理或合理换行。
7、总结
无论如何，在 AI 辅助编程成为常态的今天，深刻掌握 CSS 核心原理对于开发者而言，将是一项持续增值的竞争优势。那些试图仅靠 AI 来完成项目的新手、产品经理、设计师乃至后端工程师，都会发现 CSS 是他们难以逾越的鸿沟。事实上，由于长期深耕后台管理系统等特定领域，许多前端开发者自身的 CSS 功力也有待加强。
理解层叠、布局、视觉格式化模型等底层机制，能让你不仅是在使用 AI，更是在有效地驾驭和修正它，确保产出代码的质量与性能。这或许就是未来工程师的重要价值所在。关于前端框架的工程化实践与代码质量管理，你可以在前端框架/工程化板块找到更多深入的讨论。
发表于 昨天 03:20
|
查看: 3|
回复: 0
