reveal.js

# CSS Variables และ Cascade

หัวข้อ 5 · CSS แผ่นแบบต่อเรียงและการออกแบบเว็บ

---

## แนวคิดหลัก

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

---

## การประกาศ CSS Variables

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

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

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

---

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

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

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

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

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

---

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

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

ตัวอย่าง theme:

```css
: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`

ตัวอย่าง:

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

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

---

## `!important`

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

```css
.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`

---

## จบบทเรียน

<a href="/web-programming/03-css-design/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>