La mejor optimización de JavaScript de 2026 suele ser **no escribirlo**. El CSS de plataforma — **container queries**, **`:has()`**, **nesting nativo**, **scroll-driven animations**, **scroll-snap** — cubre patrones que hace pocos años pedían Swiper, listeners y reflows manuales.

## Por qué importa el INP

**Interaction to Next Paint (INP)** mide qué tan rápido la UI responde a clicks, taps y teclas. Hidratar un carousel o un mega-menú “porque siempre se hizo así” es una de las formas más baratas de **romper INP** en móviles medios.

Menos main-thread JS → más margen para lo que sí necesita el cliente (i18n, consent, un island puntual).

## Patrones que ya reemplazan librerías

| Antes (JS) | Ahora (CSS / HTML) | |------------|---------------------| | Carousel con Swiper | `scroll-snap` + overflow + botones opcionales | | Show/hide por clase en menú | `:has()`, `details/summary`, popover | | Layouts por breakpoint global | Container queries por componente | | Animaciones en requestAnimationFrame | scroll-driven animations / CSS transitions |

En este sitio, el pasaje de **Swiper → CSS Scroll Snap** es el ejemplo concreto: menos lifecycle, menos peso en View Transitions, mismo gesto de swipe.

## Checklist de adopción

1. Auditar carouseles, tabs y drawers: ¿necesitan estado React o alcanza HTML/CSS? 2. Reservar JS para **estado de producto** (auth, carrito, agents UI), no para “deslizar un panel”. 3. Medir INP en mid-tier mobile, no solo en desktop de desarrollo. 4. Combinar con design tokens (`custom properties`) y cascade layers para no pelear especificidad.

## Límite honesto

CSS no reemplaza un editor colaborativo ni un canvas de juego. El error es el inverso: **meter framework UI para un layout que el browser ya resuelve**.

**Cierre:** en 2026, performance de frontend es en gran parte **disciplina de plataforma**. El CSS moderno no es nostalgia — es menos bundle y mejor INP.