Escribir CSS eficaz
De MDC
Esta página está traduciéndose a partir del artículo Writing_Efficient CSS, razón por la cual puede haber algunos errores sintácticos o partes sin traducir. Puedes colaborar continuando con la traducción
El siguiente documento resume las reglas para optimizar los archivos CSS que son utilizados en Mozilla UI. La primera sección es una discusión general de como el sistema de estilos de Mozilla categoriza las reglas. Con el entendimiento de este sistema, las siguientes secciones contienen guías para escribir reglas que tomen las ventajas de implementación del sistema de estilo de Mozilla.
[editar] Como el sistema de estilo separa las reglas
El sistema de estilo separa las reglas en cuatro categorías primarias. Es crítico entender estas categorías, por ser la primera línea de defensa para el cumplimiento de las reglas. Yo uso el término "Clave selectora" en los párrafos que siguen. La clave selectora es definida por ser lo más similar a un ID, una clase o un identificador de tag.
[editar] Reglas ID
La primera categoría está compuesta por aquellas reglas que tienen un identificador ID como clave selectora.
Ejemplo
button#backButton { } /*Esto es una regla ID-categorizada*/
#urlBar[type="autocomplete"] { } /* Esto es una regla ID-categorizada */
treeitem > treerow > treecell#myCell :active { } /* Esto es una regla ID-categorizada*/
[editar] Reglas de Clase
Si una regla tiene un identificador de clase como su clave selectora, entonces es incluida en esta categoría.
Ejemplo
button.toolbarButton { } /* Una regla basada en clases */
.fancyText { } /* Una regla basada en clases */
menuitem > .menu-left[checked="true"] { } /* Una regla basada en clases */
[editar] Reglas para los Tag
Sí se especifica una clase o un ID como clave selectora, la siguiente probable categoría para una regla es la categoría tag. Sí una regla tiene un tag especificado como su clave selectora, entonces esa regla es incluida en esa categoría.
Ejemplo
td { } /* Una regla basada en tag */
treeitem > treerow { } /* Una regla basada en tag */
input[type="checkbox"] { } /* Una regla basada en tag */
[editar] Reglas universales
Todas las otras reglas son incluidas en esta categoría.
Ejemplo
:table { } /* Una regla universal */
[hidden="true"] { } /* Una regla universal */
* { } /* Una regla universal */
tree > [collapsed="true"] { } /* Una regla universal */
[editar] Como el sistema de estilos compara las reglas
El sistema de estilos compara una regla de la parte derecha hacia la izquierda a través de las reglas del selector. Mientras su pequeño subsistema continúa comprobando, el sistema de estilos continuará desplazándose hacia la izquierda hasta que encuentre una coincidencia con una regla o la descarte por no coincidir con ninguna.
La primera línea de defensa es la regla de filtrado que se obtenga basada en el tipo de clave selectora. El propósito de esta clasificación es filtrar reglas de salida para que tú no tengas que perder tiempo tratando de compaginar con las reglas. Esta es la clave para incrementar dramáticamente el rendimiento. Las pocas reglas que tendrás que verificar para un elemento dado, el rápido sistema de resolución lo hará. Como un ejemplo, si su elemento tiene un ID, entonces sólo la regla ID que coincida con su elemento ID será verificada. Sólo las reglas de clase encontradas en su elemento serán verificadas. Sólo las reglas de tag que coincidan con su tag serán verificadas. Las reglas universales siempre serán verificadas.
[editar] Guías para un CSS eficiente
[editar] ¡Evita reglas universales!
¡Asegúrate que una regla no termine en la categoría de Universal!
[editar] No califiques reglas Categorizadas como ID con nombres de tag o clases
Si tienes una regla de estilo que tiene un selector ID como su clave selectora no te preocupes en adicionar el nombre del tag a la regla. los IDs son únicos, por lo tanto esto hará más lenta la comparación, sin ninguna razón.
- INCORRECTO -
button#backButton { } - INCORRECTO -
.menu-left#newMenuIcon { } - CORRECTO -
#backButton { } - CORRECTO -
#newMenuIcon { }
[editar] No califiques reglas categorizadas como clase con nombres de tag
Similar a la regla anterior, todo para nuestras clases será único. La convención que debería ser usada es la de incluir el nombre del tag en el nombre de la clase.
- INCORRECTO -
treecell.indented { } - CORRECTO -
.treecell-indented { }
[editar] Trata de colocar las reglas en la categoría más específica que puedas
La principal causa que ocasiona la lentitud de nuestro sistema es que tenemos demasiadas reglas en la categoría tag. Mediante la adición de clases a nuestros elementos, podemos más adelante subdividir estas reglas en categorías de clases y, a partir de entonces, no perder más tiempo tratando de asignar tantas reglas a un tag determinado.
- INCORRECTO -
treeitem[mailfolder="true"] > treerow > treecell { } - CORRECTO -
.treecell-mailfolder { }
[editar] Evita el selector descendiente
El selector descendiente es el selector mas (caro) en CSS. Este es terriblemente caro, especificamente si una regla usando el selector esta en la categoría de tag o universal. Frecuentemente lo que se prefiere es el un selector hijo. El uso del selector descendiente es prohibido en UI CSS sin la aprobación explicita del propietario de la piel del módulo.
- BAD -
treehead treerow treecell { } - BETTER, BUT STILL BAD (see next guideline) -
treehead > treerow > treecell { }
[editar] Reglas categorizadas como Tags nunca deben contener un selector hijo!
Evita usar selectores hijos con reglas categorizadas como Tag. Incrementaras dramáticamente el tiempo en que se encuentre la pareja (específicamente si la regla es comparada probablemente mas seguido que de regular) por todas las ocurrencias de este elemento.
- INCORRECTO -
treehead > treerow > treecell { } - CORRECTO -
.treecell-header { }
[editar] verifica todos los usos de selectores hijos!
Se cuidadoso sobre el uso de selectores hijos. Si puedes pensar en una forma de evitar usarlo, puedes hacerlo. En particular, el selector hijo es usado frecuentemente con RDF trees(árboles) y menús parecidos
- BAD -
treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }
Recuerda que atributos de RDF pueden ser duplicados en una plantilla!. Toma ventaja de este factor para duplicar propiedades de RDF en elementos hijos en XUL que desees cambiar basados en este atributo.
- GOOD -
.tree-folderpane-icon[IsImapServer="true"] { }
[editar] Depende en la herencia!
Aprende que propiedades se heredan, y permite que lo hagan!. Nosotros hemos creado explícitamente XUL widgetry para que tu puedas poner lista-estilo-imagen (solo un ejemplo) o reglas de letras en el tag padre, y este se filtrara entre el contenido anónimo.
- INCORRECTO -
#bookmarkMenuItem > .menu-left { list-style-image: url(blah); } - CORRECTO -
#bookmarkMenuItem { list-style-image: url(blah); }
En el ejemplo de arriba, el deseo de estilo para el contenido anónimo(sin entender que lista-estilo-imagen se heredan) resultó en una regla estando en la categoría de clases, cuando esta regla debería haber terminado en la categoría mas especifica de todas, la categoría ID.
Recuerda, específicamente con contenido anónimo, que todas tienen algunas clases!. La regla INCORRECTA arriba causa que el icono de cada menú sea comprobado si esta contenido en el menú de favoritos. Esto es horriblemente caro (por lo que hay muchos menús); esta regla nunca debio ser comprobada por ningun otro menú mas que el menú de favoritos.
[editar] Usa -moz-image-region!
Poniendo un monton de imagenes en una sola imagen y seleccionandolas con {{cssxref|-moz-image-region} realiza significamente mejor que poniendo cada imagen en su propio documento.