La scène est toujours la même. Le débutant a son bouton à l'écran, il le veut centré, alors il ajoute un margin-left. Trop à gauche. Il met margin: 20px. Ça décale tout le reste. Il tente padding, puis position: absolute, puis un float trouvé sur un forum. À la fin, le bouton est à peu près au bon endroit, mais il ne sait pas pourquoi, et au moindre changement de taille d'écran tout s'effondre.
Ce n'est pas un manque de talent. C'est qu'on lui a appris le CSS à l'envers. Le CSS donne l'impression de se battre contre toi tant que tu n'as pas compris une chose simple : avant de décorer, il faut comprendre comment les éléments occupent l'espace. Voici la méthode que je conseille, dans l'ordre où chaque notion s'appuie sur la précédente.
Pourquoi le CSS semble se battre contre toi
Le piège du CSS, c'est qu'il est trop accueillant. Tu peux écrire color: red en cinq secondes et voir un résultat. Du coup le débutant saute direct sur la déco : couleurs, ombres, arrondis, polices. Le visuel avance, la confiance monte. Puis vient le moment de placer deux blocs côte à côte, et c'est le mur.
La raison est que la couleur et la taille d'un élément sont la partie facile. La partie qui demande un vrai modèle mental, c'est la mise en page : comment un élément calcule sa largeur, pourquoi il pousse son voisin, ce qu'est une marge qui « fusionne » avec une autre. Tant que ce modèle n'est pas là, chaque propriété de positionnement ressemble à un coup de dé. On bricole des marges au hasard parce qu'on n'a pas la carte du terrain.
