เมื่อโปรเจกต์เติบโต CSS ธรรมดาจะเสียหายจาก global scope — ทุก selector แข่งขันกันทั่วโลก specificity wars ปะทุขึ้น และไม่มีใครกล้าลบกฎ วิธีการต่างๆ กำหนดโครงสร้างและอนุสัญญาการตั้งชื่อเพื่อให้ CSS ยังคงใช้งานได้
อนุสัญญาการตั้งชื่อที่ทำให้ความสัมพันธ์ชัดเจนและเก็บ specificity ราบเรียบ (เฉพาะคลาสเดียว):
{ }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
ค่า BEM: ชื่อคลาสสามารถเอกสารตัวเอง ถูก scoped ตามอนุสัญญา และมี specificity ต่ำอย่างสม่ำเสมอ (ไม่มีnesting/id wars)
สร้างสไตล์จากคลาสเล็ก ๆ ที่มีจุดประสงค์เดียวโดยตรงในมาร์กอัป:
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
ข้อดี: ไม่ต้องตั้งชื่อ ไม่มี CSS ที่ไม่ได้ใช้ (ถูกลบ) design tokens ที่สอดคล้องกัน ข้อเสีย: HTML ที่ซ้ำซ้อน เป็นที่นิยมอย่างมากเนื่องจากความเร็วและความสอดคล้องกัน
วิธีการสมัยใหม่ในกรอบการทำงาน component — scoped styles ให้กับ component เพื่อไม่ให้ สามารถรั่ว:
import styles from "./Card.module.css"; // class names are hashed/localized
<div className={styles.card}>...</div> // → .Card_card__a1b2 (unique)
นี่แก้ปัญหา global-scope ด้วยวิธีเชิงกลมากกว่าตามอนุสัญญา
OOCSS — separate structure from skin, reuse objects
SMACSS — categorize rules (base, layout, module, state, theme)
ITCSS — layer CSS by specificity (generic → explicit), low to high
ทั้งหมดต่อสู้กับศัตรูเดียวกัน: specificity creep naming collisions dead code และ unpredictable cascades ไม่ว่าจะผ่านการตั้งชื่อ (BEM) utilities (Tailwind) หรือ scoping (Modules) พวกเขาจะทำให้ CSS คาดการณ์ได้และปลอดภัยต่อการเปลี่ยนแปลงในขนาด
Codebases CSS ขนาดใหญ่พังลงภายใต้ global scope และ specificity wars หากไม่มีวินัย
การเลือกและนำวิธีการไปใช้อย่างสม่ำเสมอ (โดยทั่วไป BEM Tailwind หรือ scoped CSS Modules ในปัจจุบัน) คือสิ่งที่ทำให้สไตล์ยังคงเป็นโมดูลลาร์ ลบได้ และปราศจากความขัดแย้งเมื่อทีมงานและ codebase เติบโต