요약

• css 클래스 이름 짓는 방법론

특징

• css 명시도 (specificiy)를 높여서 요소에 적용되는 스타일이 충돌하지 않도록 하는 css 아이디와 클래스를 naming하는 방법론이다
• 기본적으로 아이디는 사용하지 않고 클래스만 사용함
• OOCSS, Atomic 등 다른 naming 방법론도 있는데 BEM이 그나마 복잡하지 않음
• 클래스를 Block(독립 적인 요소), Element(block을 구성하는 단위), Modifier로 구분함
  • 일반적으로 적는 클래스 이름은 block
  • element인 경우 block__element
  • modifier인 경우 block__element—modifier
    • 예.
      • .header => block
      • .header__navigation => element
      • .header__navigation—navi-text => modifier

장,단점

• 장점:
  • 모듈화 (클래스에 적용되는 css가 서로에게 영향을 주지 않음): block style이 다른 element 스타일의 inheritance 영향을 받지 않음
  • 재사용성 가능한 css 코드가 만들어짐
  • 읽기 좋은 구조로 인한 가독성
• 단점:
  • 클래스 이름이 끝도 없이 길어져 가독성을 해칠 수 있음
  • BEM 을 사용안하는 스타일 프레임워크를 사용하면 코드 일관성 유지가 되지 않음

팁

• React에서는 스타일링할때 module이나 css-in-js(styled-components) 사용하면 고유의 클래스 이름이 생성되기 때문에 BEM 신경 안써도됨

끝

😊