Implications et bonnes pratiques
################################

.. raw:: html

   <iframe width="560" height="315" src="https://www.youtube.com/embed/uCkttN6MlZo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Imaginons que l’on souhaite que le sélecteur ``.special`` prenne le pas sur le sélecteur ``#attention``. Ce dernier a une spécificité dix fois supérieure. On pourrait créer un sélecteur ``#exemple.special``, mais l’on ne ferait que déplacer le problème (que se passe-t-il si l’on veut encore outrepasser ce sélecteur ?), et il faudrait de plus pour chaque id pouvant empêcher le jeu de règles associé au sélecteur ``id`` de s’appliquer.

.. code-block:: html

   <button id="attention" class="special">OK</button>

.. code-block:: css

   /* spécificité = 100 */
   #attention {
     color: red;
   }

   /* spécificité = 10 */
   .special {
      color: purple;
   }

   /* le sélecteur .color n'est pas assez prioritaire,
   on se retrouve à devoir faire ce qui suit */

   /* spécificité = 110 */
   #attention.special {
      color: green;
   }

Ces problèmes font qu’il est déconseillé d’utiliser le sélecteur d’id et de lui préférer le sélecteur de classe non qualifié et sans combinateur [#fn]_.


.. [#fn] https://cssguidelin.es/#ids-in-css