CSS_BEM 명명기법

▶BEM 이란?

 

CSS를 작성할 때 좀 더 효율적이고 유지보수고 쉽도록 해주는 일종의 규칙이다. 

B (Block) E (Element) M(Modifier)으로 구조를 나누어서 class 이름을 작명하는것으로 이 규칙을 적용하면 모듈화가 편해 코드의 재사용성이 올라간다.

▶BEM 주의사항

 

ID에는 사용할 수 없고 오직 클래스명에서만 활용할 수 있다.

 

▶A -- B

btn--success, btn--error 등 B는 A의 상태를 의미한다. 

 

▶A __B

item__name, contents__menu 등 B가 A에 속해있음을 뜻한다. 이를 통해 CSS에서 굳이 HTML로 가지않아도 class명을 통해 해당 name은 item의 해당 menu는 contents의 것임을 직관적으로 알 수 있다.