ไม่ตาลายก็ไม่ต้องลาตาย ด้วย Nesting ของ Sass (ตอนที่ 4)

อีกหนึ่งฟีตเจอร์ของ Sass ที่ทำให้ชีวิตของ Front-end Developer อย่างเราสะดวกสบายขึ้นอีกนั่นคือ Nesting ที่หลายๆคนที่พอคุ้นเคยกับการพัฒนาเว็บไซต์จะรู้ดีว่า nested เป็นรูปแบบที่มีใน HTML อย่างชัดเจน แต่กลับไม่มีใน CSS

จากตัวอย่างด้านล่างนี้ ลองเปรียบเทียบรูปแบบการเขียนของ HTML กับ CSS จะเห็นได้ว่ามีเพียง HTML เท่านั้นที่มีการเขียนในแบบ Nesting

Nesting คือรูปแบบของ syntax ในการเขียนโปรแกรม โดยที่โครงสร้างของโค้ดเป็นไปตามลำดับที่ช่วยในการจัดการความซับซ้อนของโค้ดให้อ่านได้ง่ายขึ้น

Sass สามารถช่วยจัดการการเขียน CSS ให้สามารถมองโค้ดได้ในรูปแบบเป็นโครงสร้างซ้อนกันตามลำดับขั้นเหมือนกันกับ HTML โดยวิธีการเขียนจะเป็นดังตัวอย่างด้านล่างนี้

จะเห็นว่า selector ย่อยๆนั้นถูกซ้อนอยู่ใน selector ที่คลุมทั้งหมดไว้

แต่จงพึงระวังไว้ว่าการ nested ให้ซ้อนกันมากเกินไปจะทำให้การดูโค้ดกลับมายากเหมือนเดิมได้เช่นกัน

ฉะนั้นเพื่อไม่ให้เกิดปัญหาที่โค้ดซ้อนทับกันมากเกินไป วันนี้จะมาแนะนำวิธีการที่ช่วยให้คุณจัดการโค้ดของคุณได้ด้วย

Mario Ricalde จาก thesassway ได้เสนอกฎไว้หนึ่งข้อว่า

The Inception Rule: don’t go more than four levels deep.

นั่นหมายความว่าเราไม่ควรจะเจาะจงในการเขียนมากจนเกินไปโดยซ้อนกันไปเรื่อยๆ ควรซ้อนมากที่สุดเพียงแค่สี่ชั่น หากเกินนี้ไปถือว่าเริ่มอันตรายแล้ว ถึงแม้บางครั้งจะเลี่ยงไม่ได้ แต่ก็ไม่ควรทำบ่อยจนเกินไป

จากนี้ไปจะเป็นคำแนะนำที่จะทำให้การเขียนโค้ดของคุณไม่มีความเจาะตงที่มากเกินไปโดยสิ่งที่ต้องพึงระลึกไว้ในการเขียนมีด้วยกัน 3 อย่างได้แก่ context, interaction และ state

Context ถ้าเนื้อหาส่วนหัวข้อที่คุณจะเขียนไม่จำเป็นต้องมี class หรือ id อะไรมากฉะนั้นการเขียน nest เพียงแค่ชั้นเดียวก็มากพอแล้วโดยใช้แค่ h1 - h6, ul, p

แต่ถ้าเป็นส่วนเนื้อหาส่วนของรายละเอียด อย่างน้อยก็จำเป็นต้องใช้ซ้อนกันสองระดับ ฉะนั้นควรแต่งรายละเอียดทั้งหมดไม่ใช่เฉพาะ object ดังตัวอย่างต่อไปนี้

.cart {
  #sidebar { width: 150px; }
  #content { width: 850px; }
}

Object ก็คือ elemnt หนึ่งที่จะเป็นชิ้นๆหนึ่งหรือเป็นส่วนย่อยของตัวอื่น ซึ่งถูกกำหนดด้วย class หรือ id ซึ่งทุกคนคงจะคุ้มเคยกันดีอยู่แล้วเพราะ object สามารถเป็นอะไรก็ได้ที่เราอยากให้แสดงในหน้าเว็บไซต์ของเรา ซึ่งเราสามารถใช้ object เป็นพื้นฐานสำหรับสร้างเว็บไซต์ของเราได้แก่

#sidebar
#content
#footer
.blog-post
.comment
.widget
.logo
.user
.button

โดยปกติเราจะสร้าง Class ที่เป็นตัวคลุม object ทั้งหมดและใช้ selector ที่ object นั้นๆมีให้ เช่น

ul.special-deal {
  ...
  li {...}
  a {...}
}

ส่วนมากเรา object จะมีสูงสุดแค่ 4 ระดับ เรามักจะอยู่ที่ระดับที่ 2 และ 3 โดยที่ระดับที่ 4 จะเป็น interaction state

Interaction State คือส่วนที่จะเปลี่ยนแปลงคุณสมบัติต่างๆเมื่อมีการกระทำใดๆเกิดขึ้นกับ object ซึ่งหากอยู่ในระดับที่ 4 ถือว่ามีความเหมาะสม