BEM (Block Element Modifier)이란 CSS 방법론중 하나로 요소에 대한 속성에 근거하는 클래스의 이름을 짓는데 구조적인 방법을 제시하며, 유저 인터페이스를 독립된 여러 개의 블록으로 분리하자는것이 목표이다.
- 재사용, 디버깅, 유지보수를 위하여 CSS 선택자의 이름을 가능한 한 명확하게 만든다.
- 소문자, 숫자만을 이용해서 작명한다.
- 여러단어의 조합은 싱글 하이픈(-)으로 연결하여 작명한다.
- BEM은 오직 class명에만 활용할 수 있다.
- '어떤 목적인가'에 따라 클래스명을 짓는다.예를 들어, 에러 메시지를 띄우는 P 태그에게는
.red
가 아닌,.error
라는 클래스명을 준다.
.header__navigation--navi-text {
color: red;
}
위 코드에서 header는 Block
, naviagtion은 Element
, navi-text는 Modifier
가 된다.
.header__
navigation--navi-text {
color: red;
}
.header__navigation
--navi-text {
color: red;
}
.header__navigation--navi-text
{
color: red;
}
Modifier의
boolean type
&key-value type
- boolean type : 수식어의 값이 true 라고 가정한다.
(ex : form__button — disabled)- key-value type : key, value를 하이픈(-)으로 연결하여 성질 - 내용을 표시한다.
(ex : color-red, theme-ocean)
BEM을 이용해 헤더를 마크업해보자!
<nav id="navBar">
<div class="navbar__logo">
<img src="./imgs/favicon.png" alt="logo" />
<a href="#">Hiko</a>
</div>
<ul class="navBar__menu">
<li class="navBar__menu_item active">Home</li>
<li class="navBar__menu_item">About</li>
<li class="navBar__menu_item">Skills</li>
<li class="navBar__menu_item">My work</li>
<li class="navBar__menu_item">Testimonial</li>
<li class="navBar__menu_item">Contact</li>
</ul>
</nav>
[참고사이트]
BEM: http://getbem.com/introduction/
BEM 101 by CSS-Tricks: https://css-tricks.com/bem-101/