次のドキュメントでは、Mozilla UI で CSS ファイルを最適化するために適用されるルールについて説明します。最初の部分は、Mozilla スタイルのシステム分類ルールの一般的な説明です。このシステムの理解に基づいて、次のセクションでは、このスタイル システムの実際的な利点を活用する書き方のガイドラインを示します。
スタイル システムは、ルールを 4 つの大きなカテゴリに分類します。これらのクラスはルールのマッチングで最初に考慮されるため、これらのクラスを理解することが重要です。 「プライマリセレクター」という用語は、次の段落で使用されます。プライマリ セレクターは、セレクターの右端の部分 (祖先ではなく、一致する要素) を参照します。たとえば、次のルールでは次のようになります。
a img、div > p、h1 + [タイトル] {}
主なセレクターは、「img」、「p」、および「[title]」です。
ID セレクターをプライマリ セレクターとして使用するルール。
例えば：
ルールにプライマリ セレクターとして指定されたクラスがある場合、ルールはこのクラスに分類されます。
例えば：
プライマリ セレクターが ID またはクラスではない場合、次のクラスはタグ カテゴリである可能性があります。ルールでタグがメイン セレクターとして指定されている場合、このカテゴリに分類されます。
例えば：
上記のカテゴリに加えて、すべてがこのカテゴリに分類されます。
例えば：
スタイル システムは、右端のセレクターから始まり、ルールに一致するように左に移動します。スタイル システムは、ルールが一致するか、エラーによりマッチングが停止されるまで、左側のセレクターのマッチングを続けます。
ルールを分類する最初のステップは、プライマリ セレクター カテゴリに基づいて行われます。この分類の目的は、時間のかかる照合を必要としないルールを除外することです。これがパフォーマンスの大幅な向上の焦点です。特定の要素に対して一致する必要があるルールが少ないほど、スタイルのレンダリングが速くなります。たとえば、要素に ID がある場合、その要素 ID に一致する ID ルールのみが取得されます。要素のクラスに一致するクラス ルールのみが取得されます。タグに一致するタグ ルールのみが取得されます。グローバル ルールは常に取得されます。