CSS Nesting เขียน CSS เป็นกลุ่มก้อนเพื่อให้ง่ายในการจัดการ

ความน่าปวดหัวอย่างหนึ่งของการเขียน CSS คือเมื่อเราเขียน Selector  ที่เป็น Parent แล้ว จะเพิ่ม Selector ที่เป็นลูกก็ต้องเอาไปเขียนต่อๆ กันลากยาวลงมาเรื่อยๆ ทำให้พอไฟล์ CSS มันยาวๆ ก็ปวดหัวจับต้นชนหลายไม่ถูก ไม่รู้ว่า Selector ตัวนี้เป็นลูกของใคร แก้มันแล้วจะทำให้ที่อื่นพังไหม

หลายปีก่อนก็เริ่มมี CSS Preprocessor เข้ามาอย่าง Sass หรือ Less ก็พอจะทำให้เหล่ามหาเทพ Front-End Developer ทำงานง่ายขึ้นมาได้บ้าง แต่ยังติดปัญหากับผู้ที่เริ่มเขียน CSS HTML หรือเหล่ามือใหม่ทั้งหลายที่ต้องติดตั้งของเยอะแยะก่อนจะเริ่มเขียนได้ ผมเองก็เจอปัญหานี้

สงสัยเรื่อง CSS Nesting เป็นทุกขลาภของเหล่านักพัฒนาจริงๆ W3C ก็เลยเอาเรื่องนี้เข้ามาเป็นมาตรฐาน ให้สามารถเขียน Nesting ได้เลยโดยไม่ต้องใช้ Preprocessor

ถ้าหากเราจะเขียน Child Selector สั่ง h1 ที่อยู่ใน class ที่ชื่อว่า content เมื่อก่อนเราจะเขียนแบบนี้

<article class="content">
     <h1>หัวข้อหลัก</h1>
</article>

.content {
     …
}
 .content h1 {
     …
}

ตอนนี้เราเขียนแบบนี้ได้

.content {
       …
    &  h1 {
     …
   }
}

พูดง่ายๆ คือเอาชุด selector ของ h1 เข้าไปกองไว้ในแม่มันเลยโดยเอาเครื่องหมาย & ไว้ข้างหน้า

ถ้าหากเราจะสั่งเฉพาะ h1 ที่เป็นลูกเท่านั้นไม่เอาหลานๆ ของมันก็สามารถเขียนได้โดยเปลี่ยนจาก & เป็น >

.content {
       …
     > h1 {
     …
   }
}

เพื่อให้เข้าใจง่ายอีกอย่างคือ CSS Nesting มันยกพวก Child, Sibling และ Adjacent Sibling Combinator selectors เข้าไปไว้ในอ้อมอกของมันนั่นเอง

เรื่องถัดไปจะพูดถึง @scope หรือการกำหนดชุดคำสั่ง CSS ให้อยู่ในอาณาเขตที่เราต้องการ

อ่านเพิ่มเติม
CSS Nesting Module