[정리] CSS BEM(Block, Element, Modifier)

  얼마 전 수업시간에 선생님을 통해 BEM의 개념을 대락적으로 듣게 되었고 또 개발자 유튜브 영상(프론트 / 엔드 로드맵 관련)을 보던 중 또 다시 언급된 용어...BEM...이것은 어떤 용도로 쓰이고 또 어떤 개념을 가졌는지 한 번 짧은 시간이나마 공부를 해보기로 했습니다.

 

<BEM이란 Block, Element, Modifier의 첫 글자만 가져와 이름 지은 Component 기반의 웹 개발 접근법 중 하나 입니다.

이 방법론은 유저 인터페이스를 독립된 여러 개의 블록으로 분리하자는 것이 목표입니다. 이것은 복잡한 UI를 가진 페이지의 인터페이스 개발 환경을 쉽고 빠르게 하며, Copy and Paste 없이 존재하는 코드의 재활용을 가능하게 합니다.>

 

라고 다른 전문가께서 말씀 하셨습니다. 저는 무슨 말인지는 잘 모르겠는데, 자료를 대략 살펴보니 보기도 편하고 작업도 편한 효율적인 클래스명 짓기!라는 의미로 받아 들였네요. 각 개념을 살펴보면

 

 

일단 BEM의 기본 구조는

Block,  Element,  Modifier를 뜻하며 이 3가지로 구성된 이름을 짓는 방법입니다. 그리고 각각 _ _와 - -로 구분 합니다.

 

위의 코드에서 header는 Block, naviagtion은 Element, navi-text는 Modifier에 해당 됩니다.

 

그리고 세부적인 개념으로 보자면, block(블럭)은 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트(A functionally independent page component that can be reused)로써 즉,  어딘가에 쓰이는게 가능한 단위 정도로 볼 수 있겠고

 

Element(엘리먼트)는 블럭을 구성하는 단위로써 블럭은 독립적인 형태인 반면, 엘리먼트는 의존적인 형태. 자신이 속한 블럭 내에서만 의미를 가지기 때문에 블럭 안에서 떨어져 다른 데 쓰일 수 없습니다.

 

마지막으로 Modifier(모디파이어)는 블럭이나 엘리먼트의 속성을 담당하는데 생긴 게 조금 다르거나, 다르게 동작하는 블럭이나 엘리먼트를 만들 때 사용 합니다.

 

다른 분들께서 정리하신 자료를 참고하여 개념을 한 번 살펴 보았는데요. 솔직히 아직은 확실하게 정리가 안되네요. 직접 사용을 해보면서 개념 정리를 확실하게 해볼 수 있도록 해야겠네요. 그래도 선생님께서 왜 언급 하셨고 또 알려주셨는지는 알 수 있는 부분 이었습니다. 익숙해지고 사용을 잘 한다면 분명 괜찮은 작업 효율을 가져 올 수 있겠다는 생각입니다. 

 

 

자료참고 또는 인용 

blog.theodo.com/2015/10/how-i-stopped-worrying-and-learned-to-love-the-css-with-bem/

velog.io/@yesdoing/BEM-Block-Element-Modifier-Quick-start

nykim.work/15