Cuando estás empezando a diseñar, CSS puede parecer magia. A veces incluso oscura. ¿Por qué las sangrías no son correctas? ¿Por qué no coincide el ancho? ¿Por qué el texto se comporta como un gato salvaje?
Tranquilo. Hay una forma probada de comenzar cualquier proyecto sin dolor. Los desarrolladores experimentados casi siempre comienzan con un conjunto líneas básicas de CSS — un mini escudo contra el caos.
Veamos qué son estas 10 líneas mágicas y por qué vale la pena añadirlas a cada proyecto.
🎯 1. box-sizing: border-box;
*, *::before, *::after {
box-sizing: border-box;
}¿Por qué es necesario?
Por defecto, CSS calcula el ancho y la altura sin padding y bordes. Es incómodo y confuso. Con esta línea le dices al navegador: «Oye, consideramos todo juntos, como en la vida normal».
🧼 2. Eliminar las sangrías predeterminadas
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote {
margin: 0;
}¿Por qué es necesario?
Los navegadores añaden sus propios espacios. Son diferentes. Son impredecibles. Al restablecerlos, tú decides dónde y cuánto espacio habrá.
💡 3. Una bonita fuente predeterminada
body {
font-family: system-ui, sans-serif;
}¿Por qué es necesario?
Así obtienes una fuente limpia y legible, sin problemas. Funciona en todos los dispositivos, se ve moderno.
🔢 4. Altura de línea cómoda
body {
line-height: 1.5;
}¿Por qué es necesario?
El texto se vuelve más fácil de leer. El espacio entre las líneas no es solo estética, es cuidado de los ojos.
🧍♂️ 5. Altura de la página = 100 %
html, body {
height: 100%;
}¿Por qué es necesario?
Si necesitas que algo ocupe toda la altura de la pantalla (por ejemplo, un fondo), es imprescindible. Sin ella, la «altura del 100 %» simplemente no funcionará.
📦 6. Mejoramos el comportamiento de las imágenes
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}¿Por qué es necesario?
Las imágenes no se salen de los bordes. No más diseños «rotos» debido a medios demasiado grandes.
🔁 7. Heredar fuentes para formularios
input, button, textarea, select {
font: inherit;
}¿Por qué es necesario?
Sin esta línea, los botones y los campos de formulario usarán su propia fuente. Con esta, se ven orgánicos en el diseño.
💨 8. Eliminar el contorno de enfoque en Safari
button {
-webkit-appearance: none;
}¿Por qué es necesario?
A Safari le gusta hacer botones... a su manera. Esta línea ayuda a alinear el comportamiento con otros navegadores.
🧹 9. Limpiamos las listas
ul[role='list'], ol[role='list'] {
list-style: none;
}¿Por qué es necesario?
Cuando quieres hacer una lista sin viñetas, por ejemplo, un menú o tarjetas, este es un excelente punto de partida.
🚫 10. Eliminar el margen del cuerpo
body {
margin: 0;
}¿Por qué es necesario?
<body> tiene una sangría incorporada. Interfiere, especialmente en dispositivos móviles. Lo quitamos y obtenemos un lienzo en blanco para el diseño.
📦 Total
Todo esto junto no es magia, sino un comienzo competente. Si eres demasiado perezoso para escribir esto a mano cada vez, consigue tu plantilla básica. O simplemente copia estas líneas al principio de cada nuevo proyecto.
Si te gusta este enfoque, sencillo, directo y sin explicaciones complicadas, la aplicación Kodik te gustará. Está diseñada específicamente para aquellos que comienzan su viaje en la programación desde cero. En su interior encontrarás lecciones de HTML, CSS y JavaScript que explican todo en lenguaje humano, como si un buen mentor estuviera sentado a tu lado.
Sitio web de Kodika - https://itcodik.com/