CSS reset moderno, comentado y con generador de reglas | We.Inc
Un CSS reset moderno y corto con cada regla explicada. Activa o desactiva reglas, envuelve el resultado en una cascade layer y cópialo. Incluye reset vs normalize.css.
Un CSS reset moderno es una docena de reglas cortas que se colocan antes de tus propios estilos: tamaño border-box en todos los elementos, márgenes predeterminados a cero, un interlineado legible, imágenes de bloque limitadas al ancho de su contenedor y controles de formulario que heredan tu fuente. Elige abajo las reglas que quieras y copia el resultado.
Qué arreglan las reglas básicas
Regla
Valor predeterminado del navegador que sustituye
Por qué cambiarlo
box-sizing: border-box
Así el ancho incluye el padding y el borde
margin: 0
Márgenes en body, encabezados, p y listas
El espaciado sale solo de tu propio CSS
line-height: 1.5 en body
normal (aproximadamente 1.2)
Lectura más cómoda en los párrafos
img { display: block; max-width: 100% }
En línea, con su ancho natural
Sin hueco bajo las imágenes y sin desbordamiento
font: inherit en inputs y botones
Fuente del sistema a tamaño pequeño
Los formularios encajan con el resto de la página
Copiar un reset que no entiendes significa depurar reglas que nunca elegiste. Esta página explica cada línea con palabras sencillas y te deja crear tu propia versión con interruptores, para que el archivo que pegues sea corto y cada línea esté ahí por un motivo.
Lee la nota junto a cada regla y actívala o desactívala.
Elige si envolver el resultado en @layer reset para que cualquiera de tus reglas se imponga sin pelea.
Copia el CSS generado y cárgalo antes que tus otras hojas de estilo.
Pon el reset en una cascade layer. Los estilos fuera de cualquier capa ganan a los que están en capas, sea cual sea la especificidad.
No resetees list-style en todos los ul. La documentación de Tailwind advierte de que VoiceOver puede no anunciar como listas las listas sin estilo, así que añade role="list" a cualquier lista a la que quites el estilo.
No toques el contorno de foco en un reset. Dale estilo en cada componente en lugar de eliminarlo de forma global.
Si usas Tailwind, ya tienes un reset llamado Preflight, así que un segundo reset normalmente solo añade ruido.
Preguntas frecuentes
¿Qué diferencia hay entre un CSS reset y normalize.css?
Un reset elimina los estilos predeterminados del navegador para que partas de una página casi en blanco. normalize.css conserva los valores útiles y solo corrige los puntos en los que los navegadores no coinciden. Muchos resets actuales están a medio camino: mantienen los encabezados en negrita y las listas intactas, pero quitan los márgenes y corrigen el tamaño de las cajas.
¿Todavía necesito un CSS reset en 2026?
Los navegadores coinciden mucho más que antes, así que los viejos resets gigantes ya no hacen falta. Uno corto sigue valiendo la pena, porque valores por defecto como el tamaño content-box, el margen del body y las imágenes en línea casi nunca son lo que pide una maquetación.
¿Por qué usar :where() en un reset?
:where() tiene especificidad cero, así que cualquier selector posterior, incluso un simple selector de elemento, sobrescribe el reset. Eso evita que las reglas del reset se impongan sin que te des cuenta a los estilos de los componentes.
¿Dónde pongo el reset?
Cárgalo primero, antes que cualquier otra hoja de estilo, o impórtalo dentro de @layer reset al principio de tu archivo CSS principal y declara una sola vez el orden de capas con @layer reset, base, components.
Por qué box-sizing va primero
Con el content-box predeterminado, una tarjeta de 300px de ancho con 20px de padding acaba midiendo 340px. border-box incluye el padding y el borde en el ancho que escribiste, que es como la mayoría espera que funcione el tamaño.
Aplicarlo también a los pseudoelementos ::before y ::after mantiene las formas decorativas coherentes con las cajas que decoran.
Reglas de texto que envejecen bien
text-wrap: balance iguala la longitud de las líneas de los encabezados cortos, y text-wrap: pretty evita una palabra huérfana sola en la última línea de un párrafo. Los navegadores que no conocen estos valores simplemente los ignoran, así que es seguro incluirlos.
overflow-wrap: break-word permite que una URL larga o un fragmento de código se corte en lugar de ensanchar la página hacia los lados en un móvil.
Lo que un reset no debe hacer
Un reset no es un sistema de diseño. Los colores, las familias tipográficas y las escalas de espaciado van en tu propia capa base, donde se pueden cambiar sin tocar el reset.
Evita reglas que perjudiquen la accesibilidad, como outline: none en todo o quitar todas las animaciones a todos los visitantes. Los ajustes de movimiento van en una consulta prefers-reduced-motion.
Reset, normalize o nada
Tres formas de gestionar los estilos predeterminados del navegador
Enfoque
Qué hace
Ideal para
Reset agresivo clásico
Elimina casi todos los valores predeterminados, incluidos los tamaños de los encabezados
Hoy rara vez hace falta
Conserva los valores predeterminados y corrige las diferencias entre navegadores
Sitios de contenido a los que les gusta la tipografía predeterminada
Reset moderno corto
Solo corrige tamaños, márgenes, medios y formularios
La mayoría de los sitios y apps nuevos
Reset del framework (Tailwind Preflight)
Viene incluido con el framework
Proyectos que ya usan ese framework
Antes y después
Una tarjeta con y sin border-box
Las dos cajas dicen width: 200px. Solo la segunda mantiene ese ancho al añadir el padding y el borde.
Tamaño border-box
El ancho y el alto incluyen el padding y el borde.
Quitar los márgenes predeterminados
El espaciado sale solo de tus propias reglas.
Texto del cuerpo legible
Un interlineado más alto y un body a toda la altura.
Medios de bloque y adaptables
Sin hueco de línea base bajo las imágenes y sin desbordamiento.
Los formularios heredan la fuente
Los inputs y los botones coinciden con el texto que los rodea.
Cortar palabras largas
Las URL largas pasan a la siguiente línea en lugar de desbordarse.
Encabezados equilibrados
Líneas de longitud similar en los encabezados cortos.
Sin palabras huérfanas
Evita una palabra sola en la última línea de un párrafo.
Aislar la raíz de la app
Un contexto de apilamiento nuevo para que el z-index de la app no choque con los portals.
Desplazamiento suave a anclas
Solo para los visitantes que no han pedido menos movimiento.
Generador de reset
Selección predeterminada, envuelta en una cascade layer: