Lorsque vous commencez à mettre en page, CSS peut sembler magique. Parfois même foncée. Pourquoi les retraits ne sont-ils pas les bons ? Pourquoi la largeur ne converge pas ? Pourquoi le texte se comporte-t-il comme un chat sauvage ?
Calmez-vous. Il existe un moyen éprouvé de démarrer n'importe quel projet sans douleur. Les développeurs expérimentés commencent presque toujours par un ensemble lignes de base CSS - un mini-bouclier contre le chaos.
Voyons quelles sont ces 10 lignes magiques et pourquoi vous devriez les ajouter à chaque projet.
🎯 1. box-sizing: border-box;
*, *::before, *::after {
box-sizing: border-box;
}Pourquoi est-ce nécessaire ?
Par défaut, CSS calcule la largeur et la hauteur sans des paddings et des bordures. C'est gênant et déroutant. Avec cette ligne, vous dites au navigateur : « Hé, considérons tout ensemble, comme dans la vie normale. »
🧼 2. Supprimer les retraits par défaut
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote {
margin: 0;
}Pourquoi est-ce nécessaire ?
Les navigateurs ajoutent leurs propres retraits. Ils sont différents. Ils sont imprévisibles. En les réinitialisant, vous décidez vous-même où et combien il y aura de place.
💡 3. Belle police par défaut
body {
font-family: system-ui, sans-serif;
}Pourquoi est-ce nécessaire ?
Ainsi, vous obtenez une police propre et lisible, sans tracas. Fonctionne sur tous les appareils, a l'air moderne.
🔢 4. Hauteur de ligne pratique
body {
line-height: 1.5;
}Pourquoi est-ce nécessaire ?
Le texte devient plus facile à lire. L'espace entre les lignes n'est pas seulement une question d'esthétique, c'est aussi une question de soin des yeux.
🧍♂️ 5. Hauteur de la page = 100 %
html, body {
height: 100%;
}Pourquoi est-ce nécessaire ?
Si vous avez besoin de quelque chose qui occupe toute la hauteur de l'écran (par exemple, un arrière-plan), c'est un élément indispensable. Sans elle, la « hauteur de 100 % » ne fonctionnera tout simplement pas.
📦 6. Améliorer le comportement des images
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}Pourquoi est-ce nécessaire ?
Les images ne dépassent pas les limites. Plus de mises en page « cassées » à cause de médias trop volumineux.
🔁 7. Héritons des polices pour les formulaires
input, button, textarea, select {
font: inherit;
}Pourquoi est-ce nécessaire ?
Sans cette ligne, les boutons et les champs de formulaire utiliseront leur propre police. Avec celle-ci, ils s'intègrent parfaitement dans le design.
💨 8. Supprimer les traits de mise au point dans Safari
button {
-webkit-appearance: none;
}Pourquoi est-ce nécessaire ?
Safari aime créer des boutons... à sa manière. Cette ligne permet d'aligner le comportement avec les autres navigateurs.
🧹 9. Nettoyer les listes
ul[role='list'], ol[role='list'] {
list-style: none;
}Pourquoi est-ce nécessaire ?
Lorsque vous souhaitez créer une liste sans puces, par exemple un menu ou des cartes, c'est un excellent point de départ.
🚫 10. Supprimer la marge du corps
body {
margin: 0;
}Pourquoi est-ce nécessaire ?
<body> a une indentation intégrée. Il gêne, surtout sur les portables. On le supprime et on obtient une toile vierge pour la mise en page.
📦 Total
Tout cela ensemble — pas de magie, mais juste un bon début. Si vous êtes trop paresseux pour l'écrire à la main à chaque fois, créez votre propre modèle de base. Ou copiez simplement ces lignes au début de chaque nouveau projet.
Si vous aimez cette approche, simple, directe et sans explications compliquées, l'application Kodik vous conviendra certainement. Elle a été créée spécialement pour ceux qui commencent leur parcours en programmation à partir de zéro. À l'intérieur, des leçons sur HTML, CSS et JavaScript qui expliquent tout en langage humain, comme si un bon mentor était assis à côté de vous.
Site Web de Kodik - https://itcodik.com/