Tu devrais utiliser la syntaxe BEM !

La méthode BEM (Block, Element, Modifier) est une convention de nommage en CSS qui facilite la gestion des styles pour des projets complexes. En utilisant BEM, vous pouvez créer des structures CSS claires et modulaires, facilitant la maintenance et la réutilisation du code.

Définitions

Block (Bloc)

Un block est un composant autonome qui peut être réutilisé dans différents contextes. Les blocs sont les éléments principaux de votre interface.
Exemple : .button, .header, .card.

Element (Élément)

Un element est une partie d’un block qui est dépendante de celui-ci. Les éléments ne peuvent exister indépendamment du bloc.
Exemple : .button__icon, .header__title.

Modifier (Modificateur)

Un modifier est une variation d’un block ou d’un element. Les modificateurs permettent de créer des versions différentes d’un même block ou élément.
Exemple : .button--large, .header__title--bold.

Exemples

HTML

Voici comment vous pourriez structurer votre HTML en utilisant BEM :

<div class="card">
  <h2 class="card__title">Titre de la carte</h2>
  <p class="card__description">Description de la carte.</p>
  <button class="card__button card__button--primary">Action</button>
</div>