[CSS] CSS 방법론 - BEM 방식

 

먼 옛날 퍼블리싱 과외를 받던 시절...

과외 선생님께서 BEM 방식을 추천해 주셔서 그냥 뭐가 뭔지 모르는 상태로 알려주시는대로 썼던 기억이 있다.

최근 다시 포트폴리오를 만들면서 BEM 을 어떤식으로 써야 좋을지 헷갈려서

또, BEM 방식으로 코드를 짜볼 때에도 감이 잘 안 올때가 있어서

내 스스로가 헷갈리지 않기위해 정리를 해보았다!

 

---

BEM 이란?

BEM이란 CSS 방법론 중 하나로, Blcok, Element, Modifier 의 약자이다.

---

 

Block (블럭)

블럭은 그 자체로 의미가 있는 독립적인 부분이다.

( 예시 : header, container, menu, checkbox, input )

블럭은 블럭을 감쌀 수 있다.

예를들어 header 라는 블럭 안에 logo 라는 블럭이 들어갈 수 있다.

 

<!-- 이 헤더는 독립전인 컴포넌트이다. -->
<div class="header">
    <!-- 이 로고는 다른 곳에서도 독립적으로 사용할 수도 있기에 블럭으로 지정한다. -->
    <div class="logo"></div>
</div>

 

---

 

Element (요소)

요소는 독립적인 의미가 없고, 해당 블럭과 의미론적으로 연결된 블록의 일부이다.

블럭에 의존적인 형태이므로, 연결된 블록 안에서만 의미를 가진다.

블럭 뒤에 __를 붙여 사용한다.

( 예시 : header__title, menu__item , list__item, checkbox__caption )

 

<!-- 이 헤더는 독립전인 컴포넌트이다. -->
<div class="header">
	<!-- 이 로고 요소는 헤더 안에서만 의미를 가진다.-->
	<div class="header__logo">
        <!-- 이 로고는 다른 곳에서도 독립적으로 사용할 수도 있기에 블럭으로 지정한다. -->
    	<div class="logo"></div>
    </div>
</div>

 

---

 

Modifier (속성)

블럭, 또는 요소의 속성이다.

예를들어 해당 부분이 다르게 동작을 하거나, 색상 등 스타일이 다른 경우 사용한다.

블럭이나 요소 뒤에 --를 붙여 사용한다.

( 예시 : header--fixed, nav__item--active, form__submit--disabled )

속성의 경우 두가지 방법이 있었다.

 

 

3-1. 불리언(Boolean) 타입

예를들어 아래 예시에 있는 것과 같이, active 상태로 속성을 주는 것을 말한다.

active 상태가 true라고 가정하고 사용하는 것이다.

<div class="nav">
	<ul class="nav__list-wrap">
        <!-- 이 아이템은 --active로 속성을 주어 스타일을 다르게 준다. -->
    	<li class="nav__item nav__item--active">메뉴 1</li>
        <li class="nav__item">메뉴 2</li>
    </ul>
</div>

 

3-2. 키-밸류 (key-value) 타입

이 경우 하이픈으로 성질-내용을 작성한다.

예를들어 상태(state)가 성공(success)인 경우 state-success 로 초록색 버튼을,

상태가 경고(danger)인 경우 state-danger 로 주면서 빨간색 버튼을 만들어 준다.

<!-- 이 버튼은 state-success 와 state-danger로 속성을 따로 주어 스타일을 다르게 준다. -->
<button class="button button--state-success">
	Success button
</button>
<button class="button button--state-danger">
	Danger button
</button>

 

.

.

.

 

이상! 

이렇게 따로 공부하면서 정리하다 보니...

내가 원래 작성했었던 코드들 에서도 틀렸던 것 같은 부분들이 꽤 있는 것 같다. 😅

새로 만드는 포트폴리오 사이트에선 이 페이지를 보면서 최대한 맞추려고 노력해 봐야겠다! 💪

 

 

- 끝 -