CSS 이름 짓기 힘들어 ? BEM 이름짓기방법

<header class="header">
    <nav class="header-nav">
        <div class="header-nav__button">

        </div>
    </nav>
</header>

이글을 쓰는 시점이 css  이름을 짓는 BEM명명법 이란것을 알게되어 적습니다.

 

개발을 하시는 모든분들이라면 가장 시간이 많이 소요되는 변수명 짓기 같은것을 쉽게 하기 위함 입니다.

 

제 블로그에선 최대한 쉽게 설명하기위해 영어 한자를 무분별하게 사용하지않습니다

 

BEM 이름 짓기 방법

B:  Bolck

E:  Element

M: modifier

 

순서로 이름을 짓는것입니다.  예나 지금 이나 저는 영어로 써있으면 한국인이라 이해가 빠르지 않음으로

block이 뭐고 Element가 뭐고 Modifier가 뭔지 적는 그런식에 설명은 하지않습니다

 

 

 

BLOCK 큰  범위

Element 중간 범위

Modifier 작은 범위

 

예를들어 

<header>
    <nav>
        <div>

        </div>
    </nav>
</header>

라는 코드가있다면 

가장큰 범위인 "Header"   중간범위 "nav"  작은범위 "div"  순으로구분하면된다

 

<header class="header">
    <nav class="header-nav">
        <div class="header-nav__button">

        </div>
    </nav>
</header>

이렇게 설정해주면된다 .

 

이규칙에서 특이한점은 가장 하위단계인 Modifier를 수정할적에는 __ 언더바2개를 사용합니다.

저부분을 수정자라고하며 수정자의 이름을 지을때에는 언더바__두개를 사용 합니다.