Les différentes règles

  • Les feuilles de styles sont écrites en cascade, c'est à dire que l'ordre dans lequel vous ajoutez vos règles CSS détermine le premier niveau de hiérarchie et de priorité.
  • La spécificité ensuite, permet de définir un deuxième ordre de priorité en fonction du sélecteur CSS choisi.
  • La spécificité est définie par un score (A,B,C) attribué au sélecteur.

Les sélecteurs

Il existe plusieurs manières de sélectionner un élément pour lui appliquer du style. Voici les différentes possibilités de le faire :

  • Sélecteur universelle "*" (score 0,0,0)
  • Les balises HTML comme "h1" (score 0,0,1)
  • Les attributs comme "[type='checkbox']" (score 0,1,0)
  • Les classes ".title" (score 0,1,0)
  • Les identifiants comme "#main" (score 1,0,0)

Il est également possible de cumuler les sélecteurs afin d'augmenter la spécificité, par exemple #main.title aura un score de (1,1,0)

Voici un outil qui permet de calculer rapidement le score d'un sélecteur : https://polypane.app/css-specificity-calculator/

La méthode Effet'BEM

La Syntax


  • BEM signifie Block Element Modifier
  • Le "Block" correspond à un élement contenant des enfants, par exemple une card avec un titre et un paragraphe (ex .card)
  • Ces enfants seront donc des "Elements" et porteront comme classe celle du block, suivi de deux underscores, puis du nom de l'élément (ex .card__title)
  • Enfin les on pourra se servir d'un "Modifier" pour venir changer le comportement d'un élément d'un bloc, par exemple colorer en rouge notre titre (ex .card__title .card__title--red)
  • Chez EffetB on a adapté légèrement cette dernière règle en ajoutant le modifier avec une classe plus simple pour alléger le html et améliorer la lecture du code (ex .card__title -red)


Dans l'exemple, .category est le Block, il contient plusieurs élements city, title, store. On peut donc personnaliser notre block puis développer le CSS de ses enfants de manière spécifique et lisible. L'opérateur "&" permet de ne pas répèter à chaque fois ".category" dans le code ou d'ajouter un modifier. 

L'élement title possède un modifier qui peut être appelé dans le html avec .category__title -green

La séléction en Javascript

Utilisation des data-attributes

  • Les data-attributes sont des attributs html customisables permettant d'ajouter au DOM des informations exemple : <h1 data-toggle=‘1’>Titre</h1>
  • Ils permettent de passer des paramètres comme par exemple l'id d'un produit : data-product-id=‘155’
  • On peut ensuite les sélectionner en JS et appliquer par exemple des écouteurs d'évènements dessus en récupérant la valeur (voir exemple)
  • Les utiliser uniquement pour les sélectionner en javascript permet de dissocier entièrement le CSS des scripts JS, et donc permet un meilleur maintient du code (par exemple pour le jour où une refonte graphique aura lieu, le css pourra être chamboulé sans impacter les scripts JS).
  • Il existe une utilisation des data-attributes en CSS qui consiste à récuperer la valeur de l'attribut dans le css "attr(data-parent)", mais c'est la seule raison de mêler les deux ! Voir https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Use_data_attributes