Le document suivant décrit les règles qui s'appliquent pour optimiser les fichiers CSS dans l'interface utilisateur de Mozilla. La première partie est une discussion générale des règles de classification des systèmes de style Mozilla. Sur la base de cette compréhension du système, les sections suivantes contiennent des lignes directrices pour les styles d'écriture qui tirent parti des avantages pratiques de ce système de styles.
Le système de style divise les règles en quatre grandes catégories. Il est important de comprendre ces classes car elles sont les premières à être prises en compte pour la correspondance des règles. Le terme « sélecteur primaire » sera utilisé dans les paragraphes suivants. Le sélecteur principal fait référence à la partie la plus à droite du sélecteur (l'élément à mettre en correspondance, pas ses ancêtres). Par exemple, dans la règle suivante :
une img, div > p, h1 + [titre] {}
Les sélecteurs principaux sont "img", "p" et "[title]".
Règles qui utilisent le sélecteur d'ID comme sélecteur principal.
Par exemple:
Si une règle possède une classe spécifiée comme sélecteur principal, elle est classée dans cette classe.
Par exemple:
Si le sélecteur principal n'est pas un ID ou une classe, la classe suivante sera probablement la catégorie de balise. Si une règle spécifie une balise comme sélecteur principal, elle est classée dans cette catégorie.
Par exemple:
En plus des catégories ci-dessus, tout entre dans cette catégorie.
Par exemple:
Le système de style commence par le sélecteur le plus à droite et se déplace vers la gauche pour correspondre à une règle. Le système de style conservera les sélecteurs de correspondance vers la gauche jusqu'à ce que la règle soit mise en correspondance ou que la correspondance soit arrêtée en raison d'une erreur.
La première étape de classification des règles se produit en fonction de la catégorie du sélecteur principal. Le but de cette classification est de filtrer les règles qui ne nécessitent pas de correspondance fastidieuse. C’est l’objet d’améliorations significatives des performances. Moins il y a de règles à faire correspondre pour un élément donné, plus le style sera rendu rapidement. Par exemple, si un élément possède un ID, seules les règles d'ID correspondant à l'ID de l'élément seront récupérées. Seules les règles de classe correspondant à la classe de l'élément seront récupérées. Seules les règles de balise correspondant à la balise seront récupérées. Les règles globales sont toujours récupérées.