Work/HTML, CSS

[CSS] BEM - Naming convention

디쟈이너 2021. 2. 2. 18:49

✏️ BEM을 익히기 위해BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다.

 

BEM - Naming convention

 

 

BEM 엔티티의 이름은 고유합니다. 동일한 BEM 엔티티는 모든 기술(CSS, JavaScript, HTML)에서 항상 이름이 동일합니다. 네이밍 컨벤션의 주요 목적은 개발자에게 가능한한 의미 있는 정보를 전달하기 위함입니다.

각기 다른 방식으로 작성된 CSS 선택자의 이름입니다.

  • menuitemvisible
  • menu-item-visible
  • menuItemVisible

이름을 이해하기 위해서 각 단어를 주의깊게 읽어야합니다. 마지막 두개의 예시는 각 단어가 명확하게 나뉘어있습니다. 하지만 menu 가 블럭이고 item 이 엘리먼트, visible 이 모디파이어라는 것을 이해하도록 도와주지는 못합니다. BEM 엔티티 이름을 지정하는 규칙은 엔티티 이름을 모호하지 않고 이해하기 쉽게 만들기 위해 개발되었습니다.

명명 규칙

block-name__elem-name_mod-name_mod-val
  • 소문자를 사용한다
  • 단어어는 하이픈(-) 으로 분리한다
  • 블록 이름은 엘리먼트와 모디파이어의 네임스페이스를 정의합니다
  • 엘리먼트의 이름은 블록 이름에 더블 언더스코어 (__) 로 분리하여 작성한다
  • 모디파이어 이름은 블록이나 엘리먼트 이름에 싱글 언더스코어 (_) 로 분리하여 작성한다
  • 모디파이어의 값(value)는 모디파이어 이름에 싱글 언더스코어 (_) 로 분리하여 작성한다
  • 부울린 모디파이어는 이름짓지 않는다

대체할 수 있는 명명 규칙

BEM 커뮤니티에서 활발하게 사용하는 대체 솔루션들이 있습니다. bem-naming 도구를 사용하여 대안적인 명명 규칙을 만들어내고 있습니다.

Two Dashes style

block-name__elem-name--mod-name--mod-val
  • 모디파이어 이름이나 값은 블록이나 엘리먼트 이름에 더블 하이픈 (—) 으로 분리하여 작성한다
  • 나머지는 일반 규칙과 동일하다

더블 하이픈은 코멘트에 사용되기 때문에 HTML 문서 유효성 검사 오류가 발생할 수 있다.

CamelCase style

blockName-elemName_modName_modVal
  • 이름에 있는 모든 단어 첫 글자는 대문자로 작성한다
  • 블록, 엘리먼트, 모디파이어를 분리하는 방법은 일반 규칙과 동일하다

React style

BlockName-ElemName_modName_modVal
  • 블록과 엘리먼트의 이름은 첫 글자를 대문자로 작성한다
  • 모디파이어 이름의 첫 글자는 소문자로 작성한다
  • 이름에 사용하는 각 단어는 모두 첫 글자를 대문자로 작성한다
  • 엘리먼트의 이름은 블록 이름에 싱글 하이픈 (-) 으로 분리하여 작성한다
  • 모디파이어의 이름과 값을 분리하는 방법은 일반 규칙과 동일하다
반응형