4 ms·

This list is a good idea for the reason stated in a sibling comment: it could highlight gotchas for people learning CSS. However it fails to do so. The list is

This list is a good idea for the reason stated in a sibling comment: it could highlight gotchas for people learning CSS. However it fails to do so. The list is mostly subjective preferences, and as such is far too long, leaving the actual universally-accepted gotchas to get completely lost among the rest. Even some of the points that most would agree on are still such minor gripes as to be almost irrelevant, so listing them just detracts from the significance of some of the very large actual mistakes in CSS. Here's a few choice subjective examples: > Table layout should be sane. This is not a helpful bullet point without expanding further. > The 4-value shorthands like margin should go counter-clockwise (so that the inline-start value is before the block-start value). This would make sense for an implementer and make resulting CSS more terse for common use cases but it would be less intuitive for people newly learning CSS. > z-index should be called z-order or depth and should Just Work on all elements (like it does on flex items). This would have caused a lot of arms race z-indices, particularly in sites loading widgets generated by third party scripts. It would make z-index less confusing but without scoped CSS this change could get quite problematic. > 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. I 100% agree but I acknowledge that many don't, so I don't think this belongs here. This is basically like the tabs and spaces debate. > descendant combinator should have been » and indirect sibling combinator should have been ++, so there's some logical relationships among the selectors' ascii art wat > :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… This is BAD. Whitespace isn't empty (nor does it display as such, it collapses to one space, not zero), so that change is incredibly unintuitive. :empty should stay as currently, :blank might fit the new use case.

chrismorgan 6y ago
And :void would be a singularly terrible name anyway, because “void element” has a particular meaning in HTML (⅌ https://html.spec.whatwg.org/multipage/syntax.html#void-elements https://html.spec.whatwg.org/multipage/syntax.html#void-elem...): an element that cannot have any children and accordingly has no end tag in the HTML serialisation, such as <img>, <hr> and <br>. Renaming :empty to :void would completely undermine this, since :empty matches any elements that have no text or element children (note: not “have no children”, because comments are allowed), regardless of whether or not they can. The whole idea of allowing :empty to match elements containing only whitespace is fraught. Whitespace could be collapsed completely, to one space, or not at all, depending on both the surrounding markup and the values of such properties as display and white-space. If you decided the concept was worthwhile supporting, then :blank would be a decent name. But changing :empty to accept whitespace, well, that’d be a far worse design mistake.
Izkata 6y ago
> > descendant combinator should have been » and indirect sibling combinator should have been ++, so there's some logical relationships among the selectors' ascii art > wat Skipping the combined character mistake, it means it should have been: > for direct descendant, >> for indirect descendants (instead of just a space), + for direct siblings, ++ for indirect siblings (instead of ~).
- the_other 6y ago
  Indirect descendant uses just whitespace because it’s the most common and most useful relation. Making it two characters would have annoyed everyone using the language every time they used it.
  - chrismorgan 6y ago
    It would have nudged people in the direction of using direct descendants much more of the time, which is a Good Thing, as they are far easier to optimise, and are much less likely to match things by accident.
    - the_other 6y ago
      That would have made applying broad strokes design choices much harder, and is generally less useful. CSS is general-first, specific second. Making people use direct descendants more often would make stylesheets more verbose and complicated. It would have stymied the power and expressivity of the language.
      - deleted 6y ago
        [deleted]
- inopinatus 6y ago
  Oh, but it makes so much sense as ». It's an expensive operator, it should be harder to type.

chrismorgan 6y ago

And :void would be a singularly terrible name anyway, because “void element” has a particular meaning in HTML (⅌ https://html.spec.whatwg.org/multipage/syntax.html#void-elements https://html.spec.whatwg.org/multipage/syntax.html#void-elem...): an element that cannot have any children and accordingly has no end tag in the HTML serialisation, such as <img>, <hr> and <br>. Renaming :empty to :void would completely undermine this, since :empty matches any elements that have no text or element children (note: not “have no children”, because comments are allowed), regardless of whether or not they can. The whole idea of allowing :empty to match elements containing only whitespace is fraught. Whitespace could be collapsed completely, to one space, or not at all, depending on both the surrounding markup and the values of such properties as display and white-space. If you decided the concept was worthwhile supporting, then :blank would be a decent name. But changing :empty to accept whitespace, well, that’d be a far worse design mistake.

Izkata 6y ago

> > descendant combinator should have been » and indirect sibling combinator should have been ++, so there's some logical relationships among the selectors' ascii art > wat Skipping the combined character mistake, it means it should have been: > for direct descendant, >> for indirect descendants (instead of just a space), + for direct siblings, ++ for indirect siblings (instead of ~).

the_other 6y ago
Indirect descendant uses just whitespace because it’s the most common and most useful relation. Making it two characters would have annoyed everyone using the language every time they used it.
- chrismorgan 6y ago
  It would have nudged people in the direction of using direct descendants much more of the time, which is a Good Thing, as they are far easier to optimise, and are much less likely to match things by accident.
  - the_other 6y ago
    That would have made applying broad strokes design choices much harder, and is generally less useful. CSS is general-first, specific second. Making people use direct descendants more often would make stylesheets more verbose and complicated. It would have stymied the power and expressivity of the language.
    - deleted 6y ago
      [deleted]
inopinatus 6y ago
Oh, but it makes so much sense as ». It's an expensive operator, it should be harder to type.