BEM

Concept

BEM (Block - Element - Modifier)

• Ý nghĩa:

  • Block: Khối - thẻ cha
  • Element: Thành phần trong khối, con của thẻ cha
  • Modifier: Bổ sung ý nghĩa cho block hoặc element (viết thêm 1 class, để bổ sung ý nghĩa, thêm css để cho nó chi tiết hơn)

• Cú pháp

  • .block
  • .block__element
  • .block--modifier
  • .block__element--modifier

advantage - disadvantage

• Ưu:

  • Tính rõ ràng
  • Tái sử dụng
  • Teamwork
  • Tính module

• Nhược

  • Nhiều class, tên class dài