TIL 36 | ★다방 랜딩페이지 만들기6(BEM)
별다방 랜딩페이지를 만들면서 찾아본 BEM에 대해 적어보자
BEM(Block Element Modifier)
BEM이란
- HTML 클래스 속성의 작명법
- 요소__일부분 : Underscore(Lodash) 기호로 요소의 일부분을 표시
- 요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시
<div class="container">
<div class="name"></div>
<div class="item">
<div class="name"></div>
</div>
</div>
class 선택할 때, .container .item > 이렇게 하는 경우, item의 자식요소인 name도 선택이 되는 경우가 있다
- 요소__일부분 : Underscore(Lodash) 기호로 요소의 일부분을 표시
- 요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시
<div class="container">
<div class="name"></div>
<div class="item">
<div class="name"></div>
</div>
</div>
class 선택할 때, .container .item > 이렇게 하는 경우, item의 자식요소인 name도 선택이 되는 경우가 있다
그래서 탄생된 작명법 : 요소__일부분 case
<div class="container">
<div class="container__name"></div>
<div class="item">
<div class="item__name"></div>
</div>
</div>
그래서 탄생된 작명법 : 요소--상태 case
- 일반 버튼 :
<div class="btn primary"></div> -> <div class="btn btn--primary"></div>
- 완료 버튼 :
<div class="btn success"></div> -> <div class="btn btn--success"></div>
- 삭제 버튼 :
<div class="btn error"></div> -> <div class="btn btn--error"></div>
Author And Source
이 문제에 관하여(TIL 36 | ★다방 랜딩페이지 만들기6(BEM)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yeonbee/TIL-36-다방-랜딩페이지-만들기6BEM저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)