BEM이란 무엇인가

송송·2020년 8월 7일

Study

목록 보기

3/3

Block, Element and Modifier

참고자료

https://en.bem.info/methodology/key-concepts/
https://naradesign.github.io/article/bem-by-example.html
https://nykim.work/15

BEM이란?

CSS 제작 방법론으로, 일종의 네이밍 컨벤션이라고 볼 수 있다.
html 요소들을 각각 Block, Element, Modifier이렇게 세 가지로 분류해 작명한다. 각각의 BEM은 각자의 역할이 따로 있으므로 역할에 알맞은 클래스를 붙이는 게 관건이다.

Block

독립적으로 존재하고 재사용 가능한 요소를 block으로 명명

태그 값, id 사용x 클래스로 정의
position, margin 등의 위치값을 지정하지 않음 (어디든지 재사용해야하니까!)
색상이나 크기 등을 묘사하는 이름x 구조적으로 의미 있는 이름으로 짓기

Element

블록 내부에 종속되어 실제 기능을 담당하는 것
종속의 의미를 block-name__element-name로 나타낸다.

독립적으로 존재x 블록 내부에서 기능을 담당하는 요소

Modifier

(간단하게 말하자면) block이나 element의 속성
block-name--modifier-name, block-name__element-name--modifier-name의 형태

ex) .search-form__button--size_s, .search-form__button--primary

섞어쓰기

역할에 맞는 선택자 사용

<!-- `header` block -->
<div class="header">
    <!--
        The `search-form` block is mixed with the `search-form` element
        from the `header` block
    -->
    <div class="search-form header__search-form"></div>
</div>

위의 예제에서 B는 클래스에 __나 --가 없는 놈들, 바로header와 search-form 두 개다. 각각의 B는 여기 저기 재사용해야하기 때문에 header와 search-form에 마진이나 위치값을 주는 건 불가능하다!

그럼 여기서 header안의 search-form위치를 지정하려면 어떻게 해야할까?
예제에서는 search-form에 header__search-form라는 클래스를 추가하여 해결했다. search-form자체는 독립적으로 사용할 수 있는 B이지만, 동시에 header 안의 E로도 볼 수 있다는 얘기다.

따라서 css를 작성할 때에 하나의 div에 역할에 알맞게 일부러 2개의 클래스 search-form과 header__search-form를 굳~이 나누어 쓴 거라고 보면 된다.

.search-form {
	/*block에 알맞은 css 정의*/
}

.header__search-form {
	/*header안에 위치한 element로서 알맞은 css 정의*/
    margin:0 auto;
    positon:absolute;
    top:0;
    left:0;
}

클래스마다 각각의 역할이 부여되어 있어 같은 태그를 클래스마다 따로 나눠서 쓰는 점이 너무 신박함😭

중첩

연습용으로 한 번 작성해보았다.
~~원래 네비게이션 표현하려다가 썸네일로 바꾸는 바람에 헤더로 작업한 부분은 넘어가자 🙄~~

thumb__category와 thumb__title는 thumb__txt의 자식태그이다.
이전같았다면 분명 css선택자를 a.thumb .thumb__txt p.thumb__category 따위로 길게 작성했을텐데(클래스 이름이 길어서 더 길어보이네) 사실 카테고리 텍스트와 기사 제목 부분이 thumb__txt에 종속될 이유는 하등 없는 부분. 실제적인 블록 요소에 종속시켜서 css 중첩이 줄어들고 코드가 훨씬 간결해졌다.

느낀 점

이전까지의 코딩은 사실 보이는 순서대로 하나씩 스타일을 지정했었다. 따라서 같은 요소가 또다시 사용될 때면 위치가 다르다는 문제로 살짝 수정하고 기존 스타일을 그대로 복사하거나 그 위에 덮어씌우는 경우가 너무 많았다. 그래서 종종 부분을 수정하기 위해 여기저기 다 들쑤시고 다녀야하는 문제가 있었는데, BEM도입을 통해 클래스 이름을 지정할 때부터 구조를 한 번 더 고려하고 작업하게 되니 그런 문제가 줄어들고 코드 자체가 간결해졌다.

또한 뭣도 모르고 다른 사이트들 보면서 나도 모르게 중첩을 너무 남발했었는데,~~(굳이 이전 코드를 보여드릴 필요는 없겠쬬😂)~~ 그러다보면 코드 길이가 너무 길어져 재사용도 어렵고 복잡해지곤 했었다. 그 부분도 훨씬 깔끔하게 정리되니 매우 기분이 좋다 😋
깔끔해진 코드를 보며 호들갑을 떨어보기로 한다 ㅎㅇㅎㅇ