BEM

BEM (Block Element Modifier)

  • HTML 클래스 속성의 작명법
  • 이러한 기본적 룰을 가지고 통일이 되어야 협업에 도움이 된다.

    • Block

  • 가장 바깥쪽 상위 요소인 독립적 블록
  • 재사용이 가능
  • 블록은 블록을 하위 요소로 가질 수 있음
  • 가장 바깥 상위 요소이므로 바로 클래스 선택자 사용이 가능
  • (e.g.) header, container

    • Element

  • 블록에 종속되는 하위 요소
  • 소속된 블록에 의존적 (다른 블록에 들어가지 않음)
  • 연걸방식 : __
  • (e.g.) block__element, header__logo, header__logo__image

    • Modifier

  • 블록에 종속되는 하위 요소
  • 엘리먼트의 모양 또는 속성이 변형된 경우 사용
  • 기능은 같지만 모양이 다른 경우, 모양은 같지만 기능이 다른 경우 등에 적용
  • 연결방식 : —
  • (e.g.) btn—red, btn—blue, btn—primary