BEM

• B (Block) : 재사용 할 수 있는 요소 ex) nav

• E (Element) : block을 구성하는 단위로 자신이 속한 block 내에서만 의미를 가지기 때문에 의존적이며 재사용 불가 ex) header__logo

• M (Modifier) : Block이나 Element의 속성 담당 (boolean, key-value)

• id는 사용 xx, 클래스만 사용 가능

• 소문자와 숫자만 사용하며 여러 단어는 하이폰(-)으로 구분한다

• -- (Modifier)와 __ (element)로 구분

아래 코드들을 보며 이해를 해보자

😄 code 1. BEM의 기본

/* HTML */
<div class="popUp"></div>
<div class="abcde"></div>
/* CSS */
.popUp {
	width: 200px;
    height: 200px;
    background-color: red;
}

.abcde {
	width: 200px;
    height: 200px;
    background-color: red;
}

• 위의 CSS 코드중 첫번째와 두번째 코드의 다른점은 클래스 이름뿐 나머지는 전부 동일하다. 그런데 만약 팝업창의 스타일을 바꾸는거라면?
  어떤 클래스명을 사용하는 것이 눈에 잘 들어오는가? 당연히 클래스명이 popUp인 것이 눈에 더 잘 들어오지 않는가?

  BEM의 기본은 클래스명을 어떤 목적인가에 따라 짓는 것이 중요하다

😄 code 2. block, element

/* HTML */
<div class="popUp">
	<input class="popUp__btn">
    <span class="popUp__name"></span>
</div>

위의 코드에서 .popUp은 block이다. 즉 떼어내서 다른 곳에 붙일 수 있는 재사용이 가능하다
.popUp__btn과 .popUp__name은 element이다. popUp 내부에만 존재하는 의존적인 요소이다 (재사용 불가)

😄 code 3. BEM 잘못된 예시

/* HTML */
<div class="popUp">
	<div class="popUp__content">
    	<input class="popUp__content__btn">
		<span class="popUp__content__name"></span>
</div>

제일 많이 실수하는 것이 위의 코드처럼 BEM을 작성하는 것이다
BEM의 가장 큰 특징은 중첩이 가능하기 때문에
.block > .block__element > .block__element2일 때
.block__element2를 .block__element의 하위요소로 보지 않고 둘 다 똑같이 .block의 하위요소로 취급한다
즉 위의 코드가 틀렸다고 할 수는 없지만 BEM 답게 작성할려면 아래 코드처럼 작성해야 한다

/* HTML */
<div class="popUp">
	<div class="popUp__content">
    	<input class="popUp__btn">
		<span class="popUp__name"></span>
</div>

대충 봐도 첫번째 코드보다 훨씬 깔끔하고 직관적이다.
위의 코드처럼 .popUp__content나 popUp__btn이나 popUp__name이나 전부 동일하게 popUp의 하위 요소로 취급하기 때문에 위와 같이 작성하는 것이 좋다

😄 code 4. Modifier

/* HTML */
<ul class="nav">
	/* boolean 타입 */
	<li class="nav__item--focused">1</li>
    /* key-value 타입 */
    <li class="nav__item--color-grey">2</li>
</ul>

boolean 타입 : 기본적으로 true라고 가정하고 동일한 아이템인데 상황에 따라 다르게 스타일링 하고 싶을 때 사용한다

key-vaule 타입 : key-value를 지정하여 특정 아이템 스타일링에 사용한다

BEM의 장점은
1. 유지보수 용이

2. 재사용성

3. 직관적인 네이밍

개인적으로 생각하는 가장 큰 장점은 클래스명만으로 마크업 구조를 알 수 있다는 것이다. 개인적인 첫 프로젝트에서 클래스명을 마구잡이로 작성했더니 나중에 CSS 수정할 때 HTML까지 수정해야하는 대참사가 ...... 발생한 뒤로는 최대한 BEM 원칙대로 작성하고 있다🤣
(사실 CSS 전처리기 이용하면 문제 없음 ㅋ)

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍