Menulis CSS yang efisien di Mozilla UI

Dokumen berikut menjelaskan aturan yang berlaku untuk mengoptimalkan file CSS di Mozilla UI. Bagian pertama adalah pembahasan umum tentang aturan klasifikasi sistem gaya Mozilla. Berdasarkan pemahaman sistem tersebut, bagian berikut berisi pedoman gaya penulisan yang memanfaatkan manfaat praktis dari sistem gaya ini.

Bagaimana sistem gaya mengklasifikasikan aturan

Sistem gaya membagi aturan menjadi empat kategori besar. Penting untuk memahami kelas-kelas ini karena kelas-kelas ini adalah yang pertama dipertimbangkan untuk pencocokan aturan. Istilah "pemilih utama" akan digunakan dalam paragraf berikut. Pemilih utama mengacu pada bagian paling kanan dari pemilih (elemen yang akan dicocokkan, bukan leluhurnya). Misalnya pada aturan berikut:

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

Pemilih utama adalah "img", "p", dan "[title]".

aturan tanda pengenal

Aturan yang menggunakan pemilih ID sebagai pemilih utama.

Misalnya:

• button#backButton { } /* Aturan untuk kategori ID*/
• #urlBar[type="autocomplete"] { } /* Aturan untuk kategori ID*/
• treeitem > treerow > treecell#myCell:active { } /* Aturan untuk kategori ID*/

Aturan kelas

Jika suatu aturan memiliki kelas tertentu sebagai pemilih utama, aturan tersebut diklasifikasikan ke dalam kelas ini.

Misalnya:

• button.toolbarButton { } /* aturan berbasis kelas*/
• .fancyText { } /* aturan berbasis kelas*/
• menuitem > .menu-left[checked="true"] { } /* aturan berbasis kelas*/

Aturan tanda

Jika pemilih utama bukan ID atau kelas, maka kelas berikutnya kemungkinan besar adalah kategori tag. Jika aturan menentukan tag sebagai pemilih utama, maka aturan tersebut diklasifikasikan ke dalam kategori ini.

Misalnya:

• td { } /* Aturan berbasis tag*/
• treeitem > treerow { } /* aturan berbasis tag*/
• input[type="checkbox"] { } /* aturan berbasis tag*/

aturan global

Selain kategori di atas, semuanya termasuk dalam kategori ini.

Misalnya:

• [hidden="true"] { } /* Aturan global*/
• *{} /* Aturan global*/
• pohon > [runtuh="benar"] { } /* Aturan global*/

Bagaimana sistem gaya sesuai dengan aturan

Sistem gaya dimulai dengan pemilih paling kanan dan berpindah ke kiri untuk mencocokkan aturan. Sistem gaya akan menjaga penyeleksi yang cocok di sebelah kiri hingga aturan cocok atau pencocokan dihentikan karena kesalahan.

Langkah pertama dalam mengklasifikasikan aturan terjadi berdasarkan kategori pemilih utama. Tujuan dari klasifikasi ini adalah untuk menyaring aturan-aturan yang tidak memerlukan pencocokan yang memakan waktu. Ini adalah fokus peningkatan kinerja yang signifikan. Semakin sedikit aturan yang perlu dicocokkan untuk elemen tertentu, semakin cepat gaya dirender. Misalnya, jika suatu elemen memiliki ID, maka hanya aturan ID yang cocok dengan ID elemen yang akan diambil. Hanya aturan kelas yang cocok dengan kelas elemen yang akan diambil. Hanya aturan tag yang cocok dengan tag yang akan diambil. Aturan global selalu diambil.