หัวข้อ 5: CSS Variables และ Cascade

แนวคิดหลัก

CSS Variables หรือ Custom Properties ช่วยให้จัดการค่าที่ใช้ซ้ำ เช่น สี ระยะห่าง และขนาด ได้ง่ายขึ้น ส่วน Cascade คือกฎที่ browser ใช้ตัดสินว่า style ใดจะถูกนำมาใช้เมื่อมีหลาย rule ชนกัน

การประกาศ CSS Variables

นิยมประกาศตัวแปรระดับ global ใน :root

:root {
  --color-primary: #3b82f6;
  --color-text: #1f2937;
  --space-md: 16px;
}

ชื่อตัวแปรต้องขึ้นต้นด้วย --

การใช้งาน var()

.button {
  background: var(--color-primary);
  color: white;
  padding: var(--space-md);
}

สามารถใส่ fallback ได้

.link {
  color: var(--color-link, blue);
}

ถ้า --color-link ไม่มีค่า จะใช้ blue

ประโยชน์ของ CSS Variables

1. ปรับ theme ได้ง่าย
2. ลดการซ้ำซ้อนของโค้ด
3. ทำให้ design token ชัดเจน
4. เปลี่ยนค่าเฉพาะ section ได้
5. ใช้ร่วมกับ JavaScript เพื่อเปลี่ยน theme ได้

ตัวอย่าง theme:

:root {
  --bg: #ffffff;
  --text: #111827;
}

[data-theme="dark"] {
  --bg: #111827;
  --text: #f9fafb;
}

body {
  background: var(--bg);
  color: var(--text);
}

Cascade

Cascade คือกระบวนการที่ browser ตัดสินว่า CSS rule ใดจะชนะ โดยพิจารณาหลัก ๆ ดังนี้

1. Origin: style มาจาก browser, user หรือ author
2. Importance: มี !important หรือไม่
3. Specificity: selector มีน้ำหนักเท่าใด
4. Order: ถ้าน้ำหนักเท่ากัน rule ที่มาทีหลังชนะ

Inheritance

บาง property ถ่ายทอดจาก parent ไป child ได้ เช่น

1. color
2. font-family
3. font-size
4. line-height

บาง property ไม่ถ่ายทอด เช่น

1. margin
2. border
3. padding
4. width

ตัวอย่าง:

body {
  color: #333;
  font-family: sans-serif;
}

ข้อความภายใน body จะรับค่า color และ font-family ไปโดยอัตโนมัติ เว้นแต่มี rule อื่น override

!important

!important ทำให้ declaration มีน้ำหนักสูงขึ้น

.button {
  color: red !important;
}

ควรหลีกเลี่ยงการใช้บ่อย เพราะทำให้ debug และ override ยาก หากต้องใช้ควรใช้ในกรณีพิเศษ เช่น utility class ที่ตั้งใจ override หรือแก้ style จาก third-party ชั่วคราว

กิจกรรม

สร้าง theme light/dark ด้วย CSS Variables โดยกำหนดตัวแปร --bg, --text, --surface, --accent และสลับ theme ด้วย class หรือ data attribute

แบบทดสอบหลังเรียน

1. CSS Variables ประกาศอย่างไร
2. fallback ใน var() ใช้ทำอะไร
3. Cascade พิจารณาอะไรบ้าง
4. property ใด inherit ได้ ยกตัวอย่าง 2 ตัว
5. ทำไมควรหลีกเลี่ยง !important

กลับสัปดาห์ที่ 3