CSS 是有逻辑的

原文 ↗ Hacker News 讨论 ↗

CSS 被认为“没有逻辑”的说法遭到质疑，因为许多人认为它实际上遵循一套一致但常常不透明的规则，尤其是在布局概念上，如宽度与高度、文档流以及基于百分比的尺寸。许多评论认为，真正的问题在于工具不足、历史包袱，以及与文档而非应用 UI 相关的心智模型，这些因素让 specificity、cascade 和较新的选择器等特性显得不直观。Tailwind、组件作用域样式和 CSS variables 等替代或补充方案，被视为应对这种复杂性的手段，而不是 CSS 本身缺乏内在逻辑的证据。

关于“逻辑”意味着什么的争论

  • 许多人认为，按文章里的意思（“有一致的规则”），“逻辑”这个说法太平常了：任何计算机语言都符合。
  • 批评者说，真正的问题是人类可用性：CSS 可以是一致的，但仍然会让人困惑、别扭，或者“糟糕”。
  • 也有人把“逻辑”和“直觉”区分开：CSS 也许是基于规则的，但往往与开发者的心智模型相冲突。
  • 有些人把学习 CSS 比作学外语或 vim：一旦你内化了这个模型，它就会显得有逻辑，但在那之前不会。

宽度、高度与百分比行为

  • 多条评论质疑文章中“width 往上看，height 往下看”的说法，认为这有误导性，甚至完全错误。
  • 澄清：百分比宽度和高度都是相对于包含块定义的；困惑来自默认值：
    • 块级元素默认 width: 100%，但 height: auto（基于内容）。
    • 当在高度依赖内容的容器里使用百分比高度时，就会产生循环依赖。
  • 用户分享了诸如设置 html, body { height: 100%; } 的模式，以让 height: 100% 按预期工作。
  • 也有人提到一些怪异之处，比如百分比 padding/margin 总是基于宽度，以及 padding-top 的行为出人意料。

复杂性、透明度与工具

  • 有人认为 CSS 本身并不那么复杂，但它的行为缺乏透明度：devtools 不会解释为什么某条规则“没有生效”。
  • 建议的改进包括：像调试器一样逐步执行布局、可视化 specificity，以及对循环百分比依赖发出警告。

文档与应用

  • 一个反复出现的主题是：CSS 是为流式文本文档设计的，但如今却被大量用于类似应用程序的界面。
  • 有人说现代特性（flexbox、grid、nesting、container queries）现在已经让应用布局相当可行，不过在某些场景（例如居中溢出、分割视图）仍然很别扭。
  • 也有人希望有基于约束的布局，而不是深层嵌套和复杂的 flex/grid 组合。

样式策略、Tailwind 与 specificity

  • 对 Tailwind 的看法分裂：有人把它看作适合基于组件的应用的务实方案；也有人认为它是个“玩具”，而且在自定义方面对用户不友好。
  • specificity 规则和 !important 被广泛视为非直觉行为和各种权宜之计的来源（例如重复类名来压过选择器）。
  • 一些人依赖 CSS variables 和 calc()，把某种系统性的“逻辑感”重新引入样式中。