CSS's Persistent Pain Points and Why They Persist

CSS draws ire for good reasons: it's not standalone (needs HTML), hard to test (no output or errors, relies on visual regression via headless browsers), global by nature (changes ripple unpredictably), and riddled with early design flaws. The CSS Working Group's wiki lists an 'incomplete list of mistakes'—decisions shipped hastily that can't be fixed without 'breaking the internet,' per the golden rule of web evolution. Developers copy-paste styles to avoid breakage, bloating codebases. Abstractions like Tailwind (utility classes) or CSS-in-JS (transpile JS to CSS) promise escape but leak, forcing raw CSS eventually.

Beattie, building web apps since 1992 (pre-CSS), notes CSS's unskippable role: unlike swapping Java for Python, web work demands it. Stack Overflow lumps it with HTML in surveys, as standalone CSS polls would skew 'most hated.' Yet, happiness breeds good code—CSS frustrates because it's undervalued. Quote: "CSS is the programming language that everybody loves to hate, the most controversial color in the developers palette." (Dylan Beattie, opening hook—counters dismissal by Turing-complete purists.)

Tradeoffs: No unit tests mean Slack pings for unseen side effects (e.g., submit button vanishes on unrelated page). Visual regression is state-of-the-art but heavy. LLM training on public repos yields poor CSS suggestions due to widespread bad code.

Historical Pattern: Hacks Become Native Features

Web features follow a cycle: designers crave brochure-like sites over OS-skewed defaults (gray buttons mimicking WinForms). Early hacks—Photoshop-sliced tables for rounded corners (£10/button in late '90s agencies)—go viral via CodePens, polyfills. Browsers standardize (border-radius after Netscape/Safari; IE resisted until Windows 8's Metro flop). Novelty fades: "No one looks at a website with rounded corners and goes, 'Wow, how did they do that?'"

Roots in Mosaic (1992-93): Marc Andreessen dismissed rendering gripes as 'browser choices,' empowering user control (screen readers, text browsers) over pixel-perfect docs. Quote: "Sorry, you're screwed. Oh well, live and learn or not." (Marc Andreessen, 1994 WWWALK list reply—highlights early web's philosophy of device-agnostic structure, clashing with modern branding demands.)

CSS/HTML evolve rapidly: proposals to baseline in months (vs. 5 years), via auto-updates. Baseline project tracks cross-engine support; caniuse.com details rollout (e.g., Chrome 2011 lags). Smart specs from browser teams prioritize layout, accessibility, interactions—grids, flexbox, animations, view transitions—once JS-only.

Shift: Reclassify 'behavior' (form feedback, animations) as presentation. Less JS improves perf, accessibility. Quote: "A lot of the stuff we thought was behavior, it's actually a presentation concern... The less JavaScript in the world the better." (Beattie, reframing pillars: semantic HTML=structure, CSS=presentation, JS=logic only.)

Native Elements + CSS for Framework-Free Components

Accordions (Bootstrap, Flowbite/Tailwind, Material UI) used div soups + JS for 10-15 years. HTML's

(Chrome 2011, Safari 2012, Firefox 2016, Edge 2020) enables native expand/collapse. Add name attribute (baseline late 2024) for radio-like mutual exclusivity—Firefox/Safari caught up recently, missed by most.

Beattie's discography demo: <details name="discog"> lists bands/photos. CSS transforms defaults:

details {
  margin-bottom: 0.5rem;
}
details summary {
  cursor: pointer;
  border: 1px solid;
  background: Gainsboro;
  padding: 0.5rem;
}
details[open] {
  border-color: navy;
  background: royalblue;
  border-radius: 0.5rem 0.5rem 0 0;
}
details::after { /* Pseudo for content */
  content: '';
  display: block;
  border: 2px solid transparent;
  border-top: none;
  padding: 0.5rem;
}
details[open]::after {
  border-color: white;
  border-radius: 0 0 0.5rem 0.5rem;
}
summary + * {
  padding-top: 0; /* First sibling fix */
}

Nested syntax (native, post-preprocessors like Sass):

details {
  /* ... */
  &[open] {
    /* open styles */
  }
  &::after { /* content pseudo */
    /* ... */
  }
}

Results: Smooth, accessible accordion rivaling libraries. No JS (maybe 'tiny bit' elsewhere). Tradeoffs: Recent mutual exclusivity limits legacy support; monitor caniuse.

Key Takeaways

  • Prioritize semantic HTML (
    ) over div/JS hacks—native since ~2011, mutual exclusive now baseline.
  • Use CSS pseudo-elements (::after for content) and classes (:open) for state-driven styling.
  • Nested CSS keeps rules collapsible, scoped—adopt over flat selectors.
  • Track evolution via caniuse.com/baseline; features ship in months, not years.
  • Reframe interactions as presentation: cut JS for perf/accessibility unless business logic.
  • Test via visual regression; embrace CSS's globals by auditing cascades.
  • Cycle-proof: Hacks (rounded corners) become boring natives—leverage, don't reinvent.
  • Quote: "You can't build software with it, but you can't avoid it." (Beattie on CSS's inescapability—pushes hands-on mastery over abstractions.)