Escribir CSS eficaz

  • Enlace amigable (slug) de la revisión: Escribir_CSS_eficaz
  • Título de la revisión: Escribir CSS eficaz
  • Id de la revisión: 107677
  • Creada:
  • Creador: Blanchrt
  • ¿Es la revisión actual? No
  • Comentario /* No califiques reglas categorizadas como ID con nombres de tag o clases */

Contenido de la revisión

{{wiki.template('Traducción', [ "inglés", "Writing_Efficient CSS", "en" ])}}

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 cómo 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 aprovechen la implementación del sistema de estilo de Mozilla.

Cómo 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.

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*/

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 */

Reglas para los Tag

Si 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 */

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 */

Cómo 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.

Guías para un CSS eficiente

Evita reglas universales

¡Asegúrate de que una regla no termine en la categoría de Universal!

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 molestes en añadir 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 { }

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 { }

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{{mediawiki.external('mailfolder=\"true\"')}} > treerow > treecell { }
  • CORRECTO - .treecell-mailfolder { }

Evita el selector descendiente

El selector descendiente es el selector más (caro) en CSS. Este es terriblemente caro, especificamente si una regla usando el selector está en la categoría de tag o universal. Frecuentemente lo que se prefiere es el un selector hijo. El uso del selector descendiente está 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 { }

Las 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 { }

Verifica todos los usos de selectores hijos

Sé cuidadoso con 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{{mediawiki.external('IsImapServer=\"true\"')}} > treerow > .tree-folderpane-icon { }

Recuerda qué atributos de RDF pueden ser duplicados en una plantilla. Aprovecha este factor para duplicar propiedades de RDF en elementos hijos en XUL que desees cambiar basados en este atributo.

  • GOOD - .tree-folderpane-icon{{mediawiki.external('IsImapServer=\"true\"')}} { }

Depende de la herencia

Aprende qué propiedades se heredan y permite que lo hagan. Nosotros hemos creado explícitamente XUL widgetry para que tú puedas poner lista-estilo-imagen (sólo 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 está contenido en el menú de favoritos. Esto es horriblemente caro (por lo que hay muchos menús); esta regla nunca debió ser comprobada por ningun otro menú mas que el menú de favoritos.

Usa -moz-image-region

Poniendo un grupo de imágenes en una sola imagen y seleccionandolas con {{cssxref|-moz-image-region} realiza significamente mejor que poniendo cada imagen en su propio documento.

Original Document Information

  • Author: David Hyatt
  • Last Updated Date: 2000-04-21
{{ wiki.languages( { "ja": "ja/Writing_Efficient_CSS", "en": "en/Writing_Efficient_CSS" } ) }}

Fuente de la revisión

<p>
</p><p>{{wiki.template('Traducción', [ "inglés", "Writing_Efficient CSS", "en" ])}}
</p><p>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 cómo 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 aprovechen la implementación del sistema de estilo de Mozilla.
</p>
<h3 name="C.C3.B3mo_el_sistema_de_estilo_separa_las_reglas"> Cómo el sistema de estilo separa las reglas </h3>
<p>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.
</p>
<h4 name="Reglas_ID"> Reglas ID </h4>
<p>La primera categoría está compuesta por aquellas reglas que tienen un identificador ID como clave selectora.
</p><p><b>Ejemplo</b>
</p>
<pre class="eval">button#backButton { } /*Esto es una regla ID-categorizada*/
#urlBar[type="autocomplete"] { } /* Esto es una regla ID-categorizada */
treeitem &gt; treerow &gt; treecell#myCell :active { } /* Esto es una regla ID-categorizada*/
</pre>
<h4 name="Reglas_de_Clase"> Reglas de Clase </h4>
<p>Si una regla tiene un identificador de clase como su clave selectora, entonces es incluida en esta categoría.
</p><p><b>Ejemplo</b>
</p>
<pre class="eval">button.toolbarButton { } /* Una regla basada en clases */
.fancyText { } /* Una regla basada en clases */
menuitem &gt; .menu-left[checked="true"] { } /* Una regla basada en clases */
</pre>
<h4 name="Reglas_para_los_Tag"> Reglas para los Tag  </h4>
<p>Si 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.
</p><p><b>Ejemplo</b>
</p>
<pre class="eval">td { } /* Una regla basada en tag */
treeitem &gt; treerow { } /* Una regla basada en tag */
input[type="checkbox"] { } /* Una regla basada en tag */
</pre>
<h4 name="Reglas_universales"> Reglas universales </h4>
<p>Todas las otras reglas son incluidas en esta categoría.
</p><p><b>Ejemplo</b>
</p>
<pre class="eval">:table { } /* Una regla universal */
[hidden="true"] { } /* Una regla universal */
* { } /* Una regla universal */
tree &gt; [collapsed="true"] { } /* Una regla universal */
</pre>
<h3 name="C.C3.B3mo_el_sistema_de_estilos_compara_las_reglas"> Cómo el sistema de estilos compara las reglas </h3>
<p>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.
</p><p>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.
</p>
<h3 name="Gu.C3.ADas_para_un_CSS_eficiente"> Guías para un CSS eficiente </h3>
<h4 name="Evita_reglas_universales"> Evita reglas universales </h4>
<p>¡Asegúrate de que una regla no termine en la categoría de Universal!
</p>
<h4 name="No_califiques_reglas_categorizadas_como_ID_con_nombres_de_tag_o_clases"> No califiques reglas categorizadas como ID con nombres de tag o clases </h4>
<p>Si tienes una regla de estilo que tiene un selector ID como su clave selectora, no te molestes en añadir 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.
</p>
<ul><li> INCORRECTO - <code>button#backButton { }</code>
</li><li> INCORRECTO - <code>.menu-left#newMenuIcon { }</code>
</li><li> CORRECTO - <code>#backButton { }</code>
</li><li> CORRECTO - <code>#newMenuIcon { }</code>
</li></ul>
<h4 name="No_califiques_reglas_categorizadas_como_clase_con_nombres_de_tag"> No califiques reglas categorizadas como clase con nombres de tag  </h4>
<p>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.
</p>
<ul><li> INCORRECTO - <code>treecell.indented { }</code>
</li><li> CORRECTO - <code>.treecell-indented { }</code>
</li></ul>
<h4 name="Trata_de_colocar_las_reglas_en_la_categor.C3.ADa_m.C3.A1s_espec.C3.ADfica_que_puedas"> Trata de colocar las reglas en la categoría más específica que puedas </h4>
<p>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.
</p>
<ul><li> INCORRECTO - <code>treeitem{{mediawiki.external('mailfolder=\"true\"')}} &gt; treerow &gt; treecell { }</code>
</li><li> CORRECTO - <code>.treecell-mailfolder { }</code>
</li></ul>
<h4 name="Evita_el_selector_descendiente">Evita el selector descendiente </h4>
<p>El selector descendiente es el selector más (caro) en CSS. Este es terriblemente caro, especificamente si una regla usando el selector está en la categoría de tag o universal. Frecuentemente lo que se prefiere es el un selector hijo. El uso del selector descendiente está prohibido en UI CSS sin la aprobación explicita del propietario de la piel del módulo.
</p>
<ul><li> BAD - <code>treehead treerow treecell { }</code>
</li><li> BETTER, BUT STILL BAD (see next guideline) - <code>treehead &gt; treerow &gt; treecell { }</code>
</li></ul>
<h4 name="Las_reglas_categorizadas_como_Tags_nunca_deben_contener_un_selector_hijo">Las reglas categorizadas como Tags nunca deben contener un selector hijo</h4>
<p>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.
</p>
<ul><li> INCORRECTO - <code>treehead &gt; treerow &gt; treecell { }</code>
</li><li> CORRECTO - <code>.treecell-header { }</code>
</li></ul>
<h4 name="Verifica_todos_los_usos_de_selectores_hijos">Verifica todos los usos de selectores hijos</h4>
<p>Sé cuidadoso con 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
</p>
<ul><li> BAD - <code>treeitem{{mediawiki.external('IsImapServer=\"true\"')}} &gt; treerow &gt; .tree-folderpane-icon { }</code>
</li></ul>
<p>Recuerda qué atributos de RDF pueden ser duplicados en una plantilla. Aprovecha este factor para duplicar propiedades de RDF en elementos hijos en XUL que desees cambiar basados en este atributo.
</p>
<ul><li> GOOD - <code>.tree-folderpane-icon{{mediawiki.external('IsImapServer=\"true\"')}} { }</code>
</li></ul>
<h4 name="Depende_de_la_herencia"> Depende de la herencia </h4>
<p>Aprende qué propiedades se heredan y permite que lo hagan. Nosotros hemos creado explícitamente XUL widgetry para que tú puedas poner lista-estilo-imagen (sólo un ejemplo) o reglas de letras en el tag padre, y este se filtrara entre el contenido anónimo.
</p>
<ul><li> INCORRECTO - <code>#bookmarkMenuItem &gt; .menu-left { list-style-image: url(blah); }</code>
</li><li> CORRECTO - <code>#bookmarkMenuItem { list-style-image: url(blah); }</code>
</li></ul>
<p>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.
</p><p>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 está contenido en el menú de favoritos. Esto es horriblemente caro (por lo que hay muchos menús); esta regla nunca debió ser comprobada por ningun otro menú mas que el menú de favoritos.
</p>
<h4 name="Usa_-moz-image-region"> Usa -moz-image-region </h4>
<p>Poniendo un grupo de imágenes en una sola imagen y seleccionandolas con {{cssxref|-moz-image-region} realiza significamente mejor que poniendo cada imagen en su propio documento.
</p>
<div class="originaldocinfo">
<h3 name="Original_Document_Information"> Original Document Information </h3>
<ul><li> Author: David Hyatt
</li><li> Last Updated Date: 2000-04-21
</li></ul>
</div>
<div class="noinclude">
</div>
{{ wiki.languages( { "ja": "ja/Writing_Efficient_CSS", "en": "en/Writing_Efficient_CSS" } ) }}
Revertir a esta revisión