El siguiente documento describe las reglas que se aplican para optimizar archivos CSS en la interfaz de usuario de Mozilla. La primera parte es una discusión general de las reglas de clasificación del sistema de estilo Mozilla. Con base en esta comprensión del sistema, las siguientes secciones contienen pautas para estilos de escritura que aprovechan los beneficios prácticos de este sistema de estilo.
El sistema de estilo divide las reglas en cuatro categorías amplias. Es importante comprender estas clases porque son las primeras que se consideran para la coincidencia de reglas. El término "selector primario" se utilizará en los párrafos siguientes. El selector principal se refiere a la parte más a la derecha del selector (el elemento que debe coincidir, no sus antepasados). Por ejemplo, en la siguiente regla:
una img, div > p, h1 + [título] {}
Los selectores principales son "img", "p" y "[título]".
Reglas que utilizan el selector de ID como selector principal.
Por ejemplo:
Si una regla tiene una clase especificada como selector principal, se clasifica en esta clase.
Por ejemplo:
Si el selector principal no es ID ni clase, es probable que la siguiente clase sea la categoría de etiqueta. Si una regla especifica una etiqueta como selector principal, se clasifica en esta categoría.
Por ejemplo:
Además de las categorías anteriores, todo entra en esta categoría.
Por ejemplo:
El sistema de estilo comienza con el selector situado más a la derecha y se mueve hacia la izquierda para coincidir con una regla. El sistema de estilo seguirá haciendo coincidir los selectores a la izquierda hasta que la regla coincida o se detenga la coincidencia debido a un error.
El primer paso en la clasificación de reglas se produce según la categoría del selector principal. El propósito de esta clasificación es filtrar aquellas reglas que no requieren una comparación que requiera mucho tiempo. Este es el foco de importantes mejoras de rendimiento. Cuantas menos reglas deban coincidir para un elemento determinado, más rápido se representará el estilo. Por ejemplo, si un elemento tiene un ID, solo se recuperarán las reglas de ID que coincidan con el ID del elemento. Sólo se recuperarán las reglas de clase que coincidan con la clase del elemento. Sólo se recuperarán las reglas de etiquetas que coincidan con la etiqueta. Las reglas globales siempre se recuperan.