Topic List
ปกติแล้วเราจะตั้งชื่อ class กันตามใจฉัน หากหน้าเว็บมี element สัก 10 ตัว ก็คงไม่เป็นไร แต่ในความเป็นจริงเรามี element นับเป็นร้อย ๆ ในที่สุด ชื่อ class เราก็มั่วไปหมด แล้วเวลากลับมาแก้ไขภายหลังก็เลยมั่วสุด ๆ
BEM คืออะไร ?
BEM หรือ “Block Element Modifier” คือวิธีการตั้งชื่อ class อย่างเป็นระบบ เพื่อที่จะทำให้เราสามารถไล่โค้ดได้ง่าย และลดความซ้ำซ้อนของโค้ด โดยการตั้งชื่อ c**lass ด้วยวิธี BEM นั้น จะดูจากหน้าที่ของ html element นั้นๆ ซึ่งแบ่งออกเป็น 3 แบบ ด้วยกัน ดังนี้
Block กล่องอะไรก็ตามที่อยู่ได้โดยอิสระ (เช่น กล่อง search, กล่อง log in, เมนูหลัก เป็นต้น)
Element องค์ประกอบต่างๆ ของ Block (หาก Block เป็นคน Element ก็หมายถึงแขนขาของคนนั่นเอง)
Modifier ใส่ให้กับ Block หรือ Element ที่มีสไตล์เฉพาะตัว (Modifier ของ Block ก็เช่น คนที่เป็นผู้หญิง ส่วน Modifier ของ Element ก็เช่น แขนข้างซ้าย เป็นต้น)
วิธีการตั้งชื่อ class ก็ตามด้านล่าง คือ
/* สไตล์สำหรับ Block */
.block { }
<br />
/* สไตล์สำหรับ Element ต่างๆ ภายใน Block */
.block__element { }
<br />
/* สไตล์สำหรับ Block พิเศษ */
.block--modifier { }
<br />
/* สไตล์สำหรับ Element พิเศษ ภายใน Block */
.block__element--modifier { }
<br />
/* สไตล์สำหรับ Element ต่างๆ ภายใน Block พิเศษ */
.block--modifier__element { }
ส่วนรายละเอียดทั้งหมดลองตามไปอ่านกันได้ที่ www.siamhtml.com
ต้องใช้แน่ ๆ เพียงแต่ว่าจะทำได้แค่ไหน
blognone.com ได้เขียนแนะนำออกมาแล้ว คาดว่าจะมีหลายภาพ ติดตามได้นะครับ
ภาคต่อไป คอยก่อนนะครับ ยังไม่ออกมา
ผมเพิ่งรู้ว่าใส่แค่นี้ก็เต็มจอแล้ว <meta name="apple-mobile-web-app-capable" content="yes" /> แต่เจ้าของเว็บต้องทำเอง
เพิ่งรู้ครับ
ที่มา blognone.com