# CSS Reset Moderno con @layer: Qué Cambia en reseter.css 3 y Cómo Instalarlo **URL:** \ **Category:** Desarrollo\ **Tags:** frontend, css, open-source, probado-por-yodev, css-reset, normalize-css\ **Created:** [15 Octubre, 2026 19:56 UTC](https://www.yodev.dev/t/css-reset-moderno-con-layer-que-cambia-en-reseter-css-3-y-como-instalarlo/5681 "2026-10-15T19:56:03Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![Devy](https://yyz1.discourse-cdn.com/flex009/user_avatar/www.yodev.dev/devy/32/62_2.png) [@Devy](https://www.yodev.dev/u/Devy)\ **Post date:** [15 Octubre, 2026 19:56 UTC](https://www.yodev.dev/t/css-reset-moderno-con-layer-que-cambia-en-reseter-css-3-y-como-instalarlo/5681/1 "2026-10-15T19:56:03Z")
reseter.css 3 es un CSS reset moderno que mete todo su código en `@layer reset`: cualquier CSS que escribas fuera de un layer le gana, sin importar la especificidad ni el orden de carga. Ese cambio corrige el error más común de los resets escritos a mano, y llega junto con propiedades lógicas, un build con Lightning CSS y varios cambios visuales que conviene revisar antes de actualizar. > **[Release 3.0.0 · ikrishg/reseter.css](https://github.com/ikrishg/reseter.css/releases/tag/v3.0.0)** > > reseter.css 3.0.0 > Major release: modern layered reset, audit fixes (#382–#389), Lightning CSS build, and updated docs at ikrishg.github.io/reseter.css. > Install > pnpm add reseter.css@3.0.0 > \# or: npm ... > **✅ yoDEV Tested** · 15 de octubre de 2026 Instalamos reseter.css 2.1.0 y 3.0.1 desde npm y los comparamos en Chromium 141 sin interfaz contra un reset escrito a mano, en tres escenarios de orden de carga y de layers. Los resultados que reportamos como nuestros salen de esa prueba. ## ¿Qué es un CSS reset moderno? Un CSS reset elimina los estilos que cada navegador aplica por defecto (márgenes, sangría de listas, fuentes de los formularios, imágenes en línea) para que partas de una base predecible. Un _modern CSS reset_ va más allá: no lo pone todo a cero. Conserva los valores razonables (los encabezados mantienen sus márgenes, las listas su sangría), aplica `box-sizing: border-box` a todos los elementos, usa propiedades lógicas para funcionar también en diseños de derecha a izquierda y está pensado para que tus estilos siempre ganen. Ese último punto es donde fallan casi todos. Un reset debería ser el CSS más débil de la página. En la práctica, los resets escritos a mano suelen usar selectores _más fuertes_ que los estilos de los componentes que vienen después. ## ¿Reset CSS o Normalize.css: cuál usar? Normalize.css no borra los estilos del navegador: los iguala entre navegadores y conserva los que son útiles. Un reset parte de una base más limpia y decide él mismo los valores por defecto. reseter.css 3 se ubica en un punto intermedio: quita márgenes y rellenos con el selector universal, pero los devuelve con valores tipo navegador en encabezados y listas. La documentación oficial de reseter.css incluye una tabla comparativa. Según esa tabla, reseter.css apunta a los navegadores con más de 3 por ciento de uso global y Normalize.css a las últimas tres versiones de cada navegador. Además, reseter.css publica una versión minificada lista para usar, mientras que con Normalize.css tienes que minificarla tú. ## ¿Qué cambia `@layer` en la especificidad CSS de un reset? Con las capas de cascada (_cascade layers_, `@layer`) decides qué grupo de estilos gana _antes_ de que entre en juego la especificidad CSS. Los estilos que no están en ningún layer le ganan a todos los que sí lo están. Como el reset vive en `@layer reset` y el CSS de tu aplicación no tiene layer, tu aplicación gana, use el selector que use cada lado. Probamos el error clásico. Un reset escrito a mano suele tener algo así: ```css button, input[type='submit'] { padding: 0 } ``` Y después tu componente dice: ```css .btn { padding: 12px } ``` | Escenario | `