📒 BEM ?
BEM이란 CSS 방법론 중 하나로, Blcok, Element, Modifier 의 약자이다.
BEM을 통해 class 네이밍과 구조에 대해 고민하자 !
📌 Why BEM? : BEM의 장점
- 시각적으로 알아보기 쉽다
- 목적 또는 기능을 직관적으로 알 수 있다
- css만으로 구조를 알 수 있다
SASS,SCSS와 사용하기 편하다- 선택자 특이성(≒구체성,선택자 우선순위 규칙)을 낮은 수준으로 유지할 수 있다
- 높은 재사용성
- 대규모 CSS를 효율적으로 관리할 수 있다
📌 BEM 특징 : 엄격한 의미론
- 의미론적 클래스 선택자 작명 규칙 → 가급적 약어 사용을 피한다
- 다른 형식의 선택자 사용을 제한한다 (더블 대쉬, 더블 언더바 외 다른 형식의 기호 사용을 제한하며, 구분자로 구분하는 1~3개의 설명자 형식 외 다른 형식을 허용하지 않는다)
- 💫 전역에서 유일한 이름을 권장한다
- 낮은 선택자 특성을 유지하도록 한다
- HTML과 CSS 연결이 느슨하므로 개발과 병렬 진행이 가능하다
- HTML에서는 의미만 다루고, 스타일은 CSS에서 처리한다.
HTML과 JS를 동시 개발해야하는 상황이 발생할 수 있다. 그런 상황에서 HTML작성 시 BEM 형식으로 class 네이밍을 했다면 다수의 개발자가 병렬로 JS와 CSS를 개발하는 것이 가능하다. (CSS개발자가 따로 있다면..)
📌 Block | Element | Modifier
Block
- 재사용 가능한 독립적 블록, 가장 바깥쪽 상위요소
- 재사용을 위해 margin 또는 padding을 적용하지 않는다
- 블럭은 블럭을 감쌀 수 있다
Element
- 블록을 구성하는 종속적인 하위요소
- 소속된 블록에 의존적이다
Modifier
- 블록이나 엘리먼트의 변형, 속성을 의미 (모양,상태,동작 등)
- 기능은 같으나 모양 등이 다를 경우 사용한다
📌 BEM 작성하기
- BEM은
Blcok,Element,Modifier세 가지로 구성된다 - Element는 두 개의 언더바, Modifier는 두 개의 대쉬로 구분한다
.block{}
.block__element{}
.block--modifier{}
.block__element--modifier{}- id가 아닌 class에만 사용한다
- 어떻게 보이는지가 아닌 목적에 맞게 네이밍한다. 예를들어 경고메세지를 띄울 경우 yellow 가 아니라 warning 으로 명명한다
- (선택사항) 여러가지 단어 명명법이 있으나, 개인적으로는 카멜케이스가 시각적으로 가장 편하고 좋은것같다. (kebab-case, snake_case, camelCase, PascalCase ...)
📌 예제
- 'ts'라는 가상의 프로젝트를 진행할 경우를 예시로 class 네이밍했다
- SCSS와 함께 사용할 때 시너지가 좋다
- 프로젝트의 최상단에 class="ts"를 적용하여 상속해서 사용하는 것도 경우에 따라 유용한 방법이 될 수 있다
👏🏻 마무리
🐱 : 적응이 덜되어 미숙한 부분이 있으나 그럼에도 스타일 작성은 물론이고, 높은 재사용성이나 구조 파악, SCSS 유지보수 등 효율이 좋다는 것을 알겠다. 여건이 된다면 실제 프로젝트에도 BEM을 사용해서 개발 해보고싶고 그 프로젝트가 실서버까지 반영되면 좋겠다.
참고:
http://getbem.com/naming/
https://naradesign.github.io/bem-by-example.html
Markup Developer 💫