BEM และ SASS การรวมกันที่ลงตัวของการเขียน CSS ยุคใหม่
การเขียน CSS ของแต่ละคนมีรูปแบบที่แตกต่างกันไป ตามความถนัด และการมองวัตถุของแต่ละบุคคล ยิ่งถ้าใน 1 โปรเจคมีคนทำหลายคนหรือนำโค้ดของคนอื่นมาแก้ไขต่อ อย่างเช่นซื้อมาจากที่อื่น หรือจะต้องแก้งาน MA เก่าๆ จะต้องใช้เทคนิคในการไล่หาพอสมควร ว่าอยู่ตรงไหน แก้ตรงจุดหรือเปล่า
วันนี้ก็เลยจะมาพูดถึง การเขียน CSS แบบ BEM (Block. Element. Modifier) ซึ่งเป็นหนึ่งในมาตรฐานที่นิยมใช้นั่นเอง
มันคืออะไร ? (What are they?)
Bem (Block. Element. Modifier) เป็นการแบ่งส่วนต่างๆบนเว็บไซต์ออกเป็น Block , Element และ Modifier
SASS เป็นภาษาที่เป็นส่วนต่อขยายจาก CSS ที่จะช่วยจัดการ การเขียน การเรียกใช้ ฟังค์ชั่นต่างๆ แบบมืออาชีพและมีเสถียรภาพ
Traditional example
ซึ่งจะสังเกตุได้จากการเขียน CSS แบบ BEM คือการใช้ — (ขีดกลาง 2 ตัว) กับ __ (underscore 2 ตัว) ในการเขียน Selector ครับ
ถ้าดูแล้วยังงงๆ อยู่ การเขียนแบบ BEM คือการกำหนดขอบเขต และความแตกต่างแบ่งออกเป็น
Block Component ด้านนอกสุด
Element Object ทั่วไปที่อยู่ใน block
Modifier รูปต่าง ๆ ของ block
ลองมาปรับให้เป็น แบบ SASS กันบ้าง มันจะออกมาเป็นยังไง
มันเข้าใจง่ายขึ้น สั้นขึ้น ไล่หาได้ง่ายขึ้น จาก format ที่ผสมผสานกันของ BEM และ SASS
—
Conclusion
การเขียน CSS แบบ SASS จะทำให้มองเป็นชั้น ไล่หาได้ง่าย หากว่ามีการตั้งชื่อ Class แบบ ฺBEM แล้ว จะทำให้เราเข้าใจว่า สิ่งไหนอยู่ภายใต้ตัวไหน จากชื่อ ยิ่งไล่ง่ายไปกันใหญ่
ลองเอาแนวคิดนี้ไปปรับใช้ในการเขียน CSS ดูครับ ส่วนตัวผมคิดว่ามันเจ๋งดี เข้าใจง่าย และเป็นระเบียบ แต่ก็ต้องการมีพูดคุยกับเพื่อนร่วมงานเพื่อให้เข้าใจการเขียน CSS ให้เป็นไปในแนวทางเดียวกันด้วย หากกลับมาแก้ภายหลังจะทำให้ Maintenance ได้ง่ายด้วยครับ
—
