Written by JJoo
on 

css 방법론 - BEM 방법론

css 방법론의 필요성

프로젝트의 규모가 커지면서 다수의 작업자들이 많은 컴포넌트를 작업하는 일이 많아지면 css를 작성함에 있어서 혼란이 생기기 시작한다.

각자가 자신만의 설계 방법을 가지고 한 프로젝트를 개발해 가다보면 css명이 불규칙하게 비대해져가고, 다른 작업자가 구조를 파악하는 시간에 많은 시간을 소요해가고 에너지를 소요하게 된다.

이럴 때 일관성있는 규칙을 유지하게 하는 css 방법론은 아래와 같은 장점을 가지게 된다.

방법론마다 장단점이 있다.

css 방법론 중 대표적인 방법론 중 하나인 BEM 방법론에 대해서 알아보자.

BEM 방법론

BEM 방법론이란?

BEM은 Block Element Modifier 의 약자이다.

말 그대로 [블록]-[엘리먼트]-[속성/상태/기능]으로 구분지어 이름을 짓는다.

제일 큰 특징으로 block과 element는 __ 로 구분 짓고 마지막 modifier는 –으로 구분지어 컴포넌트와 기능을 구분지어 준다.

block과 element의 이름이 길어지는 경우 -으로 이어서 구분지어 연결한다.

block__element--modifier

ex.

header__search-form

search-form__input

search-form__button–hover

search-form__button–active

tab__item-01

Block

element를 감싸고 있는 큰 주머니로 생각하면 된다.

html tag의 article과 비슷하다고 생각해도 될 것 같다.

기능적으로도 독립되어 있는, 어디에 붙여도 문제가 없는 재사용이 가능한 컴포넌트를 block이라고 본다.

예를 들어 header, logo, footer, content, search bar, menu, login form 등등 을 block이라고 볼 수 있다.

header와 logo가 왜 따로 블록으로 보는 지 헷갈릴 수 있는 데 logo는 header에도, footer에도 login form 위에도 들어갈 수 있는 독립적인 컴포넌트라서 하나의 block으로 보는 것 같다.

작은 블록을 모아 큰 블록이 될 수 있다.

ex. logo + search bar + login form + menu(gnb) = header

Element

element는 블록을 구성하는 컴포넌트로 독립적으로 움직일 수 있는 block과는 다르게 의존적인 형태이다.

보통 block안에 속해서 움직인다. (block에 의존적)

ex.

search-form__input

search-form__button

nav__list-01

nav__list

Modifier

block과 element의 속성이다.

보통 어떤 동작별 상태나 외관의 변경을 표시하여 보여준다.

ex.

nav__list–focus

login-form__button–hover

위 예시의 –focus, –hover 는 boolean type으로, 붙으면 그 값이 true라고 가정하고 사용한다.

boolean type 말고도 key-value type이 있다.

성질-내용으로 구성되며 -으로 구분지어 연결한다.

ex.

title–color-gray

login-form–theme-dark

위 예시에서 –color-gray, –theme-dark 가 key-value 타입이다.

보통 color-gray가 아닌 gray, theme-dark가 아닌 dark 방식으로 사용했었기에 key-value type의 효율성은 잘 와닿지 않으나 알아두면 좋을 듯 싶다.

bem 방법론에 대해서는 알고 있었으나 bem과 smacss 방식의 장점을 따와 내부 규칙을 만들어 사용했기에 제대로 다뤄본 적이 없었는 데 이번에 디자인 시스템을 구축하면서 디자인 토큰 + scss를 사용하게 되었고 bem 방법론을 활용해서 개발하면 좋을 것 같아 다시금 스터디를 해보았다.

referance

Discussion and feedback