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;
}
'HTML ▪ CSS' 카테고리의 다른 글
CSS Selector (0) | 2022.01.14 |
---|---|
box-sizing (0) | 2021.11.03 |
defer (0) | 2021.11.01 |