Topic List

Submitted by Little Bear on 10 ก.ย. 57 19:53

ปกติแล้วเราจะตั้งชื่อ 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

Submitted by Little Bear on 20 ก.พ. 55 23:23

ต้องใช้แน่ ๆ เพียงแต่ว่าจะทำได้แค่ไหน

blognone.com ได้เขียนแนะนำออกมาแล้ว คาดว่าจะมีหลายภาพ ติดตามได้นะครับ

ภาคต่อไป คอยก่อนนะครับ ยังไม่ออกมา

Submitted by Little Bear on 23 พ.ย. 54 00:21
ผมเพิ่งรู้ว่าใส่แค่นี้ก็เต็มจอแล้ว <meta name="apple-mobile-web-app-capable" content="yes" /> แต่เจ้าของเว็บต้องทำเอง

เพิ่งรู้ครับ

ที่มา blognone.com