CSS BEM 방법론

CSS 구조를 개선시키기 위한 CSS 개발 방법론은 여러가지가 있다. OOCSS, SMACSS, BEM 등이 있으며 BEM은 Block Element Modifier의 약자이다. BEM 방법론은 ID에는 사용할 수 없고, 오직 클래스명에만 활용할 수 있다. 필요하다면 클래스명은 BEM 방식의 이름을 여러번 반복하여 재사용할 수 있도록 한다.

Block (전체를 감싸고 있는 블럭 요소)

블럭(Block)은 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 말한다. 블럭 요소는 클래스의 어근을 형성하고 항상 맨 앞에 위치하도록 한다. 일단 블럭을 정의하고 블럭이 형성한 클래스의 어근을 맨 앞에 붙여 그 블럭이 포함하는 요소들의 클래스명을 지으면 된다.

Element

요소(Element)는 블럭이 포함하고 있는 조각 하나이다. 블럭은 전체를 말하고, 요소들은 그 조각들을 일컫는다. 각 요소는 두 개의 밑줄표시(underscore)로 연결하여 블럭 다음에 위치 시킨다. 두개의 밑줄 표시는 시각적으로 쉽고 빠르게 코드를 찾고 조작할 수 있도록 도와준다. 스타일시트와 HTML 역시 DRY(don’t repeat yourself)로 유지되어야 하기 때문에 클래스명은 간단하고 명확하며 정확하게 유지한다라는 것으로 너무 고민하지 않도록 한다.

.block__element {property:value;}

modifiers

modifier은 블럭 또는 요소의 속성이다. 이 속성은 블럭 또는 요소의 외관이나 상태를 변화 시킨다. 클래스명을 지을 때의 목적은 해당 요소를 반복하여 재사용할 수 있게 하기 위함이다. 요소의 스타일이 같다면 사이트의 다른 영역이라고 할지라도 새로운 클래스를 정의할 필요가 없다. 특정 요소의 스타일을 수정할 필요가 있다면 modifier을 활용하면 된다. 요소 또는 블럭 다음에 두개의 하이픈(--)을 추가하여 modifier을 표시 한다.

.block--modifier {…}
.blcok__element--modifier {…}

모든 이름은 간단명료해야 하며 절대적으로 필요하지 않는 이상 추가적인 클래스를 만들거나 똑같은 스타일을 반복해서는 안 된다.

요점

• HTML 마크업 모듈화
• block요소를 독립적이고, 재사용 가능한 모듈이라는 개념으로 접근
• prefix 붙여 일종의 네임스페이스개념으로 사용
• 실제 서비스를 하면 HTML의 구조가 바뀌는 일이 다반사
• 탐색레벨은 낮고 단순하게 유지하는 것이 유지보수하기 좋음
• 쿼리를 단순하게 하기 위해 길고 유니크한 클래스명을 사용하는 것이 좋음

장점

• class name 중복을 방지한다.
• 직관적이다.
• 전제 DOM tree 구조를 다시 볼 필요가 없다.
• 가독성이 좋고 어느 속성을 어느 위치에 넣을 것인지 고민할 필요가 없어진다.
• diff할 때 가독성이 뛰어나다.
• 빌드시에 minify하는 전략에 효과적이다.

---

REFERENCE
https://webclub.tistory.com/263