|<- [[Reusability]]|[[Portability]] ->|

====== Location Independence ======

Étant donné la nature toujours changeante de la plupart des projets d'UI, et l'avancée vers davantage d'architectures basées sur des composants, il est dans notre intérêt de ne pas seulement styler les choses selon où elle sont, mais aussi selon ce qu'elles sont. C'est à dire que le style de nos composants ne devrait pas être lié à l'endroit où ils sont — il devrait être totalement indépendant de leur emplacement.
Prenons l'exemple d'un bouton call-to-action que nous avons choisis de styler avec le sélecteur suivant :

<code>
.promo a { }
</code>

Non seulement nous avons ici une piètre Selector Intent—cela va styler greedily tout lien situé dans un élément .promo afin qu'il ressemble à un bouton — c'est aussi une perte de ressource d'être aussi dépendant d'une localisation : on ne peut réutiliser ce bouton avec le style correct en dehors d'un élément .promo étant donné que l'on les a lié explicitement à cet localisation. Une bien meilleur façon aurait été :

<code>
.btn { }
</code>

Cette classe unique peut être réutilisée n'importe où en dehors de .promo et apportera toujours le style correct. Les conséquences d'un meilleur sélecteur incluent que cette portion d'UI incluent une meilleur portabilité, recyclabilité, l'absence de dépendance, et une bien meilleure Selector Intent. Un composant ne devrait pas avoir à se situer à un endroit particulier pour apparaître de telle ou telle façon.