CSS Specificity: ทำความเข้าใจลำดับความสำคัญ

ยินดีต้อนรับสู่บทเรียน CSS บทแรกของเรา! ในบทนี้ เราจะมาเรียนรู้เกี่ยวกับ Specificity ซึ่งเป็นแนวคิดที่สำคัญมากในการเขียน CSS เพราะมันเป็นตัวกำหนดว่า CSS rule ไหนจะถูกนำไปใช้กับ element ในหน้าเว็บของเรา

Specificity คืออะไร

Specificity คือ "ความจำเพาะ" หรือ "ความละเอียด" ของ CSS selector ที่ใช้ในการเลือก element ใน HTML พูดง่ายๆ คือ มันเป็นระบบที่ CSS ใช้ในการตัดสินใจว่า style ไหนจะถูกนำไปใช้ เมื่อมี style หลายอันที่พยายามจะกำหนด style ให้กับ element เดียวกัน

ลองนึกภาพว่าคุณมีเพื่อนสองคน คนหนึ่งบอกให้คุณใส่เสื้อสีแดง อีกคนบอกให้คุณใส่เสื้อสีน้ำเงิน คุณจะเชื่อใคร? Specificity ก็เหมือนกัน มันช่วยให้ browser ตัดสินใจว่า style ไหนควรถูกนำไปใช้ เมื่อมี style หลายอันที่ขัดแย้งกัน

การคำนวณ Specificity

Specificity จะถูกคำนวณโดยพิจารณาจากองค์ประกอบต่างๆ ของ CSS selector ซึ่งมี 4 ประเภทหลักๆ:

Inline styles: Styles ที่เขียนโดยตรงใน HTML element โดยใช้ attribute style (เช่น <p style="color: blue;">)
IDs: จำนวน ID selectors (เช่น #my-element)
Classes, attribute selectors, และ pseudo-classes: จำนวน class selectors (เช่น .my-class), attribute selectors (เช่น [type="text"]), และ pseudo-classes (เช่น :hover)
Elements และ pseudo-elements: จำนวน element selectors (เช่น p, div) และ pseudo-elements (เช่น ::before, ::after)

เราสามารถคิดว่า Specificity เป็นตัวเลข 4 หลัก (A, B, C, D) โดยที่:

A: Inline styles (0 หรือ 1)
B: IDs (จำนวน ID selectors)
C: Classes, attribute selectors, และ pseudo-classes (จำนวน selector เหล่านี้)
D: Elements และ pseudo-elements (จำนวน selector เหล่านี้)

เมื่อ browser เจอ CSS rule มันจะคำนวณ Specificity ของ rule นั้น แล้วเปรียบเทียบกับ Specificity ของ rule อื่นๆ ที่พยายามจะกำหนด style ให้กับ element เดียวกัน Rule ที่มี Specificity สูงกว่า จะชนะและถูกนำไปใช้

ตัวอย่าง:

/* Specificity: (0, 0, 0, 1) - Element selector */
p {
  color: black;
}

/* Specificity: (0, 0, 1, 0) - Class selector */
.highlight {
  color: blue;
}

/* Specificity: (0, 1, 0, 0) - ID selector */
#main-title {
  color: red;
}

/* Specificity: (1, 0, 0, 0) - Inline style */
<p style="color: green;">This is a paragraph.</p>

จากตัวอย่างข้างต้น:

Inline style (style="color: green;") จะชนะทั้งหมด เพราะมี Specificity สูงสุด (1, 0, 0, 0)
ID selector (#main-title) จะชนะ class selector และ element selector เพราะมี Specificity สูงกว่า (0, 1, 0, 0)
Class selector (.highlight) จะชนะ element selector เพราะมี Specificity สูงกว่า (0, 0, 1, 0)
Element selector (p) มี Specificity ต่ำสุด (0, 0, 0, 1)

ตัวอย่างเพิ่มเติม:

/* Specificity: (0, 0, 1, 2) */
.container p {
  font-size: 16px;
}

/* Specificity: (0, 0, 2, 1) */
.container .text {
  font-size: 18px;
}

/* Specificity: (0, 1, 0, 1) */
#main-content p {
  font-size: 20px;
}

ในตัวอย่างนี้ #main-content p จะมี Specificity สูงสุด (0, 1, 0, 1) ดังนั้น font-size ของ paragraph ที่อยู่ใน element ที่มี ID เป็น main-content จะเป็น 20px

การใช้ `!important` อย่างระมัดระวัง

!important เป็น keyword ที่ใช้ใน CSS เพื่อบอกให้ browser ละเว้น Specificity และใช้ style นั้นๆ เสมอ

p {
  color: black !important;
}

.highlight {
  color: blue;
}

ในตัวอย่างนี้ ถึงแม้ว่า class selector .highlight จะมี Specificity สูงกว่า element selector p แต่เนื่องจากเราใช้ !important กับ color: black ใน p ดังนั้น paragraph ทุกตัวจะมีสีดำ ไม่ว่าจะมี class highlight หรือไม่ก็ตาม

ข้อควรระวัง: การใช้ !important มากเกินไป อาจทำให้ CSS ของคุณยากต่อการ maintain และ debug เพราะมันทำให้ Specificity กลายเป็นเรื่องที่ไม่สำคัญอีกต่อไป ควรใช้ !important ในกรณีที่จำเป็นจริงๆ เท่านั้น เช่น:

Override styles ที่มาจาก library ภายนอกที่คุณไม่สามารถแก้ไขได้
Fix bugs ที่เกิดจาก Specificity ที่ซับซ้อน

ทางเลือกที่ดีกว่า: พยายามปรับ Specificity ของ selector ของคุณให้สูงขึ้น โดยไม่ต้องใช้ !important เช่น เพิ่ม ID หรือ class ให้กับ selector

สรุป

Specificity เป็นแนวคิดที่สำคัญในการเขียน CSS เพราะมันเป็นตัวกำหนดว่า style ไหนจะถูกนำไปใช้เมื่อมี style หลายอันที่ขัดแย้งกัน การเข้าใจวิธีการคำนวณ Specificity และการใช้ !important อย่างระมัดระวัง จะช่วยให้คุณเขียน CSS ที่มีความยืดหยุ่นและง่ายต่อการ maintain

ในบทเรียนต่อไป เราจะมาเรียนรู้เกี่ยวกับการใช้งาน CSS Reset และ Normalize เพื่อให้เว็บไซต์ของเราแสดงผลได้อย่างสอดคล้องกันใน browser ต่างๆ เจอกันใหม่บทเรียนหน้าครับ!

CSS Specificity: ทำความเข้าใจลำดับความสำคัญ