Incomplete list of mistakes in the design of CSS

Original Article ↗ Hacker News Discussion ↗

Origins of CSS Design Problems

  • Several comments argue many “mistakes” are consequences of history: early browser wars, rushed vendor features, and extreme backward-compatibility with tag-soup HTML and buggy engines.
  • Early CSS’s academic vision (e.g., true “cascading” between user/browser/author) largely failed; what remains is complexity like selector specificity.
  • Participants note a lack of user research into what designers actually needed (pinstriping, vertical alignment, drop shadows, robust layout), so real-world use cases lagged for years.

Headings, Semantics, and Accessibility

  • Default heading margins are criticized: equal top/bottom margins make headings visually attach to the wrong block.
  • Several argue having distinct visual styles for h1–h6 encourages misuse for appearance instead of structure, harming accessibility.
  • Strong push for a single heading element whose level is derived from nesting/sections; HTML5 sectioning was seen as a missed opportunity.
  • Others counter that semantics-only tags are underused if they don’t visibly “do something,” and misuse is inevitable regardless.

Layout: Tables vs CSS, Floats, Flexbox, Grid

  • Long-running frustration over the anti-table movement: developers were told “tables are bad” long before CSS had adequate layout tools or easy centering.
  • Some recall tables as powerful and conceptually simple for many layouts; others remember them as extremely brittle and hard to make responsive.
  • Tables are defended as the right primitive for tabular data and Excel copy/paste; people complain about devs forcing div/flex for data tables.
  • Floats are widely viewed as a design mistake (weird leakage, clearfix hacks). Grid and flexbox are seen as long-overdue fixes, though there’s debate over performance and when to use each.
  • Responsive design is critiqued for normalizing awkward patterns (e.g., sidebars dumped below content) that are still hard to express cleanly.

Cascade, !important, and Priority Systems

  • Some see the single !important level as the real mistake, not its syntax; others point out CSS already has multiple precedence dimensions (specificity, order, inline styles).
  • Cascade Layers are mentioned as a newer attempt to tame priority, though !important remains a special implicit layer.

Other CSS Quirks and Proposals

  • Frequent gripes: z-index and stacking contexts, margin collapsing, floats leaking out of blocks, display overloading both outer and inner behavior, confusing align vs justify in flexbox, and comment placement making CSS hard to round-trip from an object model.
  • Some want stricter or versioned CSS (opt-in “strict mode,” feature flags) to fix legacy decisions without breaking old sites; others note that any strict mode is useless if not universally supported.
  • Debate over units: px as a CSS “virtual” unit vs real device pixels and physical units. One side wants explicit device-pixel units for crisp grids/pixel art; the other says abstracted px and antialiasing are a feature on today’s diverse screens.

Meta-Reflections

  • Many wish for detailed post-mortems: which decisions went wrong, why, and how process (committees, vendors, research) could be improved.
  • There’s a mix of relief (“I’m not crazy, this really is unintuitive”) and resignation that most of these design errors are effectively permanent.