Skip to content
TopicTracker
From HackerNewsView original
TranslationTranslation

The Shifting Line Between CSS States and JavaScript Events

The article explores the growing overlap between CSS and JavaScript in managing UI states and events. As CSS features like `:has()`, `@starting-style`, and scroll-driven animations become more powerful, developers can handle complex interactions previously reserved for JavaScript. The piece suggests rethinking the boundary between styling and scripting for simpler, more performant code.

Background

- This article explores a growing tension in front-end web development: as CSS gains powerful new features (like `:has()`, popovers, and `@starting-style`), it now handles tasks that previously required JavaScript — such as detecting user interactions, toggling visibility, and animating on mount/dismount. - The line between "CSS states" (e.g., `:hover`, `:checked`, `:open`) and "JavaScript events" (e.g., `click`, `mouseenter`, `DOMContentLoaded`) is blurring. This creates ambiguity for developers about which tool to use, and whether the browser's internal event models should be exposed to CSS. - The author explores whether CSS features like `:open` and `@starting-style` represent states or events, and argues that the blurriness is productive but needs clearer mental models. The piece is relevant to anyone building modern web interfaces with CSS and JavaScript.

Related stories