Scoped CSS: วิธีจัดการ Style ไม่ให้ตีกันในโปรเจกต์ขนาดใหญ่
1. 🎯 ตอนที่ 19: สยบสงคราม CSS ตีกันด้วยเวทมนตร์ของ Scoped CSS
2. 📖 เปิดฉาก (The Hook)
น้องๆ เคยเจอฝันร้ายแบบนี้ไหมครับ? วันหนึ่งเราได้รับมอบหมายให้สร้างปุ่มใหม่ในหน้า Dashboard เราก็เลยเขียน CSS คลาส .button { background: red; } แล้วก็ใช้งานอย่างสบายใจ…
แต่พอผลักโค้ดขึ้น Production ปรากฏว่า “ปุ่มทั้งเว็บไซต์กลายเป็นสีแดงหมดเลย!” เพื่อนร่วมทีมเดินมาด่า ลูกค้าโทรมาโวยวาย โค้ดพังเละเทะไปหมด!
นี่คือปัญหาคลาสสิกของโลก Frontend ที่เรียกว่า “CSS Global Leak” ครับ เพราะโดยธรรมชาติแล้ว CSS (Cascading Style Sheets) จะมีขอบเขตแบบ Global คือเขียนที่ไหนก็ส่งผลกระทบถึงกันหมด (เหมือนเราตั้งใจจะทาสีบ้านตัวเอง แต่ดันทำสีหกใส่บ้านคนทั้งหมู่บ้าน)
ในยุคที่เราแบ่งหน้าเว็บเป็น Component ย่อยๆ การจัดการ CSS ไม่ให้ตีกันจึงสำคัญมาก และ Vue.js ก็ได้เตรียมอาวุธลับที่เรียกว่า <style scoped> มาให้เราแล้ว วันนี้พี่จะพาจิบกาแฟดำเข้มๆ แล้วไปมุดดูใต้พรมกันครับว่า Vue มันทำเวทมนตร์อะไร ขอบเขตของ Style ถึงไม่รั่วไหลไปกวนคนอื่น!
3. 🧠 แก่นวิชา (Core Concepts)
🛑 ปัญหาของ CSS ทั่วไป
ในอดีตเพื่อแก้ปัญหาคลาสสิกนี้ เราต้องพึ่งพาวิธีการตั้งชื่อคลาสให้ยาวและเฉพาะเจาะจงสุดๆ อย่าง BEM (Block Element Modifier) เช่น .dashboard-user-profile__button--active ซึ่งมันก็ดีครับ แต่มันพิมพ์เหนื่อยและทำให้อ่านโค้ด HTML ยากมาก