CSS 设计中的不完整错误列表
Incomplete list of mistakes in the design of CSS

原始链接: https://wiki.csswg.org/ideas/mistakes

## CSS 的遗憾:一份重新设计的愿望清单 本文概述了 CSS 设计历史上积累的许多被认为失误的地方,其中许多与一致性和可预测性有关。一些属性的命名很别扭(例如,`z-index` 应该为 `z-order`,`hyphens` 应该为 `hyphenate`),或者功能不合理(例如,表格上的 `vertical-align`)。 核心问题包括默认行为在实践中证明无用(如 `background-repeat: no-repeat`),轴向顺序不一致(定位属性采用垂直优先),以及解决方案过于复杂(如 `word-wrap`/`overflow-wrap`)。 建议改进颜色处理、Unicode 范围语法和 flexbox 的尺寸模型。 其他要点涉及解析歧义(字体名称)、布局怪癖(外边距折叠、表格布局)以及简化机会的错过(RGBA/HSLA、简写属性)。 作者还提倡更好地为选择器做好未来适应,并制定更强大的 `@import` 规则。最终目标是使 CSS 更加逻辑、易于维护,并且更容易构建工具。

## CSS 设计缺陷:一则 Hacker News 讨论总结 最近 Hacker News 上进行了一场关于 CSS 设计中长期存在的错误的讨论。对话强调了网页开发者面临的诸多痛点,这些痛点源于历史妥协和设计选择。 主要抱怨包括最初对使用 HTML 表格进行布局的过度反应(导致多年居中困难),边距折叠的复杂性,以及 flexbox 与 grid 的不直观性。许多人哀叹语义 CSS 和表现 CSS 之间缺乏明确区分,以及可靠地居中元素所面临的困难。 一些评论员指出早期的浏览器大战和匆忙的实现是许多问题的根本原因。另一些人则提倡诸如 CSS 版本控制或“严格模式”之类的功能,以实现向前兼容性并纠正过去的错误。讨论还涉及了有问题单位系统(像素与物理单位)以及 `!important` 仍然存在的问题。 最终,该帖子是对 CSS 演变的回顾,承认了它的优点,同时也指出了如果做出更好的设计选择,可以显著改善 Web 开发体验的领域。
相关文章

原文

That should be corrected if anyone invents a time machine. :P

  • white-space: nowrap should be white-space: no-wrap

  • animation-iteration-count should just have been animation-count (like column-count!)

  • vertical-align should not apply to table cells. Instead the CSS3 alignment properties should exist in Level 1.

  • vertical-align: middle should be text-middle or x-middle because it's not really in the middle, and such a name would better describes what it does.

  • Percentage heights should be calculated against fill-available rather than being undefined in auto situations.

  • Table layout should be sane.

  • Box-sizing should be border-box by default.

  • background-size with one value should duplicate its value, not default the second one to auto. Ditto translate().

  • background-position and border-spacing (all 2-axis properties) should take *vertical* first, to match with the 4-direction properties like margin.

  • Not quite a mistake, because it was a reasonable default for the 90s, but it would be more helpful since then if `background-repeat` defaulted to `no-repeat`.

  • The 4-value shorthands like margin should go counter-clockwise (so that the inline-start value is before the block-end and inline-end values instead of after them).

  • z-index should be called z-order or depth and should Just Work on all elements (like it does on flex items).

  • word-wrap/overflow-wrap should not exist. Instead, overflow-wrap should be a keyword on 'white-space', like nowrap (no-wrap).

  • The top and bottom margins of a single box should never have been allowed to collapse together automatically as this is the root of all margin-collapsing evil.

  • Partial collapsing of margins instead of weird rules to handle min/max-heights?

  • Tables (like other non-blocks, e.g. flex containers) should form pseudo-stacking contexts.

  • The currentColor keyword should have retained the dash, current-color, as originally specified. Likewise all other color multi-word keyword names.

  • There should have been a predictable color naming system (like CNS) instead of the arbitrary X11 names which were eventually adopted.

  • border-radius should have been corner-radius.

  • Absolutely-positioned replaced elements should stretch when opposite offset properties (e.g. left+right) are set, instead of being start-aligned.

  • The hyphens property should be called hyphenate. (It's called hyphens because the XSL:FO people objected to hyphenate.)

  • rgba() and hsla() should not exist, rgb() and hsl() should have gotten an optional fourth parameter instead (and the alpha value should have used the same format as R, G, and B or S and L).

  • Descendant combinator should have been » and indirect sibling combinator should have been ++, so there's some logical relationships among the selectors' ascii art

  • The *-blend-mode properties should've just been *-blend

  • The syntax of unicode ranges should have consistent with the rest of CSS, like u0001-u00c8.
  • Unicode ranges should not have had a separate microsyntax with their own tokenization or token handling. The tokenization hacks required either to make selectors (e.g., u+a) handle things that are unicode-range tokens, or make unicode-range handle the other huge range of tokens (numbers and dimensions with and without scientific notation, identifiers, +) are both horrible.

  • font-family should have required the font name to be quoted (like all other values that come from “outside” CSS). The rules for handling unquoted font names make parsing font stupid, as it requires a font-size value for disambiguation.
  • Flexbox should have been less crazy about flex-basis vs width/height. Perhaps: if width/height is auto, use flex-basis; otherwise, stick with width/height as an inflexible size. (This also makes min/max width/height behavior fall out of the generic definition.)

  • :empty should have been :void, and :empty should select items that contain only white space FIXED in the spec, waiting for implementations to check for Web-compat…
  • table-layout: fixed; width: auto should result in a fill-available table with fixed-layout columns.

  • text-orientation should have had upright as the initial value (given the latest changes to 'writing-mode').

  • The @import rule is required to (a) always hit the network unless you specify cache headers, and (b) construct fresh CSSStyleSheet objects for every import, even if they're identical. It should have had more aggressive URL-based deduping and allowed sharing of stylesheet objects.
  • Selectors have terrible future-proofing. We should have split on top-level commas, and only ignored unknown/invalid segments, not the entire thing.

  • :link should have had the :any-link semantics all along.

  • The flex shorthand (and flex-shrink and flex-grow longhands) should accept fr units instead of bare numbers to represent flex fractions.

  • The display property should be called display-type.

  • The list-style properties should be called marker-style, and list-item renamed to marked-block or something.

  • The text-overflow property should always apply, not be dependent on overflow

  • line-height: <percentage> should compute to the equivalent line-height: <number>, so that it effectively inherits as a percentage not a length

  • ::placeholder should be ::placeholder-text and :placeholder-shown should be :placeholder

  • overflow: scroll should introduce a stacking context

  • size should have been a shorthand for width and height instead of an @page property with a different definition

  • We probably should have avoided mixing keywords (span) with idents in the grid properties, possibly by using functional notation (like span(2)).
  • Comments shouldn't have been allowed basically everywhere in CSS (compare to HTML, which basically only allows them where content goes), because it makes them basically unrepresentable in the object model, which in turn makes building editing directly on top of the object model impossible
  • The alignment properties in Flexbox should have been writing-mode relative, not flex-flow relative, and thus could have reasonably understandable names like align-inline-* and align-block-*.

  • shape-outside should have had wrap- in the name somehow, as people assume the shape should also clip the content as in clip-path.

  • It shouldn't be !important — that reads to engineers as “not important”. We should have picked another way to write this.

  • 联系我们 contact @ memedata.com