mozilla

Revision 10704 of Writing efficient CSS

  • Revision slug: CSS/Writing_Efficient_CSS
  • Revision title: Writing efficient CSS
  • Revision id: 10704
  • Created:
  • Creator: Dria
  • Is current revision? No
  • Comment

Revision Content

The following document outlines rules for optimizing CSS files for use in the Mozilla UI. The first section is a general discussion of how the Mozilla style system categorizes rules. With an understanding of this system, the following sections contain guidelines for writing rules that take advantage of Mozilla's style system implementation.

How the style system breaks up rules

The style system breaks rules up into four primary categories. It is critical to understand these categories, as they are the first line of defense as far as rule matching is concerned. I use the term key selector in the paragraphs that follow. The key selector is defined to be the rightmost occurrence of an id selector, a class selector, or a tag selector.

ID Rules

The first category consists of those rules that have an ID selector as their key selector.

Examples
button#backButton { } /* This is an ID-categorized rule */
#urlBar[type="autocomplete"] { } /* This is an ID-categorized rule */
treeitem > treerow > treecell#myCell :active { } /* This is an ID-categorized rule */

Class Rules

If a rule has a class specified as its key selector, then it falls into this category.

Examples
button.toolbarButton { } /* A class-based rule */
.fancyText { } /* A class-based rule */
menuitem > .menu-left[checked="true"] { } /* A class-based rule */

Tag Rules

If no class or ID is specified as the key selector, then the next potential category for a rule is the tag category. If a rule has a tag specified as its key selector, then the rule falls into this category.

Examples
td { } /* A tag-based rule */
treeitem > treerow { } /* A tag-based rule */
input[type="checkbox"] { } /* A tag-based rule */

Universal Rules

All other rules fall into this category.

Examples
:table { } /* A universal rule */
[hidden="true"] { } /* A universal rule */
* { } /* A universal rule */
tree > [collapsed="true"] { } /* A universal rule */

Revision Source

<p>The following document outlines rules for optimizing CSS files for use in the Mozilla UI. The first section is a general discussion of how the Mozilla style system categorizes rules. With an understanding of this system, the following sections contain guidelines for writing rules that take advantage of Mozilla's style system implementation.
</p>
<h3 name="How_the_style_system_breaks_up_rules"> How the style system breaks up rules </h3>
<p>The style system breaks rules up into four primary categories. It is critical to understand these categories, as they are the first line of defense as far as rule matching is concerned. I use the term <i>key selector</i> in the paragraphs that follow. The key selector is defined to be the rightmost occurrence of an id selector, a class selector, or a tag selector.
</p>
<h4 name="ID_Rules"> ID Rules </h4>
<p>The first category consists of those rules that have an ID selector as their key selector.
</p>
<h5 name="Examples"> Examples </h5>
<pre class="eval">button#backButton { } /* This is an ID-categorized rule */
#urlBar[type="autocomplete"] { } /* This is an ID-categorized rule */
treeitem &gt; treerow &gt; treecell#myCell :active { } /* This is an ID-categorized rule */
</pre>
<h4 name="Class_Rules"> Class Rules </h4>
<p>If a rule has a class specified as its key selector, then it falls into this category.
</p>
<h5 name="Examples_2"> Examples </h5>
<pre class="eval">button.toolbarButton { } /* A class-based rule */
.fancyText { } /* A class-based rule */
menuitem &gt; .menu-left[checked="true"] { } /* A class-based rule */
</pre>
<h4 name="Tag_Rules"> Tag Rules </h4>
<p>If no class or ID is specified as the key selector, then the next potential category for a rule is the tag category. If a rule has a tag specified as its key selector, then the rule falls into this category.
</p>
<h5 name="Examples_3"> Examples </h5>
<pre class="eval">td { } /* A tag-based rule */
treeitem &gt; treerow { } /* A tag-based rule */
input[type="checkbox"] { } /* A tag-based rule */
</pre>
<h4 name="Universal_Rules"> Universal Rules </h4>
<p>All other rules fall into this category.
</p>
<h5 name="Examples_4"> Examples </h5>
<pre class="eval">:table { } /* A universal rule */
[hidden="true"] { } /* A universal rule */
* { } /* A universal rule */
tree &gt; [collapsed="true"] { } /* A universal rule */
</pre>
Revert to this revision