¡Hola a todos! 
Llevo años trabajando con CSS y quería compartir algunos de mis consejos y trucos favoritos que me han facilitado la vida. No son las bases, son cosas que te hacen pensar “¿por qué no supe esto antes?”.
1. Usa aspect-ratio para elementos responsivos
¡Olvídate del truco del padding-top! La propiedad aspect-ratio es pura magia:
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
Esto mantiene tus elementos perfectamente proporcionados sin ningún cálculo. Funciona muy bien para imágenes, videos y componentes de tarjetas.
2. clamp() para tipografía fluida
Deja de usar consultas de medios para cada tamaño de fuente. clamp() te permite establecer tipografía responsiva en una sola línea:
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
Esto significa: mínimo 1.5rem, preferido 5vw, máximo 3rem. ¡Boom! texto responsivo que se escala hermosamente en todas las pantallas.
3. :is() y :where() para selectores más limpios
¿Cansado de repetir selectores? Estas pseudo-clases son un cambio de juego:
/* En lugar de esto: */
header a:hover,
footer a:hover,
nav a:hover {
color: blue;
}
/* Haz esto: */
:is(header, footer, nav) a:hover {
color: blue;
}
La diferencia: :is() toma la mayor especificidad, mientras que :where() tiene cero especificidad, perfecto cuando quieres que los estilos se puedan anular fácilmente.
4. Propiedades personalizadas (variables CSS) con valores predeterminados
Probablemente uses variables CSS, pero ¿estás usando valores predeterminados?
.button {
background: var(--primary-color, #007bff);
padding: var(--button-padding, 0.5rem 1rem);
}
Si la variable no está definida, se retrocede al segundo valor. Muy útil para cambiar de tema y bibliotecas de componentes.
5. object-fit para un mejor control de las imágenes
¡Deja de distorsionar las imágenes! Usa object-fit para controlar cómo las imágenes llenan sus contenedores:
img {
width: 100%;
height: 300px;
object-fit: cover; /* o contain, fill, none, scale-down */
object-position: center;
}
Esto es especialmente útil para fotos de perfil, miniaturas y imágenes de tarjetas donde necesitas dimensiones consistentes.
Bonus: La propiedad gap más allá de Flexbox
¿Sabías que gap funciona en el diseño de bloque regular ahora (en la mayoría de navegadores modernos)?
.container {
display: block;
gap: 1rem;
}
¡No más trucos de margen entre elementos!
¿Cuáles son tus trucos favoritos de CSS que usas regularmente? ¡Me encantaría saber qué hay en tu kit de herramientas! 
¡Feliz codificación! 