BEM 방법론

yj j·2023년 11월 20일

BEM은 Block Element Modifier의 약자로, CSS 클래스명을 만들어낼 때 사용하는 방법론 중 하나입니다.
HTML구조를 확인하지 않아도 어느 부분의 일부분이구나를 확인하고자 하는 목적이 있습니다.

BEM 규칙

ID를 사용하지 않고, Class만을 사용합니다.
소문자로 표기합니다.

block__element

block의 일부분임을 표시할 때, underscore 기호 2개를 사용합니다.




block--modifier

block의 상태를 표시할 때, dash 기호 2개를 사용합니다.

BEM 방법론은 실제로도 많이 사용되는 방법입니다.
네이밍의 중복을 방지하면서도 직관적이며, 클래스명을 새로 짓는 수고로움을 줄여줍니다.

profile
꿈꾸는 사람

0개의 댓글