Hacker News 中文摘要

RSS订阅

CSS设计缺陷不完全清单 -- Incomplete list of mistakes in the design of CSS

文章摘要

这篇文章总结了CSS设计中的一些缺陷和改进建议,包括属性命名不合理(如white-space: nowrap应改为no-wrap)、默认值设置不当(如box-sizing应默认为border-box)、语法逻辑不一致(如百分比高度计算规则)等问题,并提出了更合理的替代方案。

文章总结

CSS设计缺陷不完全清单 [CSS工作组维基]

以下是CSS规范设计中值得商榷的部分(假设有时光机可以修正的话:P):

核心语法问题: - 属性命名欠妥: * white-space: nowrap应命名为no-wrap * animation-iteration-count简化为animation-count(保持与column-count一致) * vertical-align: middle应改为text-middlex-middle以准确描述其行为 * z-index更适合命名为z-orderdepth

布局系统缺陷: - 盒模型: * 默认应采用border-box盒模型 * 百分比高度在auto情况下应基于fill-available计算 - 表格布局需要更合理的实现 - 绝对定位元素在设置对立偏移属性时应自动拉伸

属性设计问题: - 背景相关: * background-size单值时应自动复制而非默认auto * background-repeat默认值应考虑改为no-repeat - 文本处理: * word-wrap/overflow-wrap应作为white-space的关键字 * hyphens属性本应命名为hyphenate - 颜色系统: * 应采用可预测的命名系统(如CNS)而非X11颜色名 * currentColor应保留连字符为current-color

语法规范问题: - 选择器: * 后代组合器应用»,间接兄弟组合器用++ * 应增强选择器的未来兼容性设计 - 函数参数: * rgb()/hsl()应通过可选第四参数支持透明度 * translate()单值时应自动复制

其他值得注意的问题: - 边距折叠机制是"万恶之源",单个盒模型的上下边距不应自动折叠 - @import规则应支持更积极的URL去重 - 注释系统设计导致难以构建基于对象模型的编辑器 - !important声明方式容易产生歧义

(注:已过滤部分技术细节和已修复项,保留核心设计争议点)

评论总结

以下是评论内容的总结:

  1. 设计决策缺乏用户研究

    • edent批评许多计算设计选择仅基于个人观点,缺乏广泛社区咨询
      "So many weird design choices...without considering other viewpoints"
      "a tiny cabal engaging in groupthink often produces unhelpful results"
  2. CSS具体问题争议

    • nfw2反对标题样式统一性:
      "h1, h2, h3 should not have different styles...leads to broken accessibility"
    • groby_b批评!important设计:
      "'one' is often a mistake"(指单一优先级设计)
    • Devasta建议简化样式属性语法:
      "You should be able to write
      "
  3. 历史遗留问题反思

    • anonymars嘲讽表格布局的反复:
      "web's smug collective declaration that tables were dead"
    • felipc批评标准制定缓慢:
      "slowness in the early 2010s to provide badly needed new functionality"
  4. 改进建议

    • silverwind提议严格模式:
      "opt-in 'strict mode' for CSS that fixes all these issues"
    • eviks建议版本控制:
      "deal with...CSS versioning/features where you can opt into..."
  5. 开发者困惑点

    • 3eb7988a1663吐槽flexbox术语:
      "align vs justify...Could not have used something like main-axis?"
    • nrhrjrjrjtntbt寻求边距折叠解释:
      "Didnt know it was a thing until now but ive seen it happen"
  6. 技术细节争议

    • Izkata反驳绝对定位元素行为:
      "They do with left+right, and have done this for a very long time"
    • TZubiri质疑单位设计:
      "units for pixels and centimeters, despite not being able to reliably control"

关键矛盾集中在:设计决策过程透明度(8条)、具体语法问题(6条)、历史包袱处理(4条)。开发者普遍期待更直观的API设计和更灵活的标准演进机制。