เทคนิคการเร่งความเร็ว CSS ตอนที่ 4

พูดถึงการเขียน CSS ในแบบที่ควรหลีกเลี่ยงไปแล้ว ตอนนี้จะเป็นเทคนิคการเขียน CSS ที่ควรจะทำ
  1. ลบ CSS ที่ไม่ได้ใช้หรือไม่มีผลออกซะบ้าง เพื่อให้ไฟล์ CSS มีขนาดเล็กที่สุด
  2. ใช้ class แทนการกำหนด CSS ให้กับ element แบบหลายๆชั้น หรือ ที่ต้องการให้มีผลกับ element หลายๆตัว หรือ การใช้ชื่อ tag เป้น Selector
  3. ใช้ id ในการกำหนด CSS แบบเฉพาะเจาะจงให้กับ element ใด element หนึ่ง
  4. ไม่ต้องใส่ชื่อ tag ให้กับ class หรือ id ถ้าจำเป็นให้กลีกเลี่ยงไปใช้ ชื่อ class หรือ id ให้แตกต่างกันไปเลย
  5. Selector หลายๆชั้นควรใช้กับ element ที่มีโหนดแม่เพียงหนึ่งเดียวเท่านั้น
// bad
ul li {
}
// good
ul > li {
}

ในการอ้างไปยังโหนดลูก การใส่ > จะมีประสิทธิภาพดีกว่า การไม่ใส่นะครับ แต่วิธีถัดไปด้านล่าง จะยังเป้นวิธีที่มีประสิทธิภาพมากกว่า
// good
ul > li {
}
ol > li {
}

ตัวอย่างด้านบนเป็นตัวอย่างที่พอใช้ได้ เนื่องจาก  tag li จะมี tag ul เป็น node แม่ได้เพียงอันเดียวเท่านั้น
// best
.ul-list {
}
.ol-list {
}

แต่การกำหนด class ให้กับ li โดยตรงก็ยังเป็นวิธีที่มีประสิทธิภาพดีกว่า
^