Escribir CSS eficiente

Este documento da pautas para optimizar código CSS para su uso en la Interfaz de Usuario (UI) de Mozilla.

La primera sección es una discusión general de cómo el sistema de estilo de Mozilla clasifica reglas. Las siguientes secciones contienen pautas para escribir reglas que saquen provecho de la implementación del sistema de estilo de Mozilla.

Cómo el sistema clasifica reglas

El sistema de estilo clasifica reglas en cuatro categorías principales:

1. Reglas ID
2. Reclas de clase
3. Reglas de etiqueta
4. Reglas universales

Es crítico entender estas categorías, ya que son los bloques de construcción fundamental de la detección de reglas.

Se usa el término selector clave en los párrafos que siguen. El selector clave es la última parte del selector (la parte que coincide con el elemento siendo detectado, en lugar de sus ancestros).

Por ejemplo, en la regla...

a img, div > p, h1 + [title] {…} 

…los selectores clave son img, p, y [title].

Reglas ID

La primera categoría consiste en aquellas reglas que tienen un selector ID como su selector clave.

Ejemplo

button#backButton {…}                                /* Esto es una regla de categoría ID */  #urlBar[type="autocomplete"] {…}                    /* Esto es una regla de categoría ID */  treeitem > treerow > treecell#myCell:active {…}     /* Esto es una regla de categoría ID */ 

Reglas del clase

Si una regla tiene una clase especificada como selector clave, va en esta categoría.

Ejemplo

button.toolbarButton {…}			/* Esto es una regla de clase */  .fancyText {…}					/* Esto es una regla de clase */  menuitem > .menu-left[checked="true"] {…}	/* Esto es una regla de clase */ 

Reglas de etiqueta

Si no se especifica clase o ID como selector clave, el siguiente candidato es la categoría etiqueta. Si una regla tiene una etiqueta especificada, entonces la regla va en esta categoría.

Ejemplo

td {…}				/* Esto es una regla de etiqueta */  treeitem > treerow {…}		/* Esto es una regla de etiqueta */ input[type="checkbox"] {…}	/* Esto es una regla de etiqueta */ 

Reglas universales

El resto de reglas van en esta categoría.

Ejemplo

[hidden="true"] {…}			/* Esto es una regla universal */  * {…}					/* Esto es una regla universal */  tree > [collapsed="true"] {…}		/* Esto es una regla universal */

Cómo el sistema detecta reglas

El sistema de estilo detecta reglas comenzando por el selector clave, y después yendo hacia la izquierda (buscando cualquier ancestro en el selector de la regla). Mientras el subárbol del selector continúa la búsqueda, el sistema de estilo continúa buscando hacia la izquierda hasta que o bien detecta la regla, o bien la abandona porque no coincide.

El concepto más fundamental es este filtrado de reglas. Las categorías existen para descargar reglas irrelevantes (para que el sistema no pierda el tiempo intentando detectarlas).

Ésta es la clave para aumentar el rendimiento de forma drástica: Cuantas menos reglas se requieran para un elemento dado, más rápida será la resolución.

Por ejemplo, si un elemento tiene un ID, sólo reglas de ID que detectan el ID del elemento serán comprobadas. Sólo reglas de clase para cada clase encontrada en el elemento serán comprobadas. Sólo reglas de etiqueta que detecten la etiqueta serán comprobadas. Las reglas universales serán siempre comprobadas.

Pautas para CSS eficiente

Evita reglas universales

¡Asegúrate de que ninguna regla es de la categoría universal!

No califiques reglas de ID con nombres de etiqueta o clases

Si una regla tiene un selector ID como selector clave, no añadas el nombre de la etiqueta a la regla. Dado que los IDs son únicos, añadir un nombre de etiqueta ralentizaría el proceso de detección innecesariamente.

MAL

button#backButton {…}

MAL

.menu-left#newMenuIcon {…}

BIEN

#backButton {…}

BIEN

#newMenuIcon {…}

No califiques reglas de clase con reglas de etiqueta

El concepto previo también aplica aquí. Todos los nombres de clase son únicos.

Una convención que puedes usar es incluir el nombre de etiqueta en el nombre de la clase. Sin embargo, esto puede costarte algo de flexibilidad; si se hacen cambios de diseño a la etiqueta, los nombres de clase deberán cambiar también. (Lo mejor es escoger nombres estrictamente semánticos, ya que la flexibilidad es uno de los objetivos de las hojas de estilo).

MAL

treecell.indented {…}

BIEN

.treecell-indented {…}

MEJOR

.hierarchy-deep {…}

Usa la categoría más específica posible

La mayor causa de lentitud es tener demasiadas reglas de etiqueta. Añadiendo clases a nuestros elementos, podemos subdividir más estas reglas en reglas de categoría, cosa que elimina el tiempo gastado intentando detectar reglas para cada etiqueta.

MAL

treeitem[mailfolder="true"] > treerow > treecell {…}

BIEN

.treecell-mailfolder {…}

Evita el selector descendiente

El selector descendiente es el selector más costoso en CSS. Es terriblemente costoso - especialmente si el selector es de elemento o universal.

Con frecuencia, lo que realmente se quiere es el selector de hijo.  Usar el selector descendiente está prohibido en CSS de Interfaz de Usuario sin la aprobación explícita del propietario de tu módulo de skin.

MAL

treehead treerow treecell {…}

MEJOR, PERO AÚN ASÍ MAL (ver la siguiente pauta)

treehead > treerow > treecell {…}

Las reglas de etiqueta no deberían nunca contener un selector descendiente

Evita usar el selector descendiente con reglas de elemento. Esto aumentará drásticamente el tiempo de detección (especialmente si la regla se presta a ser detectada con frecuencia) para todas las apareic de ese elemento.

MAL

treehead > treerow > treecell {…}

BIEN

.treecell-header {…}

Cuestiona todos los usos del selector descendiente

Sé cauteloso usando el selector descendiente. Evítalo si puedes.

En particular, el selector descendente es usado con frecuencia por árboles RDF y menús, tal que así:

MAL

treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon {…}

¡Recuerda que los atributos REF pueden estar duplicados en una plantilla! Aprovéchate de esto. Duplica las propiedades RDF en elementos XUL descendientes para cambiarlos según el atributo.

BIEN

.tree-folderpane-icon[IsImapServer="true"] {…}

Cuenta con la herencia

¡Aprende qué propiedades se heredan, y permite que lo hagan!

Por ejemplo, los widgets XUL están explícitamente puestos para que las reglas list-style-image o font de un padre se filtren hasta contenido anónimo <!-- esto de "contenido anónimo"... yo por lo menos no lo entiendo -->. No es necesario gastar tiempo en reglas que tratan directamente con contenido anónimo.

MAL

#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }

BIEN

#bookmarkMenuItem { list-style-image: url(blah) }

En el ejemplo de arriba, el querer dar estilo a contenido anónimo (sin aprovechar la herencia de list-style-image) ha resultado en una regla de clase, cuando la regla debeŕia haber sido de ID - ¡la categoría más específica de todas!

Recuerda: Todos los elementos tiene las mismas clases - especialmente el contenido anónimo!

La regla "mala" de arriba obliga a cada icono del menú a ser comprobado por si está dentro del ítem de menú de bookmarks.

¡Usa -moz-image-region!

Poner un montón de imágenes en un solo archivo de imagen y seleccionarlas con -moz-image-region pfunciona significativamente más rápido que poner cada imagen en su propio archivo.