CSS Is Logical

Original Article ↗ Hacker News Discussion ↗

CSS’s reputation for being “illogical” is challenged by those who argue it follows consistent but often opaque rules, especially around layout concepts like width vs. height, document flow, and percentage-based sizing. Many comments suggest the real problem is poor tooling, historical baggage, and mental models rooted in application UI rather than documents, which make features like specificity, the cascade, and newer selectors feel unintuitive. Alternatives and complements such as Tailwind, component-scoped styling, and CSS variables are framed as attempts to cope with this complexity rather than evidence that CSS itself lacks internal logic.

Debate over what “logical” means

  • Many argue “logical” in the article’s sense (“has consistent rules”) is trivial: any computer language qualifies.
  • Critics say the real issue is human usability: CSS can be consistent yet still be confusing, awkward, or “shitty.”
  • Others distinguish “logical” from “intuitive”: CSS may be rule-based but often clashes with developers’ mental models.
  • Some liken learning CSS to learning a foreign language or vim: once you internalize the model, it feels logical, but not beforehand.

Width, height, and percentage behavior

  • Several comments challenge the article’s “width looks up, height looks down” framing as misleading or flat-out wrong.
  • Clarification: percentage width and height are both defined relative to the containing block; the confusion arises from defaults:
    • Block elements default to width: 100% but height: auto (content-based).
    • This creates circular dependencies when using percentage heights inside containers whose heights depend on their content.
  • Users share patterns like setting html, body { height: 100%; } to make height: 100% behave as expected.
  • Some note oddities such as percentage padding/margin always being based on width, and padding-top behaving surprisingly.

Complexity, opacity, and tooling

  • Several argue CSS itself is not that complex, but its behavior is opaque: devtools don’t explain why a rule “didn’t work.”
  • Suggested improvements: debugger-like stepping through layout, visualizing specificity, and warnings for cyclic percentage dependencies.

Documents vs applications

  • Recurrent theme: CSS was built for flowing text documents, yet is heavily used for app-like UIs.
  • Some say modern features (flexbox, grid, nesting, container queries) now make app layouts quite feasible, though still fiddly for certain cases (e.g., centered overflow, split views).
  • Others wish for constraint-based layouts rather than deep nesting and intricate flex/grid setups.

Styling strategies, Tailwind, and specificity

  • Opinions split on Tailwind: some see it as a pragmatic fit for component-based apps; others view it as a “toy” and user-hostile for customization.
  • Specificity rules and !important are widely cited as sources of non-intuitive behavior and hacks (e.g., repeating classes to outweigh selectors).
  • Some rely on CSS variables and calc() to reintroduce a sense of systematic “logic” into their styles.