Old CSS, new CSS (2020)

Original Article ↗ Hacker News Discussion ↗

Early web & legacy CSS hacks

  • Several comments recall pre‑CSS styling: <font> tags for color/size, table‑based layouts, and Netscape/IE‑specific tricks that broke in other browsers.
  • Rounded corners and drop shadows required 3×3 image grids, sprite‑like techniques, and Photoshop offset tricks to minimize HTTP requests.
  • IE6 compatibility, PNG transparency, and tools like CSS3PIE were recurring pain points.
  • Netscape 4’s fragile table parsing and early XHR / AJAX history are mentioned as emblematic of the era’s hackiness and browser wars.
  • People reminisce about popup blockers, tabs, “web safe colors,” and the persistence of sites like the Space Jam page.

Modern layout: Flexbox, Grid, responsiveness

  • Some use display:flex almost everywhere and find it sufficient with media queries to switch between horizontal/vertical layouts.
  • Others find CSS Grid more natural, especially for fixed or multi‑breakpoint layouts, using media/container queries to redefine grids for small screens.
  • There’s disagreement: one side claims Grid often fails on mobile and degenerates into “tables,” forcing a switch to Flexbox; the other uses Grid specifically to keep related items together when Flexbox wrapping would separate them.
  • Advanced selectors (:has, attribute selectors) and container queries are praised but their partial/young browser support is a concern.
  • Layout is described as easy to learn but hard to master; flexbox, images, and positioning remain common stumbling blocks.

Houdini, WASM, and future layout models

  • Houdini is seen by some as a way to move complexity from browsers into reusable layout libraries and enable custom layout engines.
  • Others fear it increases complexity, lets every app “bring its own renderer,” and complicates global theming; JS requirement and performance are cited as obstacles.
  • There’s skepticism that JS‑based layout can match native performance, but some see potential with WebAssembly and reference types if data‑passing overhead is solved.
  • One commenter proposes a new “stretch unit” (like minmax(0, 1fr) usable on width/height/margins) plus a simplified 1D layout mode to cover most needs and improve performance.

Box model and spec regrets

  • Discussion notes that early IE/Netscape behaved like box-sizing: border-box only, while the spec settled on content-box.
  • Later introduction of box-sizing is seen as a fix, and current spec authors reportedly consider border-box a better default, blocked only by backward compatibility.

CSS variables, preprocessors, and build tooling

  • CSS custom properties (var(--x)) plus calc() and fallbacks are praised as powerful enough to remove the need for Sass/LESS in many cases.
  • Others point out limitations, especially difficulty accessing CSS variables cleanly from JS, leading some to build design systems purely in TypeScript instead.
  • There’s nostalgia for simple setups without build chains or JavaScript, but also recognition that many modern tools (Tailwind, etc.) require builds.

Utility‑first CSS, CSS‑in‑JS, and the cascade

  • A recurring theme is Tailwind‑style utility classes (text-red-500) resembling old inline <font color="red"> patterns: styling is tightly coupled to markup again.
  • Some find it odd that many developers avoid learning CSS deeply and instead lean on frameworks and copy‑paste snippets.
  • Global class names are compared to global variables, making large apps hard to coordinate; scoped CSS and component‑scoped styles are offered as mitigations.
  • Opinions differ on the cascade and inheritance: some see them as mismatched with component‑based JS and prefer flatter, more explicit styling; others argue the cascade and inheritance are essential conflict‑resolution and reuse mechanisms, and that “maintainable CSS” means keeping the cascade shallow rather than abandoning it.

Attitudes toward CSS and the web platform

  • Views range from strong appreciation—calling modern CSS powerful, flexible, and superior to most non‑web UI systems—to frustration about its quirks and multi‑language nature (HTML/CSS/JS).
  • Flutter is mentioned as a rare non‑web UI framework that feels comparably well‑designed, but the fact that so few clear “replacements” exist is seen as evidence that CSS solves a genuinely hard problem.
  • Some backend‑leaning developers describe frontend as chaotic and under‑engineered; others argue that the web’s uncontrolled environment and long history inevitably lead to complexity, and that modern CSS, though scarred, is a solid outcome.