CSS 방법론 BEM

예전에 코딩에 대해 아무것도 모르던 시절, 지금도 모른다는 게 함정

카멜표기법과 파스칼표기법에 대해 듣고서 '우와' 했었다.

그리고 이후부터는 카멜표기법을 사용했었다.

 

BEM이 필요한 이유

그런데 여러 페이지를 코딩해보면서 자꾸 중복되는 듯 서로 다른 클래스로 인해 '클래스명 짓기 너무 힘들다'라는 생각이 들 때 쯤, 검색을 통해 CSS 방법론과 그중 하나인 BEM에 대해 알게 되었다.

진짜 얼마나 모르고 맨땅에 헤딩을 하고 있었는지...

 

BEM이란?

Block(블록)-Element(요소)-Modifier(변경자)의 줄임말. 이 세 가지를 이용해 클래스명을 짓는다.

• 블록(Block): 재사용할 수 있는 독립적인 가장 바깥쪽 덩어리. 예를 들면 검색창 블록.
• 요소(Element): 블록을 구성하는 하위 성분. 예를 들면 검색창 블록의 input과 button 등.
• 변경자(Modifier): 변형을 주는 경우에 사용. 예를 들면 검색창 블록의 button_sm 등.

 

BEM의 형태

.block__element--modifier

 

BEM의 주의사항

• 클래스에만 사용한다. id에는 사용하지 않는다.
• 블록과 요소는 형태(red, small 등)가 아닌 목적(menu, button)을 기반으로 작명한다.
• 블록은 환경에 영향을 받지 않아야 한다. 여백, 위치 등은 설정하지 않고 mt, bt 등 추가 클래스를 준다.
• 블록과 요소는 중첩해서 사용할 수 있다.
• 블록 안에 요소가 없어도 상관 없다.
• 단, 요소는 항상 블록의 일부여야 한다. 잘못된 예) .블록__요소1__요소2 

 

나중에 시간 많을 때 예제까지 정리해야지.