HN Debrief

CSS: Unavoidable Bad Parts

  • Programming
  • Web Development
  • Developer Tools
  • Accessibility

The post argues that several frustrating parts of CSS are not accidents but structural problems, then offers coping advice like avoiding far-reaching selectors, preferring semantic HTML, being skeptical of wrappers, and questioning responsive breakpoints and pixel-based sizing. The author also says up front they have not written production CSS, which shaped almost every reaction.

If you build product UI on the web, treat this post as a prompt to review your CSS assumptions, not as current guidance. The useful move is to standardize on a modern layout approach, test accessibility settings like larger default text, and be explicit about when extra markup is buying maintainability rather than papering over weak CSS.

Discussion mood

Mostly dismissive and annoyed. The strongest reaction was that the post gives confident guidance from outside production CSS, uses assumptions that fit simple documents better than modern product UI, and ignores how much Flexbox, CSS Grid, and newer selectors have shifted day-to-day practice.

Key insights

  1. 01

    Wrappers are often defensive component design

    Wrappers keep complex components stable when they are dropped into unknown parent layouts and mixed with awkward content like bare text, icons, multiline labels, and custom-styled checkboxes. The point is not that wrappers are always semantically meaningful. It is that they buy composability and save you from a pile of fragile CSS edge cases that only show up later.

    Judge wrappers by whether they isolate component behavior across contexts. If a component will be reused widely, a small amount of extra markup can be cheaper than debugging layout breakage in every host container.

      Attribution:
    • bastawhiz #1
  2. 02

    Modern CSS really has reduced wrapper pressure

    CSS Grid, Flexbox, `gap`, `subgrid`, `display: contents`, and `:has()` now solve problems that used to require extra divs or brittle descendant selectors. That does not eliminate wrapper elements, but it changes the baseline. Advice formed before these features became practical overstates how trapped you still are.

    If your team still reaches for wrapper divs by reflex, revisit the patterns with current CSS. A design system audit can often remove markup and simplify components without a visual rewrite.

      Attribution:
    • WorldMaker #1
    • nicoburns #1
    • grebc #1
    • matt_kantor #1
    • lawnmowed #1
  3. 03

    Accessibility sizing is more subtle than use rem everywhere

    Relative text sizing got broad support, but tying all spacing to `rem` was called out as a real mobile accessibility bug. Users who increase default font size often need the text, not giant padding that steals viewport space. Another useful correction was that `font-size-adjust` is mainly about matching fallback and primary font metrics to reduce layout shift, not a general fix for the meaning of `px`.

    Use relative units for text and test with larger browser default fonts on phones. Keep spacing tokens independent enough that text can grow without turning compact screens into mostly whitespace.

      Attribution:
    • elxr #1
    • sheept #1
    • TonyStr #1
    • LoganDark #1
    • pramodbiligiri #1
  4. 04

    CSS nesting can recreate specificity problems

    Nesting looks cleaner, but it makes it easy to smuggle in longer selectors and pile on specificity. Teams that already struggle to reason about overrides can end up back in the same hole Sass users created years ago, just with native syntax this time.

    Set a lint rule or team convention that keeps most rules to a single class selector. Treat extra qualifiers and deep nesting as exceptions you must justify.

      Attribution:
    • lelandfe #1
  5. 05

    Criticism is useful even without a replacement

    Several comments pushed back on the idea that CSS complaints are invalid unless someone presents a better universal platform. The web remains the most open and vendor-neutral app surface most teams have, so the practical path is iteration, not abandonment. Complaints are part of how the platform improves.

    Do not read frustration with CSS as a signal to jump platforms. Use it to identify which pain points need local conventions now and which are worth tracking in the evolving standards.

      Attribution:
    • ozim #1
    • tiborsaas #1
    • granra #1

Against the grain

  1. 01

    CSS pixels are messy in theory but usable

    The complaint about CSS units was challenged as technically true but overstated. On a normal non-Hi-DPI setup at default scaling, `px` often maps directly enough to device pixels that developers can get exact measurements in practice. The abstraction gets fuzzy across scaling modes and modern displays, but it is not pure nonsense.

    Do not ban `px` out of ideology. Use relative units where accessibility or scaling matters, and use pixels where hard edges or fixed measurements are the simpler tool.

      Attribution:
    • pathartl #1
  2. 02

    Flexbox covers more GUI layout than critics admit

    One commenter argued that a lot of responsive desktop-style UI can be modeled cleanly as nested horizontal and vertical boxes, much like old GUI builders such as QtCreator or Glade. In that framing, extra divs are not a CSS failure so much as the web's version of explicit layout containers and spacers.

    For internal tools and app-like interfaces, a disciplined Flexbox mental model may get you farther than hunting for a more general layout theory. Train the team on a small set of container patterns and reuse them.

      Attribution:
    • themafia #1
    • edoceo #1
  3. 03

    Responsive HTML itself is still a success

    The stronger claim that semantic HTML and CSS failed was answered with a narrower defense: one HTML structure adapting from phone portrait to wide desktop is already a major win. That is different from fully swappable CSS, but it is still a hard problem that the platform usually solves well enough.

    Separate complaints about authoring ergonomics from the platform's actual output. If your product serves many devices from one document structure, CSS is already delivering on an important part of the bargain.

      Attribution:
    • fragmede #1

In plain english

:has()
A CSS relational selector that lets you style an element based on what it contains or what appears near it.
CSS
Cascading Style Sheets, the language used to control the visual appearance of web pages.
CSS Grid
A CSS layout system for placing items into rows and columns with more explicit two-dimensional control than Flexbox.
display: contents
A CSS value that makes an element itself disappear from layout while keeping its children in the document structure.
Flexbox
A CSS layout system for arranging items in a row or column and distributing space between them.
font-size-adjust
A CSS property that adjusts font rendering so fallback fonts keep a similar apparent size to the intended font.
gap
A CSS property that adds consistent spacing between items in flex or grid layouts.
Glade
A user interface designer for GTK applications that lets developers lay out widgets visually.
Hi-DPI
High dots per inch, describing displays with a high pixel density where one CSS pixel may map to multiple hardware pixels.
HTML
HyperText Markup Language, the standard language used to structure content on web pages.
px
A CSS pixel, a web measurement unit that does not always map exactly to a physical screen pixel.
QtCreator
A graphical development environment for Qt that includes tools for building desktop user interfaces.
rem
A CSS length unit based on the font size of the root element, usually the browser's default text size.
Sass
A CSS preprocessor that adds features like variables and nesting before the code is compiled to standard CSS.
subgrid
A CSS Grid feature that lets a nested grid inherit row or column tracks from its parent grid.
UI
User interface, the screens and controls people use to interact with software.

Reference links

CSS accessibility and typography

CSS layout and best practices

Custom elements and HTML behavior

Alternative layout systems

  • TeX
    Offered as a powerful layout and typesetting system that solves a different class of problems than CSS.
  • WEB programming system
    Included as a joke follow-up on TeX working on WEB, referring to Knuth's literate programming system.
  • HiTeX
    Mentioned as a TeX extension that supports viewer-controlled page sizes, though with little adoption.