Traduit de l'anglais à l'aide de l'IA
Veuillez noter que cet article a été traduit à l'aide de la technologie IA. Bien que nous travaillions à maintenir l'exactitude, certains détails peuvent ne pas refléter parfaitement le texte original. Si vous avez des doutes sur une information, veuillez vous référer à la version anglaise.
Cet article couvre les bonnes pratiques concernant les sélecteurs HTML et CSS
Hiérarchie des éléments sur une page web
Pour un bref rappel, une page web est divisée en deux composants de base : le <head> et le <body>. Le <head> contient des informations sur ce qui va être chargé sur la page, comme des scripts, des styles et d'autres éléments de métadonnées. Le <body> est l'endroit où tout le contenu HTML de la page est rendu, bien qu'il puisse également contenir des scripts et des styles.
Qu'est-ce que les sélecteurs CSS
Les sélecteurs CSS sont composés de :
- Tags : définit la hiérarchie des éléments sur une page HTML
- Attributs : valeurs qui appliquent des règles à un élément sur une page web
- IDs : utilisés pour inclure un nom absolument unique à un élément spécifique
- Classes : utilisées pour inclure des noms supplémentaires pour tous les éléments de la page qui doivent avoir le même style exact
Sélecteurs CSS : Tag
Les tags définissent la hiérarchie des éléments sur une page HTML.
<div>, <a>, <button>, <span>, etc.
Sélecteurs CSS : Attributs
Les attributs sont des valeurs qui appliquent des règles à un élément sur une page web. Par ex. La largeur et la hauteur d'une image. Les attributs sont toujours spécifiés dans la balise de départ et consistent généralement en des paires nom/valeur comme nom="valeur".
Sélecteurs CSS : Attributs de données
Les Attributs de données stockent des informations supplémentaires sur les éléments standard sans nécessiter d'autres attributs non standard, ou propriétés supplémentaires sur le DOM. Lors de la création d'un événement, utilisez des crochets sur l'attribut de données.
Sélecteurs CSS : ID
L'attribut ID peut être utilisé pour inclure un nom unique à un élément spécifique. Un seul élément sur une page doit avoir un ID particulier. Identifié par un “#” suivi de la valeur unique
Par ex. : “#UniqueIDValue”
Sélecteurs CSS : Classes
Les classes sont utilisées pour inclure des noms supplémentaires pour tous les éléments de la page qui doivent avoir le même style exact.
Utilisez les classes comme partie du sélecteur CSS pour correspondre aux bons éléments sur la page
Représenté par un point “.” avant la valeur, c'est-à-dire “.ClassValue”
Meilleures pratiques pour les sélecteurs CSS
Les sélecteurs n'ont besoin d'être aussi spécifiques que vous le souhaitez. Vous pouvez omettre des éléments, tant que cela ne rend pas le sélecteur plus large que prévu.
Il existe de nombreuses façons d'écrire les mêmes sélecteurs. Par exemple, pour le HTML ci-dessous, les sélecteurs suivants signifient tous la même chose :
span b.blue
span .blue
#firstTag .blue
#firstTag b.blue
.blue
b.blue
.red .blue
.red b.blue
span#firstTag.red b.blueChaque élément d'un sélecteur est :
- Séparé par un espace.
- Si un tag est présent, il doit être la première chose dans chaque partie du sélecteur.
- Après cela, si un ID est présent et utilisé, il doit soit suivre immédiatement le tag, soit être le premier si aucun tag n'est présent.
- Enfin, toute classe ou classes doivent venir en dernier, après un tag ou un ID s'ils sont présents, et il peut y avoir plus d'une classe sur un seul élément.
Meilleures pratiques pour créer des événements de clic
- Assurez-vous que les éléments des fonctionnalités clés ont des IDs ou des classes uniques.
- Assurez-vous que l'ID, la classe ou l'attribut n'est pas trop spécifique ou trop général.
- Si un bouton peut apparaître à plusieurs endroits, assurez-vous que quelque chose dans la hiérarchie et/ou l'URL identifie quel bouton exact il s'agit.
Meilleures pratiques pour créer des événements 'Change on' et 'Submit'
Lorsque cela est possible, validez les formulaires avant l'envoi pour éviter des comptages d'envoi gonflés.
Meilleures pratiques pour définir les pages vues
Pour plus de précision, nous recommandons de créer des événements de pages vues basés sur leur chemin ou leur hachage, bien que vous puissiez les créer en utilisant n'importe laquelle des quatre propriétés fournies par l'URL de la page vue (domaine, chemin, requête et hachage).
Considérations
1. Le CSS dynamique inclut des nombres ou des chaînes aléatoires qui changent chaque fois que le site est mis à jour. Par conséquent, le flux de données s'arrêtera ou échouera à s'initier lorsque les valeurs de site et d'ID/classe changent.
2. React génère souvent des noms de classes imprévisibles.