CSS 구조 - BEM 방법론

CSS 주요 방법론 3가지

 주요 CSS 방법론에는 아래와 같은 3가지가 있다. 방법론은 절대적인 규칙이 아니기 때문에 작성자 또는 프로젝트에 따라 컨벤션을 정해서 사용하면 된다. 프론트엔드 로드맵에서는 BEM을 제외한 나머지 방법론은 추천하지 않는다고 했으니, 나는 우선 BEM 방법론을 따르려고 한다.

• BEM (Block Element Modifier)
• OOCSS (Object Oriented CSS)
• SMACSS (Scalable and Modular Architecture for CSS)

 

 

BEM이란?

BEM은 Block, Element, Modifier를 모아 앞글자만 따서 만든 이름의 CSS 방법론 중 하나로, 일종의 네이밍 컨벤션이라고 볼 수 있다. HTML 요소들을 각각 Block, Element, Modifier로 분류해서 작명하는 것이다. 이를 통해 복잡한 UI에서도 쉽고 빠르게 인터페이스를 개발할 수 있으며, 복사 및 붙여 넣기 없이 기존 코드를 재사용할  수 있다.

 

block__element--modifier
블록__요소--속성

 

1. 블록 (Block) - 전체를 감싸고 있는 블록 요소

블록은 재사용할 수 있는, 기능적으로 독립적인 페이지 구성 요소다. 즉, 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 말한다. 페이지에 header, footer, sidebar, main 콘텐츠 영역이 있다면, 이것 들이 모두 블록인 것이다. HTML에서 class 속성으로 표시된다. 

 

네이밍 방법은 다음과 같다

• Block의 naming은 라틴 문자, 숫자, - (dash)로 구성된다.
• css 클래스를 생성하려면 클래스 앞에 짧은 접두어 .(dot)을 붙여서 사용한다. (예: .block)

1-1 네이밍 방법 - HTML

• DOM 노드에 클래스 이름을 넣어서 블록 이름을 지을 수 있다.

<div class="block"></div>

 

1-2 네이밍 방법 - CSS

• class명이나 selector만 쓸 수 있다.
• 태그명이나 id를 사용하지 않는다.
• 한 페이지에서 다른 block이나 element에 의존하지 않는다.

 

2.  요소 (Element) - Block이 포함하고 있는 한 조각

요소는 블록을 구성하는 한 요소 단위다. 요소는 블록의 자식 개념이기 때문에 블록에 의존적인 형태다. 

 

네이밍 방법은 다음과 같다.

• Block과 마찬가지로 라틴문자, 숫자, - (dash)로 구성되며 _ (underscore) 다음에 온다.
• css 클래스에서는 두 개의 underscore를 요소 이름 앞에 붙인다. (예: .block__element)

2-1 네이밍 방법 - HTML

<div class="block">
    <div class= "block__element1"> 
        <div class="block__element2"> 
            <div class="block__element3"></div> 
        </div> 
    </div> 
</div>

 

2-2 네이밍 방법 - CSS

• class명이나 selector만 쓸 수 있다.
• 태그명이나 id를 사용하지 않는다.
• 한 페이지에서 다른 block이나 element에 의존하지 않는다.

.header__logo {...}
.header__menu {...}
.header__icon {...}

 

3. 속성 (Modifiers) - 블록 또는 요소의 속성

블록 또는 요소의 외관이나 상태를 변경할 때 사용된다. 특정 요소의 스타일을 수정할 때 이 속성(modifier)만 활용하면 된다. 두 개의 - (dash)를 사용하여 이름을 붙이면 된다.

 

네이밍 방법은 다음과 같다.

• 라틴문자, 숫자, - (dash), _ (underscore)로 구성된다.
• css 클래스에서는 블록이나 요소의 이름 다음에 두 개의 underscore를 붙여 사용한다. (예: .block__element--modifier)

3-1 네이밍 방법 - HTML

modifier를 추가할 때는 원래의 클래스들을 그대로 둔 채, 수정된 블록/요소들만 추가한다.

<!-- 좋은 예 -->
<div class = "block block--modifier"></div>
<div class = "block block--modifier-red block--modifier-big"></div>
 
<!-- 나쁜 예 -->
<div class = "block--modifier"></div>

 

3-2 네이밍 방법 - CSS

modifier class명은 selector를 사용한다.

.block--modifier {...}
.block__element--modifier {...}

 

 

 

BEM의 장단점

장점

• 클래스 이름이 직관적이고 이해하기 쉽다. 따라서 마크업 구조를 쉽게 파악할 수 있다.
• block을 다른 곳에 재사용하기 쉽다
• block 단위의 클래스 명명을 통해 의도치 않은 CSS 상속을 막으며, 클래스명 중복을 방지한다.

 

단점

• 세부 요소로 가게 될수록 이름이 길고 복잡해진다. 때문에 sass(extend)나 less를 쓰는 것이 효율적이다.
• 새롭게 기능이 추가될 경우, 클래스명을 수정하는 것이 불편하다.