BEM(Block, Element, Modifier) 방식

CSS 클래스 네이밍 규칙으로 Block(블록), Element(요소), Modifier(수정자)를 기준으로

어떤 "목적인가"에 따라서 이름을 짓는다.

 

<div class="block block--big block--red">
 <span class="block__element"></span>
</div>

다음과 같이 HTML 코드가 있을 때,

block class를 block,

black_element를 element,

block--big, block--red를 modifier라고 하며,

 

Block은 재사용 가능한 기능적으로 독립된 컴포넌트.

Element는 Block를 구성하는 단위.

Modifier는 Block이나 Element의 속성을 말한다.

 

지금까지는 id와 class를 혼용했는데 언제인가 id 보다는 class를 쓰는 게 더 바람직하다고 본 것도 같고,

한 번 BEM 방식으로 앞으로 코딩을 해보려고 한다.

 

깊게 공부하고 정리하는 것이 아니라 강의를 보면서 그때 그때 기록해두고 싶은 것을 기록하다 보니

다른 공부 블로그에 비하면 처참한 수준이구나 싶다..

그래도 써보려고 한다.