Middle
¿Cómo restablece los estilos en sus proyectos?
sobes.tech AI
Respuesta de la IA
Normalmente utilizo normalize.css como base. Hace que los estilos de los elementos sean uniformes y más predecibles en todos los navegadores, manteniendo estilos útiles por defecto.
// Ejemplo de parte de normalize.css
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}
main {
display: block;
}
A veces añado mi pequeño reset o conjunto de estilos básicos encima de normalize.css para tareas específicas o para eliminar márgenes y rellenos en algunos elementos.
// Estilos adicionales
*,
*::before,
*::after {
box-sizing: border-box; /* Hace que trabajar con tamaños sea más predecible */
}
body {
min-height: 100vh; /* Estira el body a toda la altura visible */
scroll-behavior: smooth; /* Desplazamiento suave por los anclajes */
text-rendering: optimizeSpeed; /* Prefiere la velocidad de renderizado */
}
a {
text-decoration: none; /* Quita el subrayado de los enlaces */
color: inherit; /* Los enlaces heredan el color del texto */
}
ul,
ol {
list-style: none; /* Quita los marcadores de la lista */
padding: 0;
margin: 0;
}
button,
input,
textarea,
select {
font: inherit; /* Los elementos de formulario heredan la fuente del padre */
}
img {
max-width: 100%; /* Las imágenes no salen del contenedor */
display: block; /* Quita el espacio inferior en elementos en línea-block */
}
La elección de un enfoque específico depende de los requisitos del proyecto y del framework utilizado. Normalize.css es un buen compromiso entre un reset completo y los estilos por defecto.