Mis buenas prácticas – CSS
1. Prólogo
Hoy en día, el CSS está infrautilizado. Hay un abismo entre los desarrolladores de Angular/React/Vue/... y los diseñadores de UI.
El diseñador de UI anida treinta <div> y les pone cuarenta clases CSS encima, mientras que el dev de Angular se vuelve loco cada dos semanas con la última librería, aunque su
infierno de dependencias hace tiempo que ya no compila sin npm i --force porque las peer dependencies están en conflicto. Al fanático de TypeScript el CSS y el HTML le importan más bien
poco. Hasta para el input más sencillo tiene que usar Material, porque teme no ser capaz de resolver la validación por su cuenta. Y, desde luego, nadie quiere perder el tiempo reinventando la
rueda. Lo que no tiene claro es que, con el primer requisito que la librería no cubre, vuelve a perder todo ese tiempo y acaba leyendo los issues de GitHub de la librería.
Como desarrollador en un proyecto fullstack, rara vez tienes la oportunidad de lucir tus conocimientos como diseñador de frontend. Te llegan los mockups de pantalla en Figma y hay que implementarlos tal cual. La mayoría de los desarrolladores de frontend de este tipo ni siquiera saben que con una sola línea de CSS se consigue un layout responsive. El CSS es más potente que nunca. Atrás quedan los tiempos de los apaños de estilos con JS, de las incontables media queries y de los workarounds para IE 8. ¡Hurra!
2. Centrado perfecto
No siempre caía bien en las entrevistas, pero a mí me encantaba: cuando me preguntaban si se me daba bien el frontend, solía responder: «Oh, sí. Sé centrar un <div> verticalmente».
Centrar un div es notoriamente difícil.
Ya no:
.parent {
display: grid;
place-items: center
}3. Grid responsive
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}4. Flex responsive
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
flex: 1 1 150px; /* Stretching: */
flex: 0 1 150px; /* No stretching: */
margin: 5px;
}5. Layout de página
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}6. Barra lateral
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}