2. BEM

<BEM>

Block Element Modifier

 

 

1. BEM을 사용하는 이유

처음 HTML과 CSS를 작성하다 보면 class 혹은 id를 작성할 때

규칙에 대해 생각하지 않고 사용하여 오류가 나는 경우가 있음.

 

또는,

코딩이 길어질수록 CSS를 작성할 때

id를 작성하였는지 clss를 작성하였는지 헷갈릴 때가 있음.

 

그렇기에 많은 사람들이 적용시킨 규칙이 BEM임.

 

모든 부분을 class를 작성하기로 결정하여 규칙에 따라 작성할 경우

HTML 파일에서 id인지 class인지 확인하지 않아도 됨.

 

조금 더 쉽게 HTML과 CSS를 작성하기 위해서

그리고 동시에 여럿이 작업할 시 헷갈리지 않기 위해서 사용함.

 

 

 

2) BEM의 기본적인 규칙

BEM스타일로 작성하는 기본적인 규칙

 

 

가장 먼저

.btn이라는 버튼이 있고

그 버튼 안에 price 정보가 있는  .btn__price라는 class가 있다는 것을 볼 수 있음.

 

부모가 btn이고 자식 요소에 __를 하여 이름을 적고 btn의 자식요소라는 것을 알려줌.

 

자식은 아니지만  btn을 수정할 수 있는 class는 __가 아닌 --를 적고 이름을 작성함.