CSS 방법론 - BEM

BEM의 개념

BEM은 "Block, Element, Modifier"의 약자로, CSS를 구조화하고 모듈화하는 방법론 중 하나이다. 이 방법론은 유지 보수가 쉬운, 확장 가능하며 재사용 가능한 CSS 코드를 작성하는 것을 목표로 한다.

BEM 방법론은 다음과 같이 작동한다.

1. Block: 페이지나 모듈을 구성하는 큰 단위를 나타낸다. 이것은 레이아웃이나 UI 컴포넌트를 나타내는 이름을 가질 수 있다.
2. Element: Block 내부에 있는 작은 단위를 나타낸다. 이것은 블록 내부의 부분적인 요소를 나타내며, 블록 이름을 접두사로 사용하여 작성된다.
3. Modifier: 블록이나 요소의 상태나 모양을 나타낸다. 이것은 블록이나 요소 이름 뒤에 하이픈을 사용하여 작성된다.

예를 들어, 블록으로 'header'를 사용하면 다음과 같이 작성할 수 있다.

<header class="header"></header>

이제 블록 내부에 있는 요소를 나타내기 위해 다음과 같이 작성할 수 있다.

<header class="header">
  <nav class="header__nav"></nav>
  <div class="header__logo"></div>
</header>

마지막으로, 블록이나 요소의 상태나 모양을 나타내기 위해 다음과 같이 작성할 수 있다.

<header class="header header--fixed">
  <nav class="header__nav"></nav>
  <div class="header__logo"></div>
</header> 

여기서 'header--fixed'는 블록이 고정되어 있는 상태를 나타내는 모디파이어이다.

BEM의 장점과 단점은?

BEM의 장점과 단점은 아래와 같이 정리할 수 있다.

장점

1. 구조적이고 읽기 쉬운 코드: BEM은 구조적으로 CSS 코드를 작성하기 때문에 유지 보수 및 업데이트가 용이하다. 또한, 클래스 이름에서 블록, 요소 및 모디파이어를 명확하게 구분하기 때문에 코드를 읽고 이해하는 데 시간이 적게 소요된다.
2. 재사용 가능한 코드: BEM은 블록, 요소 및 모디파이어의 이름을 재사용 가능한 방식으로 작성하므로 코드 재사용성이 높아진다. 이것은 개발자가 유사한 UI 컴포넌트를 만들 때 코드를 재사용하고 수정하기 쉽게 해준다.
3. 스코프 관리: BEM은 모든 클래스 이름에 블록 이름을 포함하므로 스타일이 적용되는 범위가 제한된다. 이것은 스타일 충돌을 방지하고 스코프를 관리하는 데 도움이 된다.

단점

1. 클래스 이름의 길이: BEM 방법론을 사용하면 클래스 이름이 길어질 수 있다. 클래스 이름이 길어지면 코드의 가독성이 떨어지고 CSS 파일의 용량이 커질 수 있다.
2. 학습 곡선: BEM 방법론은 새로운 개념을 도입하기 때문에 학습 곡선이 높을 수 있다. 또한, 개발자가 BEM 방법론을 올바르게 구현하지 않으면 CSS 코드가 더 복잡해질 수 있다.
3. 의존성: BEM 방법론을 사용하면 클래스 이름의 구조가 코드의 구조에 의존한다. 이것은 개발자가 코드의 구조를 변경하려면 클래스 이름도 함께 변경해야 한다는 것을 의미한다.