CSS为什么这么难？Julia Evans的深度反思

哎李博，你最近有没有看Julia Evans那篇文章？就是她从Tailwind迁移回原生CSS的那个。 看了看了，我还转发了。她那句话说得特别好——'在过去十年里，我学会了真正热爱和尊重CSS这项技术'。 对对对就是这句！我当时看到就觉得，哇，这个心路历程也太真实了吧。说实话我刚做前端产品的时候，团队里的开发也是天天吐槽CSS。 哈哈，经典名场面——'用CSS居中一个元素'，这个梗都快成前端圈的接头暗号了。 对！我之前还真不理解，居中有什么难的？后来才知道这里面水深得很。你给我讲讲这到底是怎么回事？ 好，这个得从CSS的出生说起。CSS诞生于1996年，最初是给学术文档加样式用的，不是为了做复杂的应用界面。 它的核心模型叫文档流，简单说就是内容从上往下流。水平方向你有一定控制权，但垂直方向？浏览器说了算。 所以垂直居中才那么痛苦？ 对！早期开发者为了居中一个东西，得用margin auto、line-height hack、position absolute配transform，甚至display table-cell。每种方法都有局限，组合起来就是一团乱麻。 等会儿，display table-cell？？用表格来居中？这也太离谱了吧。 哈哈对，那个年代就是这么野。但你知道最关键的点是什么吗？Julia Evans说了一个特别有洞察力的事—— 她说'居中'这个概念本身就不是一个单一的问题。水平居中、垂直居中、flex容器里居中、grid里居中、文本居中、块级元素居中——这些场景全都不一样。 哦……所以CSS提供多种居中方式，其实不是设计缺陷，反而是合理的？ Bingo！这就是她最核心的观点——CSS之所以复杂，是因为Web布局这个问题本身就很复杂。不是CSS烂，是问题难。 懂了懂了。但说实话，我观察到一个现象，就是很多开发者宁愿用框架也不愿意学CSS本身。你觉得这是为什么？ 因为CSS在技术社区的地位一直很尴尬啊。它不像JavaScript有复杂的运行时逻辑，也不像后端涉及系统架构。很多人觉得它是'样式层面的小事'，不值得深入。 你们研究院的人是不是也这样想？ 得了吧，我们研究院的人写CSS那叫一个惨不忍睹，别提了。 哈哈哈哈！但说回来，从Bootstrap到Tailwind，这些框架的演化本身就说明大家一直在跟CSS的复杂性较劲吧？ 没错。Bootstrap是2011年Twitter开源的，思路是预定义组件，你拼装就行。但问题是定制困难，做出来的网站全长一个样。 Tailwind走了另一条路，原子化CSS，把每个属性拆成工具类直接写在HTML里。开发速度确实快，但你对底层CSS的理解会越来越弱。 这不就是——用框架的动机如果是'我不想学CSS'，那迟早要还债？ 就是这个意思！Julia Evans从Tailwind迁出来就是在还这个债。但她发现，还完债之后，CSS远比她想象的优雅。 那现代CSS到底进化到什么程度了？我感觉很多人的认知还停留在float布局的年代。 我跟你说，现代CSS的变化是翻天覆地的。Flexbox和Grid这两个东西，直接把布局问题从地狱模式降到了正常模式。 以前用float布局——那个属性本来是设计给文字环绕图片的，结果被滥用了十几年做页面布局。要手动清除浮动，做不了等高列，垂直对齐更是噩梦。 然后Flexbox和Grid一来，这些问题全解决了？ 对！Flexbox管一维方向的弹性排列，Grid管二维的结构化布局，两者互补。以前需要JavaScript计算或者复杂hack才能实现的东西，现在几行声明式代码搞定。 等等你说声明式，这个词我在产品文档里老看到，具体到CSS里是什么意思？ 就是你只告诉浏览器'我要这个元素居中'，而不是告诉它'算父容器宽度，减子元素宽度，除以二，设成左边距'。你描述结果，不指定步骤。 哦！所以浏览器有更大的优化空间，但开发者得理解浏览器的布局算法才能预测结果。 你看你还说你不懂技术，这个总结比我们组好多人都到位。 嘿，你们产品经理也是有脑子的好吧！那除了Flexbox和Grid，还有什么新东西？ Container Queries！这个CSS社区呼吁了快十年，2023年才全面支持。以前响应式设计只能看视口宽度，现在组件可以根据自己父容器的大小来调整样式。 还有:has()选择器，被称为CSS的父选择器。以前根据子元素状态选父元素只能靠JavaScript，现在纯CSS就行。 真的假的？这不就意味着CSS已经不只是'描述样式'了，它有逻辑判断能力了？ 没错！CSS正在从样式描述语言进化成样式编程语言。这个趋势很多人完全没意识到。 所以Julia Evans说的那句话就特别有道理——如果你还用十年前的眼光看CSS，当然觉得它又难又不好用。 对。而且CSS还有一个特别优雅的设计哲学——容错性。遇到不认识的属性，它不报错，静默忽略继续解析。这样新特性可以渐进式采用，不会搞崩旧浏览器。 这个设计思路确实很Web。跟编程语言一报错就停那种完全不一样。 所以Julia Evans最后那句总结我特别认同——CSS is hard because it's solving a hard problem。承认问题复杂，才是解决问题的第一步。 嗯，我觉得这个态度不只适用于CSS。面对任何'看起来很难'的东西，与其贬低绕过，不如认真学明白它背后的设计逻辑。 说得好，小雨同学今天很有哲学家范儿啊。 得了吧，我就是被你们技术人感染的。行，今天就聊到这儿，下次有好文章再继续。