[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

ref:&nbsp;http://getbem.com/naming/

☆ 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