https://nykim.work/15

❗ 핵심은 Block, Element, Modifier의 세가지 구분으로 네이밍을 하는 것임.

• 기본적으로 id 어트리뷰트를 사용하지 않고, 오직 class만 사용한다.
• 어떻게 보이는가가 아니라 어떤 목적인가를 중심으로 네이밍을 한다.
• 이름을 연결할때는 - 하이픈 하나만 써서 연결한다.

Block

위 페이지에선 HTML / CSS의 block을 다음과 같이 정의한다.

• 재사용 가능한, 기능적으로 독립적인 페이지 컴포넌트
• 블럭은 중첩이 가능하다.
• 블럭을 구분할때는 - 을 이용한다.

Element

• 블럭을 구성하고 있는, 또 다른 단위이다.
• 블럭은 독립적이라서 재사용가능하지만, 엘리먼트는 블럭에 의존한다.
• __ 을 이용해 구분한다.

<form class="search-form">     <input class="search-form__input"/>     <button class="search-form__button">Search</button> </form>

위 예제에서 .serch-form은 블럭이지만, .search-form__input과 .search-from__button은 엘리멘트이다.

• 엘리먼트도 중첩이 가능하다.