Sobes.tech
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.