BEM

BEM

이름을 작성하는 규칙

컴포넌트 단위로, 블럭 레벨로 이름을 작성

 

Block

Element

Modifier

 

block__element--modifier

 

ex)

.card

.card__img

.card__title

.card__description

.button

.card--dark

.button--blue

 

Block - header, container, menu, checkbox, input

Element - menu item, list item, checkbox caption, header title

Modifier - disabled, highlighted, checked, fixed, size big, color yellow

 

<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;
}

 

/* http://getbem.com/introduction/ */