Написание эффективного CSS в пользовательском интерфейсе Mozilla

В следующем документе описаны правила, которые применяются для оптимизации файлов CSS в пользовательском интерфейсе Mozilla. Первая часть представляет собой общее обсуждение правил классификации системы стилей Mozilla. Основываясь на таком понимании системы, следующие разделы содержат рекомендации по написанию стилей, которые используют практические преимущества этой системы стилей.

Как системы стилей классифицируют правила

Система стилей делит правила на четыре большие категории. Важно понимать эти классы, поскольку они в первую очередь учитываются при сопоставлении правил. Термин «первичный селектор» будет использоваться в следующих параграфах. Первичный селектор относится к самой правой части селектора (сопоставляемому элементу, а не его предкам). Например, в следующем правиле:

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

Основными селекторами являются «img», «p» и «[title]».

Правила идентификации

Правила, в которых селектор идентификатора используется в качестве основного селектора.

Например:

• button#backButton { } /* Правила для категорий идентификаторов*/
• #urlBar[type="autocomplete"] { } /* Правила для категорий идентификаторов*/
• Treeitem > Treerow > Treecell#myCell:active { } /* Правила для категорий идентификаторов*/

Правила класса

Если правило имеет указанный класс в качестве основного селектора, оно классифицируется в этот класс.

Например:

• button.toolbarButton { } /* правила на основе классов*/
• .fancyText { } /* правила на основе классов*/
• Menuitem > .menu-left[checked="true"] { } /* правила на основе классов*/

Правила тегов

Если основным селектором не является идентификатор или класс, то следующим классом, скорее всего, будет категория тега. Если правило определяет тег в качестве основного селектора, он классифицируется в эту категорию.

Например:

• td { } /* Правила на основе тегов*/
• Treeitem > Treerow { } /* правила на основе тегов*/
• input[type="checkbox"] { } /* правила на основе тегов*/

глобальные правила

Помимо вышеперечисленных категорий, в эту категорию попадает все.

Например:

• [hidden="true"] { } /* Глобальные правила*/
• *{} /* Глобальные правила*/
• дерево > [collapsed="true"] { } /* Глобальные правила*/

Как система стилей соответствует правилам

Система стилей начинается с крайнего правого селектора и перемещается влево в соответствии с правилом. Система стилей будет удерживать соответствующие селекторы слева до тех пор, пока правило не будет сопоставлено или сопоставление не будет остановлено из-за ошибки.

Первый шаг в классификации правил происходит на основе основной категории селектора. Цель этой классификации — отфильтровать те правила, которые не требуют трудоемкого сопоставления. Именно на этом и сосредоточено значительное улучшение производительности. Чем меньше правил необходимо сопоставить для данного элемента, тем быстрее будет отображаться стиль. Например, если элемент имеет идентификатор, будут получены только правила идентификатора, соответствующие идентификатору элемента. Будут получены только правила класса, соответствующие классу элемента. Будут получены только правила тега, соответствующие тегу. Глобальные правила извлекаются всегда.