BEM방법론

등장배경

웹 어플리케이션이 점점 더 방대해지는 패러다임속에서 살아가면서 코드의 양도 동시에 많아지고 있다. 이로 인해 작성하는 코드들에 대한 정리가 필요해졌고, 클린 코드라는 용어가 나올정도로 코드의 가독성은 개발자들 사이에 중요한 요소로 자리잡게 되었다. 코드가 읽기 쉬워지면 더 효율적으로 일을 하는데 도움이 되고, 개발자끼리의 코드 해석 또한 빠르게 공유할 수 있는 전제를 만들어 내기 때문에, 여러가지 방법론들이 등장하게 되었다. 

- html 태그 -

- style 태그 -

BEM(Block Element Modifier)

CSS 구조를 개선시키기 위한 CSS 개발 방법론 중에 하나인 방법론이다. 이는 문제의 요소에 대한 근거하는 클래스의 이름을 짓는데 구조적인 방법을 제시하는데, 오직 클래스명에만 활용할 수 있다는 점을 명심해야 한다. 

클래스 명은 BEM방식의 이름을 여러번 반복하여 재사용할 수 있도록 허락하며, HTML과 CSS/SASS 파일에서도 더 일관된 코딩 구조를 만든다. 

 

BEM은 Block Element Modifier의 약자이다. 먼저 BEM에서 의미하는 Block에 대해서 알아보자. 

 

1. Block 

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

- 블럭은 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 말한다. 

- 블럭 요소는 클래스의 어근을 형성하고 항상 맨 앞에 위치하도록 한다. ( class="nav", class="header" 등등)

- 블럭이 형성한 클래스의 어긍을 맨 앞에 위치한 후 블럭이 포함하는 요소들의 클래스명을 지으면 된다. 

 

2. Element

블럭이 포함하고 있는 한 조각

- html 태그 -

- style 태그 -

- 블럭은 전체를 말하고 요소들은 그 조각들을 일컫는다. 

- 각 요소들을 정의할 때 두개의 밑줄표시로 연결하여 블럭 다음에 위치시킨다. 

- 두개의 밑줄표시는 시각적으로 쉽게 그리고 빨리 코드를 찾고 조작할 수 있도록 도와준다. 

- 클래스 명은 간단하고 명확하게 유지해야 한다는 것이 중점이 되야한다. 

 

3. Modifiers

블록 또는 요소의 속성, 여기서 속성이란 블록 또는 요소의 외관이나 상태를 변화가능한 부분이다.

- 특정 요소의 기능들의 스타일을 수정할 필요가 있을 때 정의한다. 

- 이렇게 하기 위해서는 요소 또는 블럭 다음에 두개의 하이픈('--")을 추가하여 modifier을 표시한다. 

- 반복되는 클래스를 만들거나 똑같은 스타일을 반복해서는 안된다. 

ex) 만약 네비게이션에 서브 네비게이션을 사용한다면, 레이아웃과 여백은 같으나, 적용되는 색상이 다를 수 있다. 이 때 반복되는 클래스를 만들지 않고, Sass의 @extend를 활용하거나 상속을 받을 수 있도록 구조를 짜주어야 한다. 

 

 

4. 결론

- Block(전체를 감싸고 있는 블록요소)__element(내부요소)--modifier(기능)

- 클래스명은 구체적이고, 명료하며 HTML 안에서도 읽기 쉬어야 하고, 클래스 명이 무엇을 나타내는지 분명하게 전달 되어야 한다. 

- 클래스명은 각 html 태그에 오직 클래스명을 하나만 사용해야 한다. 

- 클래스만을 활용하여 구조화하는 방법이다. 

- 반복되는 클래스를 만들거나 똑같은 스타일을 반복해서는 안된다. 

 

---