เอกสารต่อไปนี้อธิบายกฎที่ใช้เพื่อเพิ่มประสิทธิภาพไฟล์ CSS ใน Mozilla UI ส่วนแรกเป็นการอภิปรายทั่วไปเกี่ยวกับกฎการจำแนกประเภทระบบสไตล์ Mozilla ตามความเข้าใจของระบบนี้ ส่วนต่อไปนี้ประกอบด้วยแนวทางสำหรับการเขียนสไตล์ที่ใช้ประโยชน์จากประโยชน์เชิงปฏิบัติของระบบสไตล์นี้
ระบบรูปแบบแบ่งกฎออกเป็นสี่ประเภทกว้างๆ สิ่งสำคัญคือต้องเข้าใจคลาสเหล่านี้เนื่องจากคลาสเหล่านี้เป็นคลาสแรกที่ต้องพิจารณาสำหรับการจับคู่กฎ คำว่า "ตัวเลือกหลัก" จะถูกใช้ในย่อหน้าต่อไปนี้ ตัวเลือกหลักหมายถึงส่วนขวาสุดของตัวเลือก (องค์ประกอบที่จะจับคู่ ไม่ใช่องค์ประกอบบรรพบุรุษ) ตัวอย่างเช่น ในกฎต่อไปนี้:
img, div > p, h1 + [ชื่อ] {}
ตัวเลือกหลักคือ "img", "p" และ "[title]"
กฎที่ใช้ตัวเลือก ID เป็นตัวเลือกหลัก
ตัวอย่างเช่น:
หากกฎมีคลาสที่ระบุเป็นตัวเลือกหลัก กฎนั้นจะถูกจัดประเภทเป็นคลาสนี้
ตัวอย่างเช่น:
หากตัวเลือกหลักไม่ใช่ ID หรือคลาส คลาสถัดไปก็น่าจะเป็นหมวดหมู่แท็ก หากกฎระบุแท็กเป็นตัวเลือกหลัก แท็กนั้นจะถูกจัดอยู่ในหมวดหมู่นี้
ตัวอย่างเช่น:
นอกเหนือจากหมวดหมู่ข้างต้นแล้ว ทุกอย่างยังอยู่ในหมวดหมู่นี้อีกด้วย
ตัวอย่างเช่น:
ระบบสไตล์เริ่มต้นด้วยตัวเลือกขวาสุดและเลื่อนไปทางซ้ายเพื่อให้ตรงกับกฎ ระบบสไตล์จะเก็บตัวเลือกการจับคู่ไว้ทางซ้ายจนกว่ากฎจะตรงกันหรือการจับคู่หยุดลงเนื่องจากมีข้อผิดพลาด
ขั้นตอนแรกในการจำแนกกฎเกิดขึ้นตามหมวดหมู่ตัวเลือกหลัก วัตถุประสงค์ของการจัดหมวดหมู่นี้คือการกรองกฎที่ไม่ต้องใช้การจับคู่ที่ใช้เวลานานออกไป นี่คือจุดเน้นของการปรับปรุงประสิทธิภาพที่สำคัญ ยิ่งต้องจับคู่กฎกับองค์ประกอบที่กำหนดน้อยลง สไตล์ก็จะแสดงผลเร็วขึ้นเท่านั้น ตัวอย่างเช่น หากองค์ประกอบมี ID ระบบจะดึงเฉพาะกฎ ID ที่ตรงกับ ID องค์ประกอบเท่านั้น เฉพาะกฎของคลาสที่ตรงกับคลาสขององค์ประกอบเท่านั้นที่จะถูกดึงข้อมูล เฉพาะกฎของแท็กที่ตรงกับแท็กเท่านั้นที่จะถูกดึงข้อมูล กฎสากลจะถูกดึงออกมาเสมอ