Fundamentals
What is CSS
เรียนรู้ว่า CSS คืออะไร ทำงานอย่างไร และมีบทบาทอะไรในการสร้างเว็บ — ตั้งแต่ศูนย์จนเข้าใจภาพรวมทั้งหมด
CSS คืออะไร
CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่ใช้บอก Browser ว่า "Elements แต่ละตัวบนหน้าเว็บควรมีรูปร่างหน้าตาอย่างไร" ถ้า HTML คือโครงสร้างของหน้าเว็บ (เหมือนโครงกระดูกของบ้าน) CSS ก็คือส่วนที่กำหนดสีสัน ขนาด ตำแหน่ง และรูปแบบของทุกอย่าง (เหมือนสี วัสดุ และการตกแต่งภายใน) ก่อนที่จะมี CSS เว็บในยุคแรกๆ ต้องใช้ attribute ของ HTML เองในการกำหนดสไตล์ เช่น `<font color="red">` หรือ `<b>` ซึ่งทำให้โค้ดรกมาก แก้ไขยาก และไม่ consistent — CSS เกิดขึ้นมาเพื่อแก้ปัญหานี้โดยตรง
- แยกหน้าที่ออกจาก HTML ได้ชัดเจน — HTML ดูแลโครงสร้าง CSS ดูแลรูปลักษณ์
- แก้ไขสไตล์ทั้งเว็บได้จากไฟล์เดียว ไม่ต้องแก้ทีละหน้า
- ทำให้โค้ด HTML อ่านง่ายขึ้นมาก เพราะไม่มีสไตล์ปะปนอยู่
- รองรับ responsive design ทำให้เว็บแสดงผลได้ดีบนทุกหน้าจอ
โครงสร้าง CSS Rule: selector, property, value
เวลาเขียน CSS หนึ่งกฎ เรากำลังบอก Browser ว่า "เลือกอะไร" แล้ว "เปลี่ยนอะไร" ให้ "เป็นค่าไหน" ส่วนที่อยู่ก่อนเครื่องหมาย { } เรียกว่า selector ส่วนที่อยู่ข้างใน { } เรียกว่า declaration block และแต่ละบรรทัดด้านในมักเป็นคู่ property: value;
selector อยู่ก่อน { } ส่วน property กับ value อยู่ด้านในและคั่นกันด้วย :
h1 คือ selector, color และ font-size คือ property, blue และ 32px คือ value
| ส่วนของ CSS | อยู่ตรงไหน | ความหมาย | ตัวอย่าง |
|---|---|---|---|
| selector | ก่อน { } | ส่วนที่เลือก HTML element ว่าจะตกแต่งตัวไหน | h1 |
| property | ก่อน : ใน declaration | คุณสมบัติที่อยากเปลี่ยน | color |
| value | หลัง : และก่อน ; | ค่าที่กำหนดให้ property นั้น | blue |
| declaration | หนึ่งบรรทัดใน { } | หนึ่งคู่ property: value; | color: blue; |
| { ... } | หลัง selector | declaration block ที่รวมหลาย declaration ไว้ด้วยกัน | { color: blue; } |
- 1. Browser เจอ selector เช่น h1 แล้วหา <h1> ในหน้า HTML
- 2. Browser อ่าน property เช่น color เพื่อรู้ว่าจะเปลี่ยนคุณสมบัติอะไร
- 3. Browser อ่าน value เช่น blue เพื่อรู้ว่าจะตั้งค่านั้นเป็นอะไร
- 4. Browser นำ declaration ทั้งหมดใน { } ไปใช้กับ element ที่ selector จับได้
บทบาทของ CSS ใน Web — HTML vs CSS vs JavaScript
เว็บไซต์ทุกหน้าประกอบด้วยภาษา 3 ตัวที่ทำงานร่วมกัน แต่ละตัวมีหน้าที่ต่างกันชัดเจน ลองนึกภาพว่าเราจะสร้าง "มนุษย์" ขึ้นมาหนึ่งคน
HTML = โครงสร้าง · CSS = รูปลักษณ์ · JavaScript = พฤติกรรม — ทั้งสามทำงานร่วมกันแต่มีหน้าที่แยกกันชัดเจน
| ภาษา | หน้าที่ | อุปมาเป็นมนุษย์ | ตัวอย่าง |
|---|---|---|---|
| HTML | กำหนดโครงสร้างและเนื้อหา | โครงกระดูก + อวัยวะ | <h1>, <p>, <button> |
| CSS | กำหนดรูปลักษณ์และรูปแบบ | เสื้อผ้า + ผิวพรรณ + ทรงผม | color, font-size, layout |
| JavaScript | กำหนดพฤติกรรมและการโต้ตอบ | กล้ามเนื้อ + ระบบประสาท | click handler, fetch data |
กระบวนการที่ Browser ใช้ CSS (Rendering Pipeline)
เมื่อคุณเปิดเว็บไซต์ Browser ไม่ได้แค่ "อ่าน" โค้ดแล้วแสดงผลทันที — มันผ่านกระบวนการหลายขั้นตอน เรียกว่า Critical Rendering Path ขั้นตอนสำคัญที่ CSS เข้ามาเกี่ยวข้อง มีดังนี้
- 1. Parse HTML → DOM — Browser อ่าน HTML แล้วสร้าง Document Object Model (DOM) ซึ่งเป็นโครงสร้างต้นไม้ที่แทน element ทุกตัว
- 2. Parse CSS → CSSOM — Browser อ่าน CSS แล้วสร้าง CSS Object Model (CSSOM) ซึ่งเป็นโครงสร้างต้นไม้ที่แทนกฎสไตล์ทุกข้อ
- 3. DOM + CSSOM → Render Tree — Browser นำ DOM และ CSSOM มาผสมกัน ได้ Render Tree ที่บอกว่า element ไหนจะแสดงผล และมี style อะไรบ้าง
- 4. Layout — Browser คำนวณขนาดและตำแหน่งของ element แต่ละตัวบนหน้าจอ
- 5. Paint & Composite — Browser วาดพิกเซลลงบนหน้าจอตามข้อมูลที่คำนวณไว้
ตัวอย่าง: HTML เปล่าๆ ไม่มี CSS
ลองดูว่าถ้าเราเขียน HTML อย่างเดียวโดยไม่มี CSS ผลลัพธ์จะเป็นอย่างไร
ผลลัพธ์: ข้อความสีดำบนพื้นขาว ขนาดตัวอักษรเป็น default ของ browser ไม่มีสีสัน ไม่มี layout จัดวาง — ดูแบนและไม่น่าใช้งาน
ตัวอย่าง: เพิ่ม CSS เข้าไป
เพิ่ม CSS ไม่กี่บรรทัด หน้าตาเปลี่ยนไปอย่างสิ้นเชิง
ผลลัพธ์: ตัวอักษรสวยขึ้น มี margin จัดกึ่งกลาง หัวข้อเป็นสีน้ำเงิน ปุ่มมีสีและมุมโค้ง — ด้วย CSS ไม่กี่บรรทัด ประสบการณ์ผู้ใช้เปลี่ยนไปมาก
Visualization: Flow การ Render
Pipeline แบบเต็ม: HTML → DOM, CSS → CSSOM, รวมกันเป็น Render Tree → Layout → Paint → Display
ภาพด้านบนแสดง Pipeline ที่ Browser ใช้แปลง HTML + CSS ให้กลายเป็นสิ่งที่เห็นบนหน้าจอ HTTP Request → HTML File → [Parse HTML] → DOM Tree ↘ CSS File → [Parse CSS] → CSSOM Tree → Render Tree → Layout → Paint → Display ↗ (Inline styles, <style> tags, external .css files ทั้งหมดถูกรวมเข้าใน CSSOM) ประเด็นสำคัญที่ควรจำ: - DOM และ CSSOM ถูกสร้างแบบ parallel ได้ - Render Tree มีเฉพาะ element ที่แสดงผลจริง (element ที่มี display:none จะไม่อยู่ใน Render Tree) - Layout คำนวณ "ขนาดและตำแหน่ง" — ถ้า CSS เปลี่ยน property นี้ จะ trigger reflow (แพงมาก) - Paint วาด "สีและรูปลักษณ์" — ถ้า CSS เปลี่ยนแค่ color/shadow จะ trigger repaint (แพงน้อยกว่า)
Use Cases จริงในงาน Frontend
CSS ไม่ได้ใช้แค่ 'ทำให้สวย' — มันเป็น foundation ของงานออกแบบ UI ทุกประเภท
- Web Application — จัด layout ซับซ้อน, responsive sidebar, dark mode, loading skeleton
- Landing Page — typography ที่อ่านง่าย, hero section, animation ดึงดูดสายตา
- Design System — token สี, spacing, typography scale, component variant ที่ consistent
- Email Template — CSS inline สำหรับ email client ที่ support CSS น้อยมาก
- Print Stylesheet — ซ่อน navigation, ปรับ layout สำหรับการพิมพ์
- Accessibility — focus ring, contrast ratio, reduced-motion สำหรับผู้ใช้ที่มีความต้องการพิเศษ
Common Mistakes — ความเข้าใจผิดที่พบบ่อย
ความเข้าใจผิดที่อันตรายที่สุดคือมองว่า CSS เป็นแค่ "การตกแต่ง" ที่เพิ่มเติมทีหลัง ความจริงคือ CSS เป็นส่วนหนึ่งของ architecture — การตัดสินใจเรื่อง CSS มีผลต่อ performance, accessibility, และ maintainability ของโปรเจกต์ทั้งหมด
- มองว่า CSS แค่ตกแต่ง (ความจริง: CSS ควบคุม layout, performance (reflow/repaint), accessibility, และ UX ทั้งหมด)
- เขียน inline style ทั้งหมด เช่น style="color:red" (ความจริง: แก้ไขยาก, override ยาก, ไม่ reusable, ทำให้ HTML รกมาก)
- ไม่เข้าใจ Cascade และ Specificity (ความจริง: การที่ style ไม่ทำงานตามที่คาดมักเกิดจากไม่เข้าใจ specificity)
- ใช้ !important เป็น solution แรก (ความจริง: !important ทำลาย cascade ทำให้ debug ยากมากในระยะยาว ควรใช้เป็น last resort เท่านั้น)
สรุป
CSS เป็นภาษาที่ควบคุมรูปลักษณ์และ layout ของเว็บ ทำงานร่วมกับ HTML และ JavaScript เพื่อสร้างประสบการณ์ผู้ใช้ที่สมบูรณ์ การเข้าใจว่า browser นำ CSS ไปใช้อย่างไร (DOM → CSSOM → Render Tree → Layout → Paint) ช่วยให้เราเขียน CSS ที่ดีขึ้นและแก้ bug ได้เร็วขึ้น
- CSS = Cascading Style Sheets — ควบคุมรูปลักษณ์ของ HTML elements
- HTML คือโครงสร้าง, CSS คือรูปลักษณ์, JavaScript คือพฤติกรรม
- Browser แปลง HTML → DOM และ CSS → CSSOM แล้วรวมกันเป็น Render Tree
- CSS ไม่ใช่แค่การตกแต่ง — มันมีผลต่อ performance และ accessibility
- หลีกเลี่ยง inline style และ !important เพื่อโค้ดที่ maintainable ในระยะยาว