네이밍 컨벤션 BEM
1. Intro
프로젝트의 규모가 조금씩 커지고, 코드가 길어지면서 class명을 짓는데 많은 고민을 하게 됩니다. 적절하게 정의된 코드의 네이밍이 가독성을 높이고 디버깅 시간을 절감시켜주기 때문이죠.
여기서 적절하게 정의된 네이밍이란 다른사람이 보더라도 무슨 목적으로 만들어졌고, 어디에 쓰이는지 쉽게 이해할 수 있는 네이밍입니다.
오늘은 css에서 가장 범용적으로 사용되는 클래스 컨벤션 중 BEM(Block Element Modifier)을 정리해보겠습니다.
BEM의 장점
BEM은 CSS에서 가장 범용적으로 사용되는 방법론으로 작명법의 일관화라는 큰 장점을 가지고 있습니다. 일관된 네이밍으로 다른 사람이 코드를 봐도 코드의 네임이 어떤 목적으로 만들어졌는지를 이해하기가 쉽고 같은 프로젝트 내에서 다른 컴벤션이 적용될 수 있습니다.
BEM의 구성요소
(block - Element - Modifier )의 약자로 각 요소의 특징은 아래와 같습니다.
- Block : 재사용 가능한 컴포넌트의 최상위 단위 (Ex. 버튼 컴포넌트, 모달 컴포넌트 등)
- 기능이나 목적으로 작명하고 시각적 특징으로 상태를 설명하지 않기.
"이것이 무엇으로 보이는지"가 아닌 "이것이 무엇인지"가 목적이어야 함.- 중첩이 가능(block안에 block)
- Element : 블럭의 하위 요소 (Ex. 버튼 내부의 "클릭" 텍스트 등)
- block에 해당하는 자식요소를
__(underscore)를 사용해 표시합니다.(ex) navigation__inner) - 1depth까지 표현하는 것을 권장.( 그 이상의 경우 중첩을 사용)
- block에 해당하는 자식요소를
- Modifier : 컴포넌트의 스타일을 변경할 때 사용할 단위
- 상태 또는 외양으로 속성을 정의.
--또는-를 사용(ex) list--star, button-red)
<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>
0seo