เทคนิคการเร่งความเร็ว CSS ตอนที่ 4
- ลบ CSS ที่ไม่ได้ใช้หรือไม่มีผลออกซะบ้าง เพื่อให้ไฟล์ CSS มีขนาดเล็กที่สุด
- ใช้ class แทนการกำหนด CSS ให้กับ element แบบหลายๆชั้น หรือ ที่ต้องการให้มีผลกับ element หลายๆตัว หรือ การใช้ชื่อ tag เป้น Selector
- ใช้ id ในการกำหนด CSS แบบเฉพาะเจาะจงให้กับ element ใด element หนึ่ง
- ไม่ต้องใส่ชื่อ tag ให้กับ class หรือ id ถ้าจำเป็นให้กลีกเลี่ยงไปใช้ ชื่อ class หรือ id ให้แตกต่างกันไปเลย
- 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 โดยตรงก็ยังเป็นวิธีที่มีประสิทธิภาพดีกว่า