BEM(Block-Element-Modifier)
- HTML 마크업 모듈화
- block요소를 독립적이고, 재사용 가능한 모듈이라는 개념으로 접근
- 대표적인 사이트 tuts+
- 예).block(전체를 감싸고 있는 블록요소)__element(내부 요소)--modifier(기능)
- prefix 붙여 일종의 네임스페이스개념으로 사용
- 실제 서비스를 하면 HTML의 구조가 바뀌는 일이 다반사
- 탐색레벨은 낮고 단순하게 유지하는 것이 유지보수하기 좋음
- 최근 브라우저 테스트 자동화에 대한 요구가 커지고 있음
- 쿼리를 단순하게 하기 위해 길고 유니크한 클래스명을 사용하는 것이 좋음
장점
-class name 중복방지
-직관적 : .gnb__home--active .icon-home
-전제 DOM tree를 다시 보지 않아도 됨
환경에 대한 변경을 표시해주는 클래스명을
root node(delegate parent)에 부여하자
1)<html class="js lt-ie10 mobile">
: js, css 지원여부와 데스크탑/모바일 등의 client 접속 환경정보
2)<body class="log-in myinfo abtest-a">
: 접근중인 컨트롤러, 실행중인 액션, 로그인, AB테스트의 대상 여부 등
3)<div class="msgbox msgbox__unread">
:BEM에서 block요소 - 개별 모듈의 상태에 대한 정보를 담는다.
페이지의 상태값을 javascript로 전달할 방법이 필요
- 자바스크립트 전역변수나 <input type="hidden">사용을 지양하자.
=> HTML5스펙의 data-* attribute를 사용하자!(장점보기)
CSS속성은 한줄에 하나만 선언!
- 가독성이 좋고 어느 속성을 어느 위치에 넣을 것인지 고민할 필요 없음
- diff 할때 좋음
- 빌드타임에 minify하는 전략
BEM 예
===============================================================
.block {}
.block__element {}
.block--modifier {}
===============================================================
.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */
===============================================================
.person {}
.person__hand {}
.person--female {}
.person--female__hand {}
.person__hand--left {}
===============================================================
<form class="site-search site-search--full">
<input type="text" class="site-search__field">
<input type="Submit" value ="Search" class="site-search__button">
</form>
===============================================================
.media {}
.media__img {}
.media__img--rev {}
.media__body {}
===============================================================
<div class="media">
<img src="logo.png" alt="Foo Corp logo" class="media__img--rev">
<div class="media__body">
<h3 class="alpha">Welcome to Foo Corp</h3>
<p class="lede">Foo Corp is the best, seriously!</p>
</div>
</div>
===============================================================
<div class="content">
<h1 class="content__headline">Lorem ipsum dolor...</h1>
</div>logo {}
===============================================================
.site-logo {}
.site-logo--xmas {}
===============================================================
.header__logo {}
.header__tagline {}
.header__searchbar {}
.header__navigation {}
===============================================================
.header__navigation {}
.header__navigation--secondary {}
===============================================================
.label {}
.label--alert {}
===============================================================
with Sass
.header__navigation {
background: #008cba;
padding: 1rem 0;
margin: 2rem 0;
text-transform: uppercase;
}
-----------------------------------------------------------------------------------------------------------
.header__navigation--secondary {
@extend .header__navigation;
background: #dfe0e0;
}
-----------------------------------------------------------------------------------------------------------
.label {
background: #eee;
border-radius: 505;
color: #333;
font-size: 1rem;
}
-----------------------------------------------------------------------------------------------------------
.label--alert {
@extend .label;
background: #da4531;
color: #fff;
}
-----------------------------------------------------------------------------------------------------------
하지만 어떤 BEM카테고리에 들어가지 않는 클래스는 굳이 끼워맞추지 않음
.caps { text-transform: uppercase; }
.site-logo {}
