Mes bonnes pratiques – CSS
1. Avant-propos
De nos jours, CSS est sous-exploité. Il y a un fossé entre les développeurs Angular/React/Vue/… et les designers UI.
Le designer UI imbrique trente <div> chargées de quarante classes CSS, tandis que le dev Angular s’emballe toutes les deux semaines pour la dernière lib à la mode, alors que son enfer
de dépendances ne compile plus depuis longtemps sans npm i --force, parce que les peer dependencies sont en conflit. CSS et HTML n’intéressent guère le fanatique de TypeScript. Pour le moindre champ de saisie,
il lui faut Material, car il a peur de ne pas réussir la validation autrement. Et surtout, pas question de perdre du temps à réinventer la roue. Qu’il perde tout ce temps dès la première
exigence que la bibliothèque ne couvre pas, et qu’il se retrouve à lire les issues GitHub de la lib, cela ne lui vient pas à l’esprit.
Dans un projet fullstack, le développeur a rarement l’occasion de mettre à profit ses talents de designer frontend. Il reçoit les maquettes d’écran dans Figma et doit les reproduire à l’identique. La plupart des développeurs frontend de ce genre ne se rendent même pas compte qu’une seule ligne de CSS suffit pour obtenir une mise en page responsive. CSS est plus puissant que jamais. Fini le temps des bidouilles de style en JS, des innombrables media queries et des contournements pour IE 8. Hourra !
2. Centrage parfait
Ça n’a pas toujours plu en entretien d’embauche, mais moi, je trouvais ça génial : à la question de savoir si j’étais bon en frontend, je répondais volontiers « Oh oui. Je sais centrer verticalement une <div>. »
Centrer une div est notoirement difficile.
Plus maintenant :
.parent {
display: grid;
place-items: center
}3. Grille 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. Mise en page
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}6. Barre latérale
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}