등장배경
웹 어플리케이션이 점점 더 방대해지는 패러다임속에서 살아가면서 코드의 양도 동시에 많아지고 있다. 이로 인해 작성하는 코드들에 대한 정리가 필요해졌고, 클린 코드라는 용어가 나올정도로 코드의 가독성은 개발자들 사이에 중요한 요소로 자리잡게 되었다. 코드가 읽기 쉬워지면 더 효율적으로 일을 하는데 도움이 되고, 개발자끼리의 코드 해석 또한 빠르게 공유할 수 있는 전제를 만들어 내기 때문에, 여러가지 방법론들이 등장하게 되었다.
BEM(Block Element Modifier)
CSS 구조를 개선시키기 위한 CSS 개발 방법론 중에 하나인 방법론이다. 이는 문제의 요소에 대한 근거하는 클래스의 이름을 짓는데 구조적인 방법을 제시하는데, 오직 클래스명에만 활용할 수 있다는 점을 명심해야 한다.
클래스 명은 BEM방식의 이름을 여러번 반복하여 재사용할 수 있도록 허락하며, HTML과 CSS/SASS 파일에서도 더 일관된 코딩 구조를 만든다.
BEM은 Block Element Modifier의 약자이다. 먼저 BEM에서 의미하는 Block에 대해서 알아보자.
1. Block
전체를 감싸고 있는 블럭요소
- 블럭은 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 말한다.
- 블럭 요소는 클래스의 어근을 형성하고 항상 맨 앞에 위치하도록 한다. ( class="nav", class="header" 등등)
- 블럭이 형성한 클래스의 어긍을 맨 앞에 위치한 후 블럭이 포함하는 요소들의 클래스명을 지으면 된다.
2. Element
블럭이 포함하고 있는 한 조각
- 블럭은 전체를 말하고 요소들은 그 조각들을 일컫는다.
- 각 요소들을 정의할 때 두개의 밑줄표시로 연결하여 블럭 다음에 위치시킨다.
- 두개의 밑줄표시는 시각적으로 쉽게 그리고 빨리 코드를 찾고 조작할 수 있도록 도와준다.
- 클래스 명은 간단하고 명확하게 유지해야 한다는 것이 중점이 되야한다.
3. Modifiers
블록 또는 요소의 속성, 여기서 속성이란 블록 또는 요소의 외관이나 상태를 변화가능한 부분이다.
- 특정 요소의 기능들의 스타일을 수정할 필요가 있을 때 정의한다.
- 이렇게 하기 위해서는 요소 또는 블럭 다음에 두개의 하이픈('--")을 추가하여 modifier을 표시한다.
- 반복되는 클래스를 만들거나 똑같은 스타일을 반복해서는 안된다.
ex) 만약 네비게이션에 서브 네비게이션을 사용한다면, 레이아웃과 여백은 같으나, 적용되는 색상이 다를 수 있다. 이 때 반복되는 클래스를 만들지 않고, Sass의 @extend를 활용하거나 상속을 받을 수 있도록 구조를 짜주어야 한다.
4. 결론
- Block(전체를 감싸고 있는 블록요소)__element(내부요소)--modifier(기능)
- 클래스명은 구체적이고, 명료하며 HTML 안에서도 읽기 쉬어야 하고, 클래스 명이 무엇을 나타내는지 분명하게 전달 되어야 한다.
- 클래스명은 각 html 태그에 오직 클래스명을 하나만 사용해야 한다.
- 클래스만을 활용하여 구조화하는 방법이다.
- 반복되는 클래스를 만들거나 똑같은 스타일을 반복해서는 안된다.
