Mistakes in the Design of CSS (2013)

Original Article ↗ Hacker News Discussion ↗

Complaints about long-standing quirks in CSS — from the cascade and specificity rules to margin collapsing, `z-index`, and the default `box-sizing` model — resurface as developers reflect on how these choices still cause confusion and bugs decades later. Many argue that CSS’s inheritance-centric design and lack of stronger abstraction and composition tools pushed the ecosystem toward preprocessors and utility frameworks like Tailwind, which in turn weaken semantic styling. Others defend the web stack’s backwards compatibility and ubiquity, but several voices imagine alternative layout systems (constraints, flex-by-default, or custom renderers) that could offer cleaner, more predictable behavior if not for entrenched standards and adoption hurdles.

Scope: CSS vs the whole frontend stack

  • Some argue “the entire frontend web stack” feels like a design mistake, locked into old tech, unlike the more flexible backend.
  • Others counter that modern JS/HTML/CSS can build extremely complex apps and run everywhere, which is a major strength.
  • There is disagreement on what counts as “frontend” (e.g., server-side rendered components and React Server Components blur the line).

Alternatives to the web/CSS stack

  • Proposed alternatives include native cross‑platform UI toolkits, Electron-style runtimes, Flutter/Dart, WASM + WebGL/canvas, or even entirely new renderers and formats.
  • Critics note canvas/WebGL UIs have deep, possibly unfixable issues (accessibility, privacy, integration with browser features).
  • Many point out the adoption barrier: you still need browsers to support it, or it must compile to CSS/HTML, which limits how different it can really be.

Cascade, !important, and inheritance

  • Several consider cascading and inheritance the core design mistake: specificity rules are hard to reason about, and debugging overrides is painful.
  • Others see the cascade as elegant when used sanely and note it originally balanced browser, user, and author styles.
  • !important is widely misunderstood; one comment explains it as moving a rule into a higher origin layer, designed so users can override sites, not as a generic “override everything” switch.

Layout, box model, and specific pain points

  • Commonly cited missteps: box-sizing defaulting to content-box, inconsistent coordinate orders (vertical vs horizontal first), margin-collapsing semantics, and the awkwardness of z-index.
  • Some argue margins should conceptually belong to containers, not elements, and that layout should have been a constraint system from the start.
  • Flexbox and Grid are praised but seen as arriving too late; older float/table hacks are viewed as evidence of poor early layout design.

Utility classes, Tailwind, and semantics

  • Many criticize Bootstrap/Tailwind and utility-class approaches for eroding semantic CSS and resembling inline styles.
  • Others report becoming reluctant Tailwind converts, arguing isolation and component-local styling matter more than global abstractions.
  • There is debate over Tailwind’s @apply, composition vs repetition, and whether the real issue is CSS itself or modern app‑centric development practices.