BEM 방법론

본격적으로 와이어 프레임을 구현하기에 앞서 CSS 클래스의 네이밍 컨벤션이 필요하다고 팀의 의견이 모였습니다. Airbnb CSS Style Guide에서는 다음과 같은 이유로 BEM 사용을 권장합니다.

• HTML과 CSS의 명확한 관계를 드러냅니다.
• 재사용 가능한 컴포넌트를 만듭니다.
• 확장성 있는 스타일시트를 만듭니다.
• Nesting을 줄여줍니다.

본 프로젝트에서 재사용이 필요한 요소가 많지는 않았지만, 현업에서 주로 쓰이는 방법론을 적용해보고 그 장단점을 느껴보는 것에 의미를 두었습니다.

BEM이란?

BEM은 컴포넌트 기반의 접근법으로서, UI를 여러 개의 독립적인 블록을 나누는 개념입니다. HTML과 CSS 사이의 관계를 더 잘 나타내고, 코드의 재사용성, 유지 보수성을 높여줍니다.

1. Block

• 독립적인 페이지 구성 요소
• group-info-title

2. Element

• Block의 부분으로서 Block 안에서만 사용되는 요소
• name, mmbr, back-btn

3. Modifier

• Block이나 Element의 외형이나 동작을 바꾸기 위해 사용되는 요소

• unauth, auth

관련 논의

모든 HTML 요소에 클래스를 만들어야 할까요?

공식 포럼을 보면 적용할 스타일이 있을 때 클래스를 만들면 된다는 답변이 있습니다.

하나의 HTML 요소에 여러 클래스를 적용해도 될까요?

공식 문서에 하나의 DOM node에 여러 BEM 개체를 적용하는 방법이 나와있습니다. 이러한 방식을 'Mix'라고 하는데, 코드를 복사할 필요 없이 여러 BEM 개체의 스타일과 동작을 결합할 수 있고, 의미상 새로운 UI 컴포넌트에 코드를 재사용할 수 있습니다.

Element에 Nesting을 적용해도 될까요?

공식 문서를 보면 Element의 Element 구조는 Block의 내부 구조를 변경할 수 없게 한다고 설명합니다. 코드 변경 없이 Element를 추가, 교체, 삭제하기 위해서 Element에 Nesting을 적용하지 않습니다.

보완점

BEM을 적용하면서 네이밍을 통일했다는 점 이외의 큰 효용성을 못 느낀 몇 가지 이유가 있습니다.

• 본 프로젝트에 스타일이 재사용될 만한 요소가 많지 않았습니다.
• 본 프로젝트의 파일구조를 컴포넌트 단위가 아닌 페이지 단위로 나눴습니다.
• 클래스명이 길어짐에도 CSS 전처리기를 사용하지 않았기 때문에 부모참조자(&)로 가독성을 높일 수 없었습니다.