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도입을 통해 클래스 이름을 지정할 때부터 구조를 한 번 더 고려하고 작업하게 되니 그런 문제가 줄어들고 코드 자체가 간결해졌다.

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

scss작성에 더욱 용이하다고 하니 같이 공부해볼 예정이다.