[convention] BEM 패턴

BEM 패턴이란?

웹 개발에 대한 구성 요소 기반 접근 방식입니다. Block, Element, Modify로 나누며 이를 통해서 CSS를 쉽게 재사용하고 체계적인 관리가 가능합니다.

실제 코드 작성 시 Block__Element—Modifier의 형태를 사용합니다.

(만약, 이름의 띄어쓰기가 들어가거나 길어질 시에는 -를 하나만 사용하여 구분합니다.)

ex). card, card__image, card—yellow, card__title—large, card__title-image—red

 

실제 예시코드

<button class="button">
	Normal button
</button>
<button class="button button--state-success">
	Success button
</button>
<button class="button button--state-danger">
	Danger button
</button>

.button {
	display: inline-block;
	border-radius: 3px;
	padding: 7px 12px;
	border: 1px solid #D5D5D5;
	background-image: linear-gradient(#EEE, #DDD);
	font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
	color: #FFF;
	background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
	border-color: #4A993E;
}
.button--state-danger {
	color: #900;
}

• className을 이용하여 재사용성이 편합니다.
• button > button—state 라는 네이밍을 통하여 계층 구조를 쉽게 파악이 가능합니다.
• modify를 이용하여 기존의 공통 css를 살리면서 컴포넌트만의 css로 수정 및 추가가 가능합니다

 

적용 후기

해당 컨벤션을 사용하고 나서, 더 체계화되고 가독성이 좋아진 게 확인된다.

또한, styled-component로 중복 처리하는 것보다 className을 붙이는 게더 깔끔해지는 부분이 좋았다.

하지만, 억지로 네이밍을 부여하여 계층화 하려는 시도에서 스트레스가 생기기도 했고, 네이밍 짓는 게 어려워서 스트레스를 받기도 했다.

 

조금 다른 이야기지만, styled-component처럼 변수를 넘기지 못하니 그 부분이 상당히 귀찮아지는 단점이 있었어서 둘을 혼합해서 사용하는 방식을 지금은 채택중이다.

이렇게 하면 컴포넌트 + className을 이용하여 좀 더 깔끔한 관리가 되어서 가독성은 제일 좋은 것 같다. 일단, 현재까지는 굉장히 만족스럽게 사용중이다.

기회가 된다면 이에 대해서도 추후에 서술해보겠다.

 

참고자료

• ssafy-tech-blog : https://github.com/ssafy-tech-concert/ssafy-tech-concert/blob/master/Front-end/BEM.md
• bem 공식문서 : https://en.bem.info/methodology/quick-start/
• bem 소개문서 : https://getbem.com/