21. Implementing BEM in the Natours Project

 

실전에서 BEM Method 사용법

header block은 독립형 컴포넌트

 

block 컴포넌트의 modifier - 속성을 담당하면 -- 대쉬 두 개를 붙인다

element (요소) __ 
modifier (속성) -- 

 

라고 정리하려 했는데 Q&A 게시판을 보니 강사가 설명한 BEM에 대한 토론이 근 3년 간 열 띠었던 것으로 보인다....!

https://www.youtube.com/watch?v=7necWMY4qtU 

유투브 강의로 보충을 해본다

 

Block이란 독립적으로 사용될 수 있는 부분

Element는 메뉴 바의 내부를 보면 독립적으로 쓰인다고 보기 애매하기 때문에 element라고 정리한다

버튼 > 자주 쓰이는 버튼이라면 block 일 수 있지만, 그렇지 않으면 element로 취급

__ 언더스코어가 두 번 쓰이면 다른 block에 종속되어 있다고 보면 된다

 

그래서 block의 경우에는 css 를 짤 때 

/* btn 의 block인경우, 즉 독립적인 경우에는 아래와 같이 사용한다 */
.btn { }

/* btn이 element인 경우에도 하나만 사용한다 굳이 */
.top__btn {

}

.top > .top__btn {
	/* 이렇게 사용할 필요가 없다, 구체화되어 있기 때문에 */
}