BEM (Block, Element, Modifier)

좀 더 쉽게 읽는 CSS를 위한 규칙이라고 보면 된다.

 

출처 : https://css-tricks.com/bem-101/

참고로 btn은 버튼을 말하는 것이다.

1. block : .btn

2. Element : .btn__price

3. Modifier : .btn--orange (밑줄이 아님)

(각각은 class name이다.)

 

1. block

block하면 생각나는 그 블록 생각하는게 쉬울 듯 하다. 뭉텅이???? (....큼흠....)

 

2. Element

Element는 block의 구성 요소라고 생각하자.

 

3. Modifier

Modifier은 어떤 스타일인지(?) Block과 Element의 모양을 생각하면 될 듯 싶다.

아래를 보자.

출처 : https://css-tricks.com/bem-101/

btn이라는 block이 있는데 이를 구성하는 Elements들(btn__price, btn__text)과, Modifier들(btn--big, btn--orange)가 있다. 어떤 느낌인지 조금씩은 감이 오지만, 아직 확실하지는 않다...ㅠㅠㅠㅠㅠ

 

머릿속이 지금 ... '응....??? 응...... 어??....... 흠........' 이런 느낌이다.

차차 공부하면서 알아가야할 듯 하다...ㅠㅠㅠㅠㅠ

 

혼자하면 몰라도 협업할때 유용한 규칙이라고 한다.

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<참고 사이트>

 

css-tricks.com/bem-101/

BEM 101 | CSS-Tricks

nykim.work/15

(여기가 정말 정리가 잘 된것 같아요!!!!)

[CSS 방법론] BEM 방식