Modern CSS Code Snippets: Stop writing CSS like it's 2015

Original Article ↗ Hacker News Discussion ↗

Trust in the Site & “AI-Polished” Aesthetic

  • Several people say the gradient-heavy, tile/hover design feels like an AI-generated or generic marketing template, which makes them initially distrust the resource.
  • That skepticism is reinforced when users quickly find incorrect claims about browser support (e.g. sibling-index(), interpolate-size, field-sizing, scrollbar-gutter, input:user-invalid demo).
  • The author later notes having fixed many issues after feedback, but some commenters still view the site as “latest Chrome CSS” rather than truly “modern CSS”.

Modern CSS vs 2015-Era Compatibility

  • One camp argues 2015-level CSS (flexbox, etc.) is “good enough” and more inclusive of old corporate machines, under-updated mobiles, and IE/legacy scenarios.
  • Others counter that IE11 and very old browsers are effectively gone or dangerously insecure, and clinging to them is a net loss.
  • Some suggest using modern CSS where appropriate with PostCSS/polyfills, and falling back only when required by business constraints.

Tailwind, Utility Classes & Separation of Concerns

  • Big split over Tailwind:
    • Fans like colocation, no class naming, and avoiding global CSS/cascade complexity; they see it as a pragmatic standard convention and good fit for componentized UIs.
    • Critics see unreadable “class soup”, poor reusability, hard-to-edit “write-only” markup, and duplication that semantic CSS or component libraries could avoid.
  • Broader debate over whether “separation of concerns” should be HTML vs CSS, or component-level “everything together”. Many claim HTML/CSS are the same concern (presentation), so strict separation is illusory.

Cascade, Education & Scaling CSS

  • Some insist the cascade is powerful and misunderstood; widespread cargo-culting and poor education led to BEM/Tailwind-style workarounds.
  • Others argue cascading inherently fails to scale for component libraries and mixed teams; namespacing, scoping, or utility-first approaches are seen as necessary evolution.

Semantics, Accessibility & “Div Soup”

  • Complaints about hash-class “div soup” harming scraping, a11y, and maintainability.
  • Counterpoint: semantics and a11y can be done with divs plus ARIA/attributes; Tailwind doesn’t preclude semantic tags, sloppy developers do.

Frameworks, MVC/MVVM & State

  • Long tangent about React as “V in MVC”, MVVM vs unidirectional data flow, and islands architecture vs global SPA state.
  • General agreement that component and state architecture matters more than styling approach, but CSS tools push people toward certain mental models.

Browser Support & Fragmented “Modernity”

  • Frustration that many showcased features are only in recent Chromium builds; Firefox and Safari (especially tied to OS updates) lag.
  • Some say Firefox is now irrelevant; others strongly disagree and insist “widely available” must include it.
  • Several refuse to adopt techniques until they’re supported across all major evergreen browsers.

Modern CSS Features & Mixed Adoption

  • Praised features: nesting, :has, :is, :where, @layer, color-scheme/light-dark, custom properties, color manipulation, container queries, text-box: trim.
  • Some dislike nesting for making selectors hard to search; others see huge wins in reducing repetition.
  • Complaints about persistent gaps (e.g. styling ol numbers cleanly, scrollbars, form controls) and broken examples on the site.

Meta: Tools, LLMs & Workflow

  • Some suggest offloading complex CSS to AI/coding agents and just tweaking.
  • Jokes that the site—and some code examples—look “LLM-coded”; others already maintain AGENTS/skills files that teach LLMs modern CSS patterns.