4. Style Convention - TEAM-PROJECT-ACC/trip-at-five-client GitHub Wiki

작성자 : 장원일

클래스 명

• 클래스 명은 BEM 방법론 에 기반합니다.
• 클래스 명은 소문자만 사용합니다.
• 단어 연결은 -(하이픈)으로 구분합니다.
• BE 구조 구분은 __(언더스코어 * 2)로 구분합니다.
• Modifier는 --(더블하이픈)으로 구분합니다.

BEM 요약

• Block, Element, Modifier의 약자로 UI를 독립적인 블럭으로 분리하여 제작하는 네이밍 컨벤션

Block

Block은 독립적인 페이지 구성 요소로 재사용이 가능한 부분의 정의이며 Block은 외부의 환경에 의존적이지 않기 위해서 Block 자체에 외부 여백이나(margin) 위치(position)를 설정하지 않습니다.

Element

Block을 구성하는 단위로 Block에 의존적인 요소 자식이 속한 블럭 내에서만 사용될 수 있고 다른 곳에서는 사용 불가

Modifier

Modifier는 모양(appearance), 상태(state), 동작(behavior)을 나타낸다.

BEM 참조 자료

https://velog.io/@kjwboa/CSS-CSS-%EB%B0%A9%EB%B2%95%EB%A1%A0-BEM-%EB%B0%A9%EC%8B%9D