Escrevendo CSS eficiente na UI do Mozilla

O documento a seguir descreve as regras que se aplicam para otimizar arquivos CSS na UI do Mozilla. A primeira parte é uma discussão geral das regras de classificação do sistema estilo Mozilla. Com base nessa compreensão do sistema, as seções a seguir contêm diretrizes para estilos de escrita que aproveitam os benefícios práticos desse sistema de estilos.

Como os sistemas de estilo classificam as regras

O sistema de estilo divide as regras em quatro grandes categorias. É importante compreender essas classes porque elas são as primeiras a serem consideradas para correspondência de regras. O termo "seletor primário" será usado nos parágrafos seguintes. O seletor primário refere-se à parte mais à direita do seletor (o elemento a ser correspondido, não seus ancestrais). Por exemplo, na seguinte regra:

a img, div > p, h1 + [título] {}

Os seletores primários são "img", "p" e "[title]".

Regras de identificação

Regras que usam o seletor de ID como seletor principal.

Por exemplo:

• button#backButton { } /* Regras para categorias de ID*/
• #urlBar[type="autocomplete"] { } /* Regras para categorias de ID*/
• treeitem > treerow > treecell#myCell:active { } /* Regras para categorias de ID*/

Regras de classe

Se uma regra tiver uma classe especificada como seletor primário, ela será classificada nesta classe.

Por exemplo:

• button.toolbarButton { } /* regras baseadas em classe*/
• .fancyText { } /* regras baseadas em classe*/
• menuitem > .menu-left[checked="true"] { } /* regras baseadas em classe*/

Regras de tags

Se o seletor principal não for ID ou classe, então a próxima classe provavelmente será a categoria da tag. Se uma regra especificar tag como seletor principal, ela será classificada nesta categoria.

Por exemplo:

• td { } /* Regras baseadas em tags*/
• treeitem > treerow { } /* regras baseadas em tags*/
• input[type="checkbox"] { } /* regras baseadas em tags*/

regras globais

Além das categorias acima, tudo se enquadra nesta categoria.

Por exemplo:

• [hidden="true"] { } /* Regras globais*/
• *{} /* Regras globais*/
• tree > [collapsed="true"] { } /* Regras globais*/

Como o sistema de estilo corresponde às regras

O sistema de estilo começa com o seletor mais à direita e se move para a esquerda para corresponder a uma regra. O sistema de estilo manterá os seletores de correspondência à esquerda até que a regra seja correspondida ou a correspondência seja interrompida devido a um erro.

A primeira etapa na classificação das regras ocorre com base na categoria do seletor primário. O objetivo desta classificação é filtrar as regras que não exigem correspondência demorada. Este é o foco de melhorias significativas de desempenho. Quanto menos regras precisarem ser correspondidas para um determinado elemento, mais rápido o estilo será renderizado. Por exemplo, se um elemento tiver um ID, somente as regras de ID que correspondam ao ID do elemento serão recuperadas. Somente as regras de classe que correspondam à classe do elemento serão recuperadas. Somente regras de tag que correspondam à tag serão recuperadas. As regras globais são sempre recuperadas.