Il est important lorsque l'on écrit du CSS d'établir correctement la portée de nos sélecteurs, et de sélectionner les bonnes choses pour de bonnes raisons. Le Selector Intent est le processus de décision et définition de ce que vous souhaitez comme style et comment vous allez le sélectionner. Par exemple, si vous souhaitez styler le menu principal de navigation de votre site, un sélecteur comme celui-ci serait incroyablement peu sage :

header ul { }

Ce sélecteur vise à style tout ul situé dans n'importe quel élémént header, alors que notre intention était de styler la navigation principale. C'est une piètre Selector Intent : vous pouvez avoir un grand nombre d'élément header sur une page, et ils peuvent eux-même héberger un grand nombre d'éléments ul, donc un sélecteur comme celui-ci risque d'appliquer des styles très précis à un très grand nombre d'éléments différents. Il en résulteras d'avoir à écrire davantage de CSS pour aller à l'encontre la greedy nature d'un tel sélecteur.

Une meilleur approche serait par exemple :

.site-nav { }

Un sélecteur non-ambigu, explicite, avec une bonne selector Intent. On sélectionne explicitement la bonne chose pour la bonne raison. De piètres Selector Intents sont une des plus grosses raisons des prises de tête sur les projets CSS. Écrire des règles bien trop greedy — et qui appliquent des traitements très spécifique en utilisant des sélecteur very far reaching — a des effets secondaires imprévisibles et amène à des feuilles de styles confuses et embrouillées, avec des sélecteurs dépassant les intentions et impactant et interferant avec des base de règles qui ne devraient pas être liées.

Le CSS ne peut pas être encapsulé, il est intrinsèquement leaky, mais nous pouvons atténuer ces effets en n'écrivant pas de tels sélecteurs opérant globalement : vos sélecteurs devraient être aussi explicites et raisonnés que votre raison de sélectionner quelque chose.