CSS Is Fun Again

Original Article ↗ Hacker News Discussion ↗

Modern CSS is being praised for features like flexbox, grid, nesting, custom properties, new color functions, and `@scope`, which collectively reduce the hacks and complexity that once made layout work painful. Commenters weigh this renewed “plain CSS” approach against frameworks and no‑code tools, noting trade‑offs in browser compatibility, performance, and long‑term maintainability as some engines (especially Safari and Firefox ESR) lag on newer specs. Others remain skeptical, arguing that tooling and complexity still grow faster than core browser support, making conservative, widely supported CSS or utility frameworks a safer choice for many projects.

Modern CSS Features & Sentiment

  • Many commenters agree that CSS has become much more pleasant with Flexbox, Grid, custom properties, color-mix(), nesting, clamp(), modern units, and upcoming features like anchor positioning and masonry layouts.
  • Some say CSS has been “fun” ever since Flexbox/Grid killed float/table hacks; nesting and new color spaces are the latest layer.
  • Others still find CSS conceptually awkward and are not personally excited, even if they acknowledge the power.

Browser Support & Real-World Use

  • Strong debate over how “available” new features really are:
    • One side: modern browsers auto-update, old versions decay quickly, so you can often rely on recent features.
    • Other side: long tails (old OSes, ESR builds, Safari tied to OS updates) mean you must treat new syntax like nesting carefully and/or transpile it.
  • Baseline initiative and caniuse.com are cited as practical guides. Advice: author with nesting etc., transpile via tools like PostCSS/Lightning CSS for now.

Scoped CSS & Components

  • Component-scoped styles in frameworks (Svelte, Vue, Lit, etc.) are widely praised for reducing global-CSS complexity and making plain CSS feel viable again.
  • Native @scope is seen as a major upcoming win; Chrome and Safari are moving, Firefox is cautious due to value/perf concerns.
  • Some dislike auto-scoping (e.g., CSS-in-JS class mangling) because it complicates styling children based on parent context.

Performance & Energy

  • Consensus: CSS evaluation time is negligible compared to ads, JS, images, and screen power; CSS is rarely the performance bottleneck.
  • A minority worries about cumulative energy waste from “small” inefficiencies; others argue this focus is misplaced versus larger energy consumers.

Learning & Teaching Modern CSS

  • MDN and web.dev’s CSS course are heavily recommended.
  • Books/courses on modern layout (Flexbox/Grid) and responsive design are highlighted; some paid courses are viewed as too expensive.

Frameworks, Preprocessors & “You Might Not Need X”

  • Some prefer offloading CSS complexity to Tailwind/Tachyons and don’t want to stay current with CSS itself.
  • Others warn this is like the “jQuery trap”: libraries change, but core CSS knowledge endures.
  • Opinions split on whether SASS is “no longer needed”; variables and nesting cover many use cases, but SASS functions and mixins remain valuable for some.

Other Notable Features & Gaps

  • Excitement around: color-mix(), OKLCH (with partial support), Custom Highlight API, lh unit, popover, display transitions, calc(), clamp().
  • Pain points that remain: no smooth transition to height: auto; some features missing or partial in Firefox; @apply mixins effectively dead.