[BEM] Block Element Modifier
Block: Encapsulates a standalone entity that is meaningful on its own.
(자체적으로 의미있는 독립 실행형 엔티티를 캡슐화한다.)
block with HTML
<div class="block">...</div>
block with CSS
주의사항
▷Use class name selector ONLY
▷태그 네임이나 아이디는 안됨
▷해당 페이지에 다른 블록이나 엘레멘트에 의존성이 있으면 안됨
Modifier: flags on blocks or elements. Use them to change appearance, behaivor or state
CSS class is formed as block's or element's name plus or element's name plus two dashes
e.g.).block--mod or .block__elem--mod and .block--color-black with .block--color-red
modifier with HTML
Modifier is an extra class name which you add to a block/element DOM node. Add modifier classes only to blocks/elements they modify, and keep the original class
(모디파이어는 기존에 있던 Block에 더해준 추가 클래스 이름입니다. 수정되는 블록,요소에만 한정자 클래스를 추가하고
원래 클래스는 유지해야합니다.)
<div class="block block--mod">...</div>
<div class="block block--size-big block--shadow-yes"></div>
-> 여기서 block(오리진) block--mod(추가 클래스)
modifier with CSS
☆ CSS 작명규칙
__ : 언더바 2번/ ~의 구조적 일부분
<div class="body__container">
--: 중간 하이픈 2번/ ~의 상태
<div class="btn--sucess">
btn--warining
-: 하이픈 1번 / 일반적인 띄어쓰기
small-btn
** Vendor Prefix 브라우저 업체별 접두사 ___브라우저에게 실험적으로 제공중인 기능
-webkit- chrome / -ms- ie,edge / -mox- firefox / -o- opera