BEM เขียน CSS ให้อ่านง่าย

by Little Bear @10 ก.ย. 57 19:53 ( IP : 49...208 ) | Tags : CSS , HTML5

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







แสดงความคิดเห็น

« 5268
หากท่านไม่ได้เป็นสมาชิก ท่านจำเป็นต้องป้อนตัวอักษรของ Anti-spam word ในช่องข้างบนให้ถูกต้อง
The content of this field is kept private and will not be shown publicly. This mail use for contact via email when someone want to contact you.
Bold Italic Underline Left Center Right Ordered List Bulleted List Horizontal Rule Page break Hyperlink Text Color :) Quote
คำแนะนำ เว็บไซท์นี้สามารถเขียนข้อความในรูปแบบ มาร์คดาวน์ - Markdown Syntax:
  • วิธีการขึ้นบรรทัดใหม่โดยไม่เว้นช่องว่างระหว่างบรรทัด ให้เคาะเว้นวรรค (Space bar) ที่ท้ายบรรทัดจำนวนหนึ่งครั้ง
  • วิธีการขึ้นย่อหน้าใหม่ซึ่งจะมีการเว้นช่องว่างห่างจากบรรทัดด้านบนเล็กน้อย ให้เคาะ Enter จำนวน 2 ครั้ง