guide-style-030-selecteurs.twig

{% embed './views/partials/_recommandation.twig' %}
	{% set recVersion = '1.0.1' %}
	{% block recTitle %}
				Choisir ses sélecteurs CSS
	{% endblock %}
	{% block recContent %}
			<aside class="bonus">
				<p>
					Un élément peut être désigné par un <code class="language-css token selector">#identifiant</code>,
					par un type défini par son nom de <code class="language-css token selector">balise</code>,
					ou par diverses qualités définies par ses attributs ou ses propriétés.
					Pour sélectionner ces qualités on trouve notamment des
					<code class="language-css token selector">.classes</code>
					et des <code class="language-css token selector">:pseudo-classes</code>.
					L’identifiant fonctionne un peu comme un nom propre,
					le type comme un nom commun
					et les diverses qualités comme des adjectifs ou des compléments du nom.
				</p>
			</aside>
			<p>
				Les règles suivantes s’appliquent à la rédaction des sélecteurs, par ordre
				décroissant d’importance et sous réserve du niveau de compatibilité recherché.
			</p>
			<p>
				Dans ces règles, la négation d’une balise
				(<code class="language-css token selector">:not(article)</code>)
				est assimilée à une balise,
				la négation d’une pseudo-classe
				(<code class="language-css token selector">:not(:lang(fr))</code>)
				à une pseudo-classe
				et la négation d’une classe ou d’un attribut
				(<code class="language-css token selector">:not(.dense)</code>)
				à une classe ou un attribut, respectivement.
			</p>
			<ol>
				<li>
					<p>
						Un sélecteur <abbr title="" class="rfc2119">devrait</abbr>
						désigner ses cibles le plus haut possible dans l’arborescence de la
						page.
					</p>
					<aside class="bonus">
						<p>
							Par exemple, pour définir la police par défaut d’un document,
							il ne faut pas désigner séparément, les paragraphes, les listes
							etc., mais définir celle-ci sur le sélecteur
							<code class="language-css token selector">:root</code>.
						</p>
						<p>
							Autre exemple, on préférera désigner une liste,
							<code class="language-css token selector">ul</code> ou
							<code class="language-css token selector">ol</code>,
							plutôt que ses <code class="language-css token selector">li</code>,
							quand c’est possible.
						</p>
					</aside>
				</li>
				<li>
					<p>
						Quand des éléments peuvent être définis par un type, une balise,
						il est <abbr title="" class="rfc2119">recommandé</abbr>
						de préférer cette solution aux solutions suivantes ou à tout autre.
					</p>
					<aside class="bonus">
						<p>
							Par exemple, on préférera une balise sémantique
							<code class="language-html">&lt;article></code> plutôt
							qu’un attribut ARIA (<code class="language-html no-wrap">&lt;… role="article"></code>)
							ou qu’une classe (<code class="language-html no-wrap">&lt;… class="article"></code>).
						</p>
						<p>
							⚠️ Comme plusieurs balises <code class="language-html">&lt;html></code>
							peuvent apparaître dans un document XML ou HTML 5 (du fait de l’extensibilité), cette
							règle ne s’applique pas à la balise <code class="language-css token selector">html</code>
							quand on souhaite désigner le document entier.
							Dans ce cas, on préférera <code class="language-css token selector">:root</code>.
						</p>
					</aside>
				</li>
				<li>
					<p>
						Quand des éléments peuvent être définis par une pseudo-classe décrivant un état
						ou une propriété,
						il est <abbr title="" class="rfc2119">recommandé</abbr>
						de préférer cette solution aux solutions suivantes ou à tout autre.
					</p>
					<p>
						À l’exception de <code class="language-css token selector">:root</code>,
						cette règle ne concerne pas les pseudo-classes dites structurelles qui indiquent
						un emplacement dans l’arborescence du document.
					</p>
					<aside class="bonus">
						<p>
							Par exemple, on préférera
							<code class="language-css token selector">:read-only</code>
							plutôt que <code class="language-css token selector">[readonly]</code>
							ou qu’une classe définie pour l’occasion et gérée par un script.
						</p>
						<p>Les principales pseudo-classes concernées sont :</p>
						<ul>
							<li>
								État dynamique ou d’interaction :
								<code class="language-css token selector">:link</code>,
								<code class="language-css token selector">:visited</code>,
								<code class="language-css token selector">:active</code>,
								<code class="language-css token selector">:hover</code>,
								<code class="language-css token selector">:focus</code>,
								<code class="language-css token selector">:target</code> ;
							</li>
							<li>
								Possibilités de saisie :
								<code class="language-css token selector">:disabled</code>,
								<code class="language-css token selector">:enabled</code>,
								<code class="language-css token selector">:read-write</code>,
								<code class="language-css token selector">:read-only</code> ;
							</li>
							<li>
								État d’une saisie :
								<code class="language-css token selector">:blank</code>,
								<code class="language-css token selector">:checked</code>,
								<code class="language-css token selector">:default</code> ;
							</li>
							<li>
								État de validation d’une saisie :
								<code class="language-css token selector">:invalid</code>,
								<code class="language-css token selector">:valid</code>,
								<code class="language-css token selector">:required</code>,
								<code class="language-css token selector">:optional</code> ;
							</li>
							<li>
								Propriétés de structure :
								<code class="language-css token selector">:root</code>,
								<code class="language-css token selector">:empty</code>,
								<code class="language-css token selector">:lang()</code>.
							</li>
						</ul>
					</aside>
				</li>
				<li>
					<p>
						Quand un élément peut être défini par des attributs ou classes
						déjà existants
						pour sa sémantique, son fonctionnement ou son accessibilité,
						il est <abbr title="" class="rfc2119">recommandé</abbr>
						de préférer cette solution aux solutions suivantes ou à tout autre.
					</p>
					<p>
						C’est <abbr title="" class="rfc2119">recommandé</abbr>, de même,
						quand de tels attributs pourraient être ajoutés sans difficulté particulière.
					</p>
					<p>
						Les attributs personnalisés (<code class="language-html token attr-name">data-…</code>)
						<abbr title="" class="rfc2119">doivent</abbr> permettre une conversion
						bidirectionnelle avec le JavaScript.
						Il est <abbr title="" class="rfc2119">recommandé</abbr>,
						pour cela, de les écrire en <abbr title="">kebab-case</abbr>.
					</p>
					<aside class="bonus">
						<p>
							Par exemple, on préférera utiliser
							<code class="language-css token selector">[rel~=bookmark]</code>
							pour un auto-lien, plutôt que de créer une classe,
							<code class="language-css token selector">.self-link</code>
							(un auto-lien est  un lien placé dans le titre d’une section et qui
							renvoie à cette section elle-même).
						</p>
						<p>
							De même, on préférera utiliser l’attribut
							<code class="language-css token selector">[open]</code> pour suivre
							l’état d’un élément <code class="language-html">&lt;details></code>,
							qui a l’avantage d’être mis à jour automatiquement par le navigateur,
							plutôt que de créer artificiellement une classe
							(<code class="language-css token selector">.open</code>) qu’il faudrait
							mettre à jour à l’aide d’un script.
						</p>
						<p>
							Pour la dimension sémantique, cette règle favorise en particulier les
							<em>microformats</em>, qui sont une extension possible du HTML 5
							qui s’appuie sur des noms de classes standardisés.
							On pourra donc utiliser par exemple
							<code class="language-css token selector">.hentry</code> pour
							désigner un contenu daté et
							<code class="language-css token selector">.hentry .pauthor</code>
							pour désigner son auteur,
							plutôt que de créer des désignations spécifiques à tel ou tel site.
						</p>
						<p>
							Il est également intéressant d’utiliser les attributs ARIA,
							qui précisent la fonction (p. ex.
							<code class="language-css token selector">[role=toolbar]</code>)
							ou l’état (p. ex.
							<code class="language-css token selector">[aria-busy=true]</code>)
							d’éléments pour améliorer l’accessibilité d’une interface.
						</p>
						<p>
							Cette règle s’applique aussi aux composants web ou à leurs
							éléments, souvent associés à des classes ou attributs spécifiques.
						</p>
						<p>
							Pour certains sélecteurs rares, il peut être utile d’ajouter un commentaire
							à la feuille de style pour indiquer sa signification ou renvoyer vers une
							documentation.
						</p>
					</aside>
				</li>
				<li>
					<p>
						Quand les règles précédentes ne s’appliquent pas,
						on <abbr title="" class="rfc2119">peut</abbr>
						désigner un élément à l’aide d’une classe personnalisées.
						Le choix d’un nom de classe <abbr title="" class="rfc2119">devrait</abbr>
						se limiter aux cas suivants.
					</p>
					<ul>
						<li>
							Sémantique :
							décrit le rôle que peut occuper dans le texte le contenu des éléments cibles.
							<aside class="example">
								<p>
									<code class="language-css token selector">.name</code>
									pour désigner le nom d’une personne
									(<code class="language-html">Alan &lt;span class="name">Turing&lt;/span></code>),
									par exemple pour le rendre en petites-majuscules.
								</p>
							</aside>
							<aside class="bonus">
								<p>
									C’est vers ce choix qu’on peut se tourner quand on imagine
									désigner une mise en forme particulière.
									Ainsi, <code class="language-css token selector">.box</code>
									est correct pour présiser qu’une section est un encadré
									(<code class="language-html">&lt;aside class="box"></code>),
									mais pas pour simplement dire qu’on veut une bordure.
								</p>
							</aside>
						</li>
						<li>
							Fonction :
							décrit le rôle que les éléments cibles peuvent jouer dans une page, une interface
							ou un composant.
							<aside class="example">
								<p>
									<code class="language-css token selector">.here</code>
									pour désigner dans un menu de navigation une rubrique contenant
									la page en cours
									(<code class="language-html">&lt;a class="here" href=…></code>),
									par exemple pour la mettre en valeur.
								</p>
							</aside>
							<aside class="bonus">
								<p>
									C’est vers ce choix qu’on peut se tourner quand on imagine
									désigner une organisation particulière de l’espace.
									Par exemple, plutôt que d’utiliser
									<code class="language-css token selector">.grid</code> pour
									désigner une mosaïque d’images, on peut penser à
									<code class="language-css token selector">.album</code>.
								</p>
							</aside>
						</li>
						<li>
							État :
							pour désigner l’état d’un élément.
							<aside class="example">
								<p>
									<code class="language-css token selector">.open</code>
									pour désigner l’état d’un menu “burger”
									(<code class="language-html">&lt;nav class="open"></code>),
									typiquement pour effectivement en afficher le contenu.
								</p>
							</aside>
						</li>
					</ul>
				</li>
				<li>
					<p>
						Le nom des identifiants, des classes et des attributs personnalisés
						<abbr title="" class="rfc2119">doit</abbr>
						être défini et utilisé de façon sensible à la casse
						(différence minuscules/majuscules).
					</p>
				</li>
			</ol>
	{% endblock recContent %}
	{% block recRationale %}
				<ol>
					<li>
						<p>
							Ceci permet de gagner en généricité, d’où une meilleure
							<a class="principle" href="principes.html#ppe-maintenance">maintenabilité</a>.
							Cette règle réduit le plus souvent le nombre de cibles, d’où une meilleure
							<a class="principle" href="#ppe-performance">performance</a>.
						</p>
					</li>
					<li>
						<p>
							<a class="principle" href="principes.html#ppe-maintenance">Maintenabilité</a> :
							la spécificité est ainsi plus faible.
						</p>
						<p>
							<a class="principle" href="#ppe-lisible">Lisibilité</a> :
							les balises sont un vocabulaire commun à tous les sites ;
							leur sémantique ne nécessite pas de connaître des choix
							particuliers à tel ou tel site.
						</p>
					</li>
					<li>
						<p>
							<a class="principle" href="#ppe-lisible">Lisibilité</a> :
							comme pour la règle précédente, les pseudo-classes
							sont un vocabulaire commun à tous les sites ;
							leur sémantique ne nécessite pas de connaître des choix
							particuliers à tel ou tel site.
						</p>
						<p>
							En revanche, pour cette règle, on ne retient pas les
							pseudo-classes de structure autres que
							<code class="language-css token selector">:root</code>,
							<code class="language-css token selector">:empty</code> et
							<code class="language-css token selector">:lang()</code>,
							dans la mesure où elles dépendent d’une structure HTML
							plus susceptible de changer, ce qui pourrait poser des
							problèmes de
							<a class="principle" href="principes.html#ppe-maintenance">maintenabilité</a>.
						</p>
					</li>
					<li>
						<p>
							Ici, il s’agit d’améliorer la
							<a class="principle" href="#ppe-coherence">cohérence</a>
							et, plus généralement, la
							<a class="principle" href="#ppe-lisible">lisibilité</a> :
							on évite de créer inutilement de nouvelles désignations.
						</p>
						<p>
							<a class="principle" href="#ppe-standard">Respect des standards</a> :
							un attribut personnalisé s’écrit
							<code class="language-html token attr-name">data-…</code>,
							avec au moins un caractère après le tiret,
							est compatible avec le XML
							et ne comporte aucune majuscule latine (ASCII).
						</p>
						<p>
							L’écriture en <abbr title="">kebab-case</abbr>
							est un moyen simple de garantir une conversion univoque
							réversible en <abbr title="">camelCase</abbr>
							pour l’utilisation en JavaScript.
						</p>
					</li>
					<li>
						<p>
							<a class="principle" href="#ppe-standard">Respect des standards</a> :
							Les règles CSS doivent permettre d’assurer une traduction
							visuelle d’informations que les éléments et pseudo-éléments
							ciblés doivent pouvoir transmettre à l’utilisateur.
							Il s’agit ici de respecter la règle de division du
							travail entre le HTML et le CSS
							[<a href="https://www.w3.org/TR/html-design-principles/#separation-of-concerns">HTMLDP, §3.4</a>].
						</p>
					</li>
					<li>
						<p>
							Par défaut, la syntaxe du CSS est insensible à la casse,
							mais les identifiants sont sensibles à la casse
							(<code class="language-css token selector">#id</code>,
							<code class="language-css token selector">.classe</code>)
							La sensitivité à la casse des types et attributs
							dépend du langage.
							Cette règle assure la
							<a class="principle" href="#ppe-coherence">cohérence</a>
							en se limitant au plus petit dénominateur commun.
						</p>
					</li>
				</ol>
	{% endblock recRationale %}
{% endembed %}