CSS에서 클래스 이름 정하는 방법을 명료하게 정리한 것이 바로 BEM이다.
BEM은 블록(Block), 엘리먼트(Element), 모디파이어(Modifier)의 첫 글자를 딴 용어다.
각각 다음과 같이 비유해볼 수 있다.
블록 -> 집
엘리먼트 -> 집__거실
모디파이어 -> 집--호텔
1. 블록(Block)
블록이란 body 태그 안에 있는, 페이지의 가장 큰 범위의 단위다. header나 container 등이 예시가 될 수 있다.
block: high-level construct, header, for example. big container in the page
<body>
<header class="header">
<div class="container"></div>
</header>
<div class="actions">
</div>
</body>위 예시에서는 body 태그 안에 있는 가장 큰 단위인 .header와 .actions가 BEM에서 블록에 해당한다.
2. 엘리먼트(Element)
엘리먼트란 블록 태그를 구성하고 있는 각각의 요소를 의미한다. 예를 들어 헤더에 해당하는 <header class="header">의 하위에는 .title이나, .subtitle 등 제목 또는 부제목이 엘리먼트로 올 수 있다. 블록과 엘리먼트 클래스네임은 __으로 구분한다.
element is a piece of the block, like title, subtitle, etc.
<body>
<header class="header">
<div class="container">
<h1 class="header__title">Notes App</h1>
<h2 class="header__subtitle">Take notes and never forget.</h2>
</div>
</header>
<div class="actions">
<div class="actions__container">
</div>
</div>
</body>.header__title, .header__subtitle처럼 블록 뒤에 __로 구분하여 하위 엘리먼트를 적어준다. 유의할 점은 꼭 header 하위, 타이틀 상위에 다른 컨테이너가 있다고 해서 header__container__title과 같이 적지 않는다. 가장 큰 단위인 .header의 자식 엘리먼트라면 해당 엘리먼트 클래스네임을 바로 붙여준다.
__ signifies that it's an element, followed by an element name.
3. 모디파이어(Modifier)
말 그대로 변형된 버전을 의미한다고 보면 된다. 하나의 클래스가 비슷한 버전으로 다른 곳에 사용되는 경우 --를 붙여 유사한 다른 버전임을 표시한 후 의미에 맞는 단어를 붙여준다.
modifier is another version of container... variations of the container
<body>
<header class="header">
<div class="container">
<h1 class="header__title">Notes App</h1>
<h2 class="header__subtitle">Take notes and never forget.</h2>
</div>
</header>
<div class="actions">
<div class="actions__container actions__container--spaced">
<a href="index.html">Home</a>
<span id="last-edited"></span>
</div>
</div>
</body>.actions__container, .actions__container--spaced 두 개의 클래스가 나란히 있다. 전자는 기존에 설정한 컨테이너고, 후자는 그 컨테이너를 그대로 쓰되 위치만 살짝 바꾼 버전을 사용한다는 의미로 이름붙여졌다.
잘 봤습니다!