BEM, way to name in CSS
코딩을 할때, 변수 이름을 체계적으로 잘 짓는 것은 코딩과정의 생산성을 높여준다.
BEM(Block Element Modifier)
BEM은 CSS에서 어떻게 하면 class, id name을 체계적으로 잘 지을 수 있는가 하는 고민에서 나온 class 명명 규칙이다.
여기서 class 명명 규칙이라 한정 지은 것은 큰 프로젝트에 있어서 class와 id를 혼용하여 사용하면 나중에 소스코드를 수정하고나 디버깅하는 과정에서 해당 button을 id로 지었는지 class로 지었는지 확인해야 하는 불편함이 있어서 그냥 class 만을 사용한다는 전제를 깔고 만든 규칙이기 때문이다.
따라서, class로 통일하되
- 그 이름안에서 어떤 역할을 하는지 알 수 있고
- name도 specific하게 만들어 겹치지 않게 이름을 지을 수 있도록 고안된 것이 BEM인 것이다.
Block, Element, Modifier
명명법에 대해 알아보기전 block, element, modifier가 무엇인지 살펴보자.
Block
block은 재사용이 가능한, 기능적으로 독립적인 page component를 의미한다.
...
body{
<a href="#">Go to home.<a>
}
...
위 같은 단순한 anchor로 footer와 같은 다른 tag 내부에서 재사용이 가능하므로 block이라고 볼 수 있다.
block = 재사용성, 독립성
명명법
block의 명명은 그냥 class name으로 block name을 정해주면 된다. 예를 들면 아래 코드의 “status-bar”가 block이름이 되는 것이다.
...
<body>
<div class="status-bar">
</div>
</body>
...
Element
element는 블럭을 구성하는 단위로써, block에 의존적이기에 block 내부에서만 의미를 띄고 그 밖에서는 독립적으로 사용될 수 없다.
이 element의 이름은 보통 기능 즉, 이 element가 무엇을 하는가에 맞추어 명명을한다.
...
<body>
<div class="status-bar">
<div class="status-bar__column">
<span>No Service</span>
<!--To Do: Wifi icon-->
<div class = "status-bar__button">
</div>
</div>
</body>
...
여기서 눈여겨 볼 것은 element 안의 element를 명명할때에
"div.status-bar__column__button"
처럼 명명을 한 것이 아닌
"div.status-bar__button"
처럼 명명을 한다는 것이다. 즉 항상 button 다음 해당 element의 이름을 적으면 되는 것이지 부모 element는 명명에 고려하지 않는다.
Modifier
Modifier는 일종의 속성이다. Block, element들에 odifier를 적용함으로써 형태를 바꾸는 것이 그 예이다.
Modifier는 두가지 방식으로 명명이 된다.
- Boolean: 참이라고 생각을 하고 명명
block--focused
-
key-value: 속성과 이 modifier의 값으로 명명. BEM의 class 명명법은 다음과 같다. key와 value는 하이픈(-)으로 구분한다.
block--color-red
댓글남기기