🌼 CSS 구조(Architecture)
BEM
BEM이란?
BEM은 Blcok, Element, Modifier를 뜻한다.
저 세 가지로 구성된 이름을 짓는 것을 의미하며, 각각 __와 --로 구분한다.
BEM의 구조
.header__navigation--navi-text {
color: red;
}위 코드에서
header는 Block,
naviagtion은 Element,
navi-text는 Modifier가 된다.
BEM은 기본적으로 ID를 사용하지 않으며, class만을 사용한다.
또, '어떻게 보이는가'가 아니라 '어떤 목적인가'에 따라 이름을 짓는다.
예를 들어, 에러 메시지를 띄우는 P 태그에게는 .red가 아닌, .error라는 이름을 줘야한다.
이름을 연결할 때는 block-name과 같이 하이픈 하나를 써서 단어를 연결한다.
Block, Element, Modifier
Block
재사용 가능한 기능적으로 독립적인 페이지 컴포넌트(A functionally independent page component that can be reused)를 블럭이라고 부른다.
예를 들어, Logo 블럭은 어딘가에 종속되지 않는다. 헤더에 쓰일 수도 있고, 푸터에 쓰일 수도 있고, 여기저기 붙였다 떼었다 할 수 있다.
이렇게 재사용할 수 있는 요소를 블럭이라고 한다.
Element
엘리먼트는 블럭을 구성하는 단위이다.
블럭은 독립적인 형태인 반면, 엘리먼트는 의존적인 형태이다. 자신이 속한 블럭 내에서만 의미를 가지기 때문에 블럭 안에서 떼어다 다른 데 쓸 수 없다.
<form class="search-form">
<input class="search-form__input"/>
<button class="search-form__button">Search</button>
</form>위 예시에서 .search-form은 블럭이고, .search-forminput과 .search-formbutton은 엘리먼트이다.
저 search-form이란 블럭은 떼어내서 여기저기 재사용이 가능하다.
하지만 내부의 input과 button은 검색을 위한 인풋창이자 버튼이기 때문에, search-form 안에서만 존재 의미가 있는 엘리먼트이다.
엘리먼트 또한 중첩이 가능하다.
.block > .block__element1 > .block__element2 같은 형태가 가능하다는 뜻이다.
그러나 .block__element2를 .block__element1의 하위 엘리먼트로 보지 않고, 똑같이 .block의 엘리먼트로 취급한다.
- BEM의 잘못된 예시
<form class="search-form">
<div class="search-form__content">
<input class="search-form__content__input"/>
<button class="search-form__content__button">Search</button>
</div>
</form>- BEM의 올바른 예시
<form class="search-form">
<div class="search-form__content">
<input class="search-form__input"/>
<button class="search-form__button">Search</button>
</div>
</form>Modifier
모디파이어는 블럭이나 엘리먼트의 속성을 담당한다.
생긴 게 조금 다르거나, 다르게 동작하는 블럭이나 엘리먼트를 만들 때 사용하면 된다.
- Boolean 타입
아래 코드에서 --focused가 수식어에 해당한다. 불리언(boolean)은 그 값이 true라고 가정하고 사용한다.
<ul class="tab">
<li class="tab__item tab__item--focused">탭 01</li>
<li class="tab__item">탭 02</li>
<li class="tab__item">탭 03</li>
</ul>- 키-밸류(key-value) 타입
키 밸류 타입은 하이픈으로 성질-내용을 작성한다.
아래 예시에서 color-gray과 theme-normal가 key-value 타입에 해당한다.
<div class="column">
<strong class="title">일반 로그인</strong>
<form class="form-login form-login--theme-normal">
<input type="text" class="form-login__id"/>
<input type="password" class="form-login__password"/>
</form>
</div>
<div class="column">
<strong class="title title--color-gray">VIP 로그인 (준비중)</strong>
<form class="form-login form-login--theme-special form-login--disabled">
<input type="text" class="form-login__id"/>
<input type="password" class="form-login__password"/>
</form>
</div>BEM의 장점과 단점
장점
- 클래스네임만으로 마크업 구조를 알 수 있다.
블럭과 엘리먼트로 구분되기 때문에 어디서부터 떼어다 쓸 수 있는지, 어디부터 종속되는지 알 수 있다. - SASS의 부모참조자(&)와 함께 쓰기가 편하다.
- 작성된 SASS에서 요소를 쉽게 찾을 수 있다.
예를 들어, .header 아래에 &__logo, &__search로 작성하기 때문에 "저게 헤더 아래 로고고 저건 헤더 아래 검색이구나"란 걸 바로 알 수가 있다. - SASS 작성 시, 늘어지는 셀렉팅을 막아준다.
기존에 nested 방식으로 SASS를 작성하면, 컴파일 시 셀렉팅이 끝도 없이 길어지는 경우가 있다
(.header .nav .list .item .link )
그런데 BEM 방식을 쓰면, 너도나도 엘리먼트라서 굳이 깊게 nested할 필요가 없어진다.
결론 : SASS랑 쓰면 좋다.
단점
- 클래스네임이 너무 길다.
마크업이 한눈에 들어오지 않는다는 단점이 있다.
특히 스크립트로 모디파이어를 변경해야할 때, classList.add("block-name__element-name--modifier")처럼 길게 작성해야 할 수 있다. - 더블클릭 선택이 불편하다.
하이픈과 언더바가 혼재되어 있어, 더블클릭해서 클래스네임을 선택할때 한 번에 선택이 안 되는 문제가 있다.
🌼 CSS 전처리기(CSS preprocessor)
Sass
PostCSS
