CSS @property and the new style

Original Article ↗ Hacker News Discussion ↗

Overall sentiment on @property and modern CSS

  • Many are excited by @property and see it as a long‑overdue power tool; others feel it’s arcane and overcomplicates CSS.
  • Thread is full of nostalgia: early CSS felt small and comprehensible; now the surface area is huge and hard to hold in one’s head.
  • Some see this as CSS finally catching up to what native apps and older tech (Flash, VRML, IE‑era features) could already do.

What @property / registered properties enable

  • Clarified as “CSS custom properties with types, defaults, and inheritance control that can be animated.”
  • Main win: lets the browser treat a custom property as a concrete typed value (e.g., angle, color) so it can be interpolated across animations.
  • Also enforces validity (invalid values ignored), allows initial to map to a defined default, and controls whether a custom property inherits like color or not like display.
  • Some feel the article’s examples obscured the core concept; MDN and other resources are recommended for clearer explanations.

CSS complexity, learnability, and tooling

  • Strong divide: some love exploring CSS “deep magic”; others say this kind of code is why they avoid frontend.
  • Concern that new CSS features mostly serve a small slice of experts, while “copy‑paste CSS” by non‑programmer designers becomes harder to untangle.
  • Others argue new spec complexity reduces app complexity by replacing JS hacks and layout workarounds.

CSS vs JavaScript for animations and logic

  • Advocates for CSS emphasize:
    • Better performance (GPU acceleration, off main JS thread).
    • Built‑in devtools and a declarative model that lets browsers optimize.
    • Ability to keep pages functional for users who disable JS.
  • Skeptics argue:
    • This is effectively a mini programming language in CSS.
    • JS (or Web Animations API) is more natural to many developers and more debuggable.
  • There’s debate over CSS’s theoretical expressiveness (Turing‑complete or intentionally constrained); consensus is that it’s a different paradigm than JS, not a replacement.

Design, UX, and accessibility debates

  • Many find the demo button visually impressive but aesthetically tacky or reminiscent of 2000s ads/Flash.
  • Others welcome more distinctive, non‑homogeneous designs instead of every site using the same component libraries.
  • Multiple comments stress respecting prefers-reduced-motion and using animations sparingly to avoid distraction and motion sickness.

Security, privacy, and blocking CSS

  • Several note that sophisticated CSS already enables some tracking and data exfiltration, though it’s rarer than JS‑based tracking.
  • Some call for “CSS blockers” or allowing only a safe subset, similar to blocking JS, as CSS becomes more powerful.