CSS의 BEM 모델이란?

CSS BEM 모델이란?

• BEM(Block-Element-Modifier) 모델
  • CSS 클래스 네이밍 방법론중 하나
  • 가독성
  • 재사용성 UP
  
  
  • CSS 클래스 네이밍 같은 경우에는 CSS의 코드의 가독성, 유지보수, 재사용을 향상시키기 위해 개발자들 사이에서 널리 사용되는 방법론
  • CSS 클래스 네이밍을 3단계로 구조화한 방법
  • Block - 블록
    • 독립적으로 존재하며 다른요소에 의존하지 않는 최상위 요소
    • ex. button, header등과 같이 최상위 요소가 블록이 될수 있음
  • Element - 요소
    • 블록의 일부로 특정 기능을 수행하는 요소
    • 요소는 블록과 함께 사용할때만 의미를 가지고 블록을 기반으로 클래스를 작성함
    • ex. button이라는 블록 하위에 button_text라는 엘리먼트가 있을 수 있고, header라는 블록 하위에 header_logo엘리먼트가 있을 수 있음
  • Modifier - 수정자
    • 블록이나 요소의 외간 혹은 상태를 변경하는데 사용되는 클래스
    • ex. block에 색상을 수정하고 싶을때 button__primary, header__fixed와 같은 이러한 작은 상태를 변경하는데 수정자를 사용할 수 있음
• 장점
  • 가독성
    • 클래스명에 구조적인 정보를 담아 코드를 읽기 쉽게 함
  • 재사용성
    • 모듈화된 구조로 컴포넌트의 재사용 쉬움
  • 유지보수성
    • 클래스간의 의존성을 낮춤
• 단점
  • 클래스명 길어질 수 있음
  • 요소 및 수정자 사용을 위해 추가적인 클래스 작성
• BEM 모델 예시 - Block, Element, Modifier
  • Modifier는 highlighted 한개 나머지는 element 화살표가 잘못됨!!
  • 각 클래스의 이름은 자신의 역할과 의미를 조금 더 명확하게 전달하기 때문에 가독성과 재사용성을 높일 수 있음
  • 더 복잡한 프로젝트에서는 BEM 모델을 사용해서 컴포넌트를 구조화하고 스타일을 정의 할 수 있는데 이를 통해 유지보수가 더욱 더 용이하고 재사용성이 높은 CSS 코드를 사용할 수 있