BEM Methodology

Blcok, Element, Modifier

SASS 쓸려면 의미있고 아니면 딱히..

.header__navigation--navi-text {
  color: red;
}

• 위 코드에서 header는 Block, naviagtion은 Element, navi-text는 Modifier

• SASS의 부모참조자(&)와 찰떡궁합

• 클래스네임만으로 마크업 구조를 알 수 있다

• 작성된 SASS에서 요소를 쉽게 찾을 수 있다

• SASS 작성 시, 늘어지는 셀렉팅을 막아줌

• 클래스네임이 너무 길어짐

[CSS 방법론] BEM 방식

오늘은 CSS 방법론 을 다뤄보겠습니다 ;-) 말이 거창하긴 한데 쉽게 풀어쓰면 'CSS 클래스네임을 어떻게 지으면 좋을지' 고민해보는 거죠. 방법론에는 여러 가지가 있는데, 최근 BEM을 실무에 도입하면서 매력을 느끼고 있어요! 그래서 이번 포스트는 BEM에 대한 내용입니다. 한 번 읽어 보시면 도움이 되리라 생각합니다. (*이 포스트의 틀린 부분이나 고칠 점이 있다면 알려주세요!

https://nykim.work/15