Arrière-plan

Les feuilles de style en cascade (CSS) sont un outil puissant utilisé pour styliser les pages Web.

CSS permet de séparer le contenu du document de la présentation du document, permettant aux ingénieurs de styliser différents aspects des pages Web, notamment : les polices, les couleurs, les arrière-plans, les mises en page et les animations, entre autres.

Cependant, écrire du CSS qui soit maintenable, évolutif et performant peut être difficile, d'autant plus que les applications Web grandissent en taille et en complexité.

Dans ce segment, je partagerai quelques bonnes pratiques CSS qui peuvent vous aider à écrire un meilleur code CSS, avec quelques exemples de code de choses à faire et à ne pas faire.

Au niveau personnel, le CSS m'a causé une perte de cheveux. Je te sauverai du sort que j'ai subi. Lisez ceci!

Utiliser un préprocesseur CSS

Les préprocesseurs CSS tels que Sass, Less et Stylus sont des outils qui vous aident à écrire un code CSS plus maintenable et évolutif.

Ces préprocesseurs fournissent des fonctionnalités telles que les variables, les mixins, les fonctions et l'imbrication, entre autres. Avec les variables, vous pouvez définir des valeurs qui sont réutilisées dans votre code CSS.

Les mixins vous permettent de regrouper les déclarations CSS et de les réutiliser dans différentes parties de votre code.

Les fonctions vous aident à effectuer des calculs et à manipuler des valeurs. L'imbrication vous permet d'écrire des règles CSS plus précises et plus faciles à lire.

Fais ça ✅

$primary-color: #007bff;

.button {
  background-color: $primary-color;
  color: #fff;
}

Ne fais pas ça ❌

.button {
  background-color: #007bff;
  color: #fff;
}

En utilisant un préprocesseur CSS, vous pouvez rendre votre code plus concis et plus facile à maintenir.

Utiliser une méthodologie CSS

Une méthodologie CSS est un ensemble de directives et de conventions qui vous aident à structurer et à organiser votre code CSS.

Une méthodologie fournit une approche cohérente de l'écriture de CSS, ce qui permet à plusieurs développeurs de travailler plus facilement sur la même base de code.

Il existe plusieurs méthodologies CSS, notamment BEM (Block-Element-Modifier), SMACSS (Scalable and Modular Architecture for CSS) et OOCSS (Object-Oriented CSS), entre autres.

BEM est une méthodologie populaire qui fournit une convention de dénomination pour les classes CSS. La convention de nommage BEM utilise un double trait de soulignement ( __) pour séparer un bloc et un élément et un double trait d'union ( --) pour séparer un bloc ou un élément et un modificateur.

Fais ça ✅

<div class="button button--primary">
  Click Me
</div>

Ne fais pas ça ❌

<div class="primary-button">
  Click Me
</div>

En utilisant une méthodologie CSS, vous pouvez rendre votre code plus cohérent, maintenable et plus facile à comprendre.

Utiliser une réinitialisation ou une normalisation CSS

Différents navigateurs Web ont différents styles par défaut pour les éléments HTML.

Pour vous assurer que votre code CSS fonctionne de manière cohérente sur tous les navigateurs, vous devez utiliser une réinitialisation ou une normalisation CSS. Une réinitialisation CSS est un ensemble de règles CSS qui suppriment tous les styles par défaut des éléments HTML.

Une normalisation est un ensemble de règles CSS qui normalisent les styles sur différents navigateurs.

Fais ça ✅

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />

Ne fais pas ça ❌

body {
  margin: 0;
  padding

Dans ce segment, nous avons exploré ces trois meilleures pratiques CSS qui peuvent vous aider à écrire un meilleur code CSS, notamment :

1. Utiliser un préprocesseur CSS
2. Utiliser une méthodologie CSS
3. Utiliser une réinitialisation CSS ou normaliser

1. Utilisez des noms de classe significatifs et descriptifs
2. Utiliser des propriétés et des valeurs abrégées
3. Évitez d'utiliser!important
4. Utilisez une boîte flexible ou une grille pour les mises en page
5. Minimiser l'utilisation des sélecteurs globaux
6. Évitez d'utiliser trop de sélecteurs imbriqués
7. Gardez votre code CSS organisé et maintenable