14 Erreurs de Débutant en CSS

📄 1. N’avoir qu’un seul fichier CSS

Beaucoup de débutants créent un seul fichier 📄 style.css gigantesque avec tous les styles du site. Cela complexifie inutilement la maintenance et nuit aux performances de l’application en chargeant des styles non utilisés par les pages courantes.

Pourquoi c’est un problème ?

• 🧪 Debug difficile : tout est mélangé, difficile de retrouver l’origine d’un style ou d’un bug.
• 💣 Effet de bord : une modification peut casser des styles sur d’autres pages.
• 🗑️ Mauvaise lisibilité : un fichier de 5000 lignes devient illisible, surtout pour les nouveaux venus.
• 🔄 Mauvaise gestion du cache : une petite modif invalide le cache du CSS complet.
• 👥 Peu scalable : travail en équipe compliqué, conflits fréquents.
• 🐘 Mauvaises perfs : tout le CSS est chargé même si la page n’utilise que 10%.

Voici les solutions pour éviter ce problème :

1. Découper le CSS par composants, pages ou fonctionnalités grâce à des frameworks JS comme Vue ou React. On parle de « CSS scoped ».
2. Utiliser Sass, PostCSS ou un bundler pour découper les assets et gérer leur import intelligent.
3. Utiliser un framework utilitaire comme Tailwind CSS qui permet de générer du CSS via l’usage de classes HTML.

⚠️ 2. Trop utiliser !important

Quand on n’arrive pas à faire passer un style, on tente souvent !important… mais ça devient vite un cauchemar en termes de maintenabilité.

.btn-danger {
  color: red !important;
}

Pour éviter cet usage intempestif du !important, comprenez la spécificité CSS et organisez votre code pour ne pas en avoir besoin.

Utilisez !important seulement en dernier recours (par exemple pour écraser des styles injectés par des librairies tierces).

📱 3. Oublier les media queries

Beaucoup de développeurs juniors codent en version desktop uniquement, en se disant : « ça passera sur mobile ! ». Spoiler : non 😱

Utilisez une approche mobile-first, puis ajoutez des breakpoints avec @media.

.gallery {
  display: grid;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
	.gallery {
		grid-template-columns: repeat(3, 1fr);
	}
}

📏 4. Utiliser des px partout

Le pixel est une unité fixe qui n’est pas adaptée à toutes les tailles d’écran ou aux préférences utilisateur (zoom, accessibilité, etc.).

h1 {
  font-size: 40px;
}

Si le px convient la plupart du temps très bien pour des éléments de taille fixe (border-width, border-radius, width d’icônes…), il est préférable d’utiliser des unités relatives comme rem, em, %, vh ou vw pour les tailles de police et le layout.

h1 {
  font-size: 2.5rem;
}

Ici, la taille de police s’adaptera à la taille de police de base du navigateur, ce qui est plus flexible et accessible.

🗃️ 5. Ne pas utiliser les variables CSS

Les débutants en CSS ont souvent tendance à répéter les mêmes valeurs partout (couleurs, espacements, etc.), ce qui augmente la taille du code, le rend difficile à maintenir et peu flexible.

.btn-cta {
  background-color: #2145D4;
  ...
}

h1 {
  color: #2145D4;
  ...
}

Les variables CSS (--ma-variable) permettent de centraliser les valeurs réutilisées et de les modifier facilement.

:root {
  --primary-color: #2145D4;
}

.btn-cta {
  background-color: var(--primary-color);
  ...
}

h1 {
  color: var(--primary-color);
  ...
}

↕️ 6. Définir des hauteurs fixes

Utiliser la propriété CSS height pour fixer la hauteur d’un bloc de texte peut entraîner des problèmes visuels ou des bugs d’affichage :

• Texte trop court dans une boîte trop grande,
• Texte qui déborde d’un conteneur trop petit,
• Images rognées ou déformées,
• Etc.

<article class="card">
  <h2>Titre</h2>
  <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>

.card {
  height: 200px; /* ⚠️ Attention... */
  ...
}

Même si height peut être utile pour fixer la taille d’images, de vidéos ou de sections spécifiques, il est souvent préférable de laisser la hauteur s’adapter automatiquement au contenu (height: auto, valeur par défaut).

Si une intervention sur la hauteur est nécessaire, privilégiez min-height ou max-height, souvent plus flexibles et sûres.

📍 7. Abuser de la position absolute

Utiliser position: absolute peut sembler pratique pour placer des éléments où l’on veut, mais c’est une méthode rigide, non responsive et qui casse le flux naturel du document.

Le placement des éléments doit être fait en utilisant les modules de mise en page modernes comme flexbox ou grid, qui permettent de créer des mises en page adaptatives et fluides.

📦 8. Ne pas comprendre le modèle de boîtes

Les débuts sont souvent marqués par des width ou padding qui débordent parce qu’on ne connaît pas bien le modèle de boîte CSS.

Pour éviter des mauvaises surprises, il est important de comprendre comment les propriétés CSS display, width, height, padding, margin et border interagissent.

Aussi, pensez à définir sur l’ensemble de vos balises box-sizing: border-box; pour que la largeur et la hauteur incluent les bordures et le padding.

*,
*::before,
*::after {
  box-sizing: border-box;
}

🔍 9. Abuser des IDs

Un ID a une spécificité très forte.

Utilisé à tort, il devient difficile à surcharger sans utiliser !important et limite la réutilisabilité.

/* ❌ Maladroit */
#breadcrumb {
  ...
}

/* ✅ Smart ! */
.breadcrumb {
  ...
}

Limiter leur utilisation aux cas où c’est vraiment nécessaire :

• Ancres HTML
• Eléments uniques

En dehors de ces cas spécifiques, privilégiez des classes CSS.

🤝 10. Lier les styles à la structure HTML

Évitez de styliser vos éléments en vous basant sur l’imbrication des balises HTML.

Un sélecteur comme css .sidebar > div > ul > li > a crée une dépendance forte à la structure : le moindre changement dans la structure HTML peut casser le style. On parle d’« over-specificity ».

Pour éviter cela, utilisez des classes autonomes et sémantiques, basées sur le rôle des éléments, pas sur leur position.

.sidebar-link { ... }

Votre CSS sera ainsi plus modulaire et réutilisable, et indépendant de la structure HTML.

🎨 11. Contraste de couleurs insuffisant

Le contraste entre le texte et l’arrière-plan est crucial pour l’accessibilité. On parle de « Contrast Ratio ». Un texte mal contrasté peut rendre la lecture difficile, voire impossible pour certains utilisateurs.

C’est un problème courant chez les devs débutants qui choisissent des couleurs sans vérifier leur contraste. C’est bien connu, le dev aime quand ça marche, pas forcément quand c’est beau (coucou les dev backs 😜).

Gardez en tête que le contraste perçu dépend aussi des réglages de l’utilisateur (luminosité, contraste de l’écran, etc.). Comme ces paramètres ne sont pas maîtrisables, utilisez des outils comme WebAIM Contrast Checker pour garantir un contraste suffisant.

🎯 Visez un ratio minimum de 4.5:1 pour le texte standard.

🪶 12. Utiliser trop de polices et tailles différentes

Utiliser 4 polices, 12 tailles de texte et plusieurs interlignages rend votre design peu lisible et amateur.

Adoptez une échelle typographique simple et limitez-vous généralement à 2 polices :

• Une pour les titres
• Une pour le texte (idéalement en sans-serif pour une meilleure lisibilité à l’écran)

body {
  font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', sans-serif;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.75rem; }
h5 { font-size: 1.5rem; }
h6 { font-size: 1.25rem; }

🪦 13. Surcharger les fichiers avec du CSS mort

Avec le temps, il arrive que vos fichiers de code se remplissent de classes CSS plus utilisées nulle part. Résultat : des fichiers plus lourds et une maintenance plus galère.

Pour visualiser et nettoyer ces styles inutilisés, vous pouvez utiliser des outils comme PurgeCSS ou les DevTools de votre navigateur.

Les frameworks CSS comme Tailwind intègrent des outils pour éliminer automatiquement les classes inutilisées lors de la construction du projet.

🔄 14. Ne pas reset ou normaliser les styles

Sans reset CSS, chaque navigateur applique ses propres styles par défaut, ce qui peut entraîner des incohérences visuelles d’un navigateur à l’autre.

Par exemple, les h1 n’ont pas toujours la même taille, les ul ont des marges différentes, etc.

Pour éviter cela, les développeurs utilisent des feuilles de style de réinitialisation ou de normalisation, comme les célèbres  normalize.css, reset.css, etc.

Voici un exemple de code illustrant un reset CSS basique :

*,
*::before,
*::after, {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

...

Un bon reset est la base d’un design cohérent et cross-navigateurs.