Portabilité

Réduire, ou, idéalement, enlever les dépendances de localisation signifie que nous pouvons déplacer nos composants plus librement au sein de notre balisage, mais pouons-nous améliorer notre capacité à bouger nos classes de composant à composant ? À un plus bas niveau, voici les changement que nous pouvons opérer sur les sélecteurs qui font les sélecteurs eux-même — en opoosition aux composants qu'ils créént — pour les rendre plus portables. Prenons l'exemple suivant :

input.btn { }

Il s'agit d“un sélecteur qualifié ; le premier élément input rend cette base de règle uniquement applicable aux éléments input. En omettant cette qualification, nous nous permettons de réutiliser la classe .btn sur n'importe quel élément que nous choisirions, comme un apar exemple, ou un button.

Les sélecteur qualifiés ne se prêtent pas facilement à la réutilisation, et chaque sélecteur écrit devrait l'être avec sa réutilisation en tête.

Bien sûr, il est des moments où vous pouvez légitimement qualifier un sélecteur — si vous avez besoin d'appliquer des styles spécifiques à un élément particulier lorsqu'il porte une certaine classe, par exemple :

/**
 * Embolden and colour any element with a class of `.error`.
 */
.error {
  color: red;
  font-weight: bold;
}

/**
 * If the element is a `div`, also give it some box-like styling.
 */
div.error {
  padding: 10px;
  border: 1px solid;
}

C'est un exemple où un sélecteur qualifié peut être justifié, toutefois je recommanderais davantage une approche telle que :

/**
 * Text-level errors.
 */
.error-text {
  color: red;
  font-weight: bold;
}

/**
 * Elements that contain errors.
 */
.error-box {
  padding: 10px;
  border: 1px solid;
}

Cela signifie que nous pouvons appliquer .error-box à n'importe quel élément, pas seulement un div—et que cela est est plus réutilisable que des sélecteurs qualifiés.

Une chose pour laquelle un sélecteur qualifié peut être utile est pour signaler quand une classe peut être attendue ou utiliser, par exemple :

ul.nav { }

Ici nous pouvons voir que la classe .nav class est prévue pour être utilisée sur un élément ul, et non sur un nav. En utilisant des sélecteur quasiment qualifiés, nous pouvons toujours fournir de l'information sans qualifier réellement le sélecteur :

/*ul*/.nav { }

En commentant le leading element, celui-ci peut toujours être lu, mais on évite de qualifier le sélecteur et d'augmenter sa spécificité.