BEM을 사용하여 HTML 및 CSS에서 클래스 이름을 지정하는 방법

안녕 친구,

오늘의 이야기에서 우리는 HTML과 CSS의 명명 규칙에 대해 논의하고 있습니다.

B - Body, E - Element, M - Modifier인 BEM 명명 규칙에 대해 논의 중입니다. 아래에 언급된 것과 유사한 이름 지정 클래스를 한 눈에 볼 수 있습니다.

//Wrong
.catlystNavbar{ ... }
.catlystNavbarLogo{ ... }
.catlystNavbarBg{ ... }

//Correct
.catalyst-navbar {  ...}
.catalyst-navbar__logo{  ...}
.catalyst-navbar--bg{  ...}

BEM은 전체 사용자 인터페이스를 재사용 가능한 작은 구성 요소로 나누려고 시도합니다.

효율적으로 이해하기 위해 navbar의 예를 들어 보겠습니다.
촉매 Navbar



위의 navbar는 디자인 블록과 같은 요소로 나타냅니다.

BEM의 첫 글자인 Block을 나타내며 아래와 같이 같은 스타일의 컴포넌트를 나타냅니다.

.catalyst-navbar{  ... }

E - 요소

E는 BEM의 요소를 나타냅니다.

예를 들어, catalyst-navbar 로고와 링크

로고와 링크는 구성 요소 내의 모든 요소입니다. 하위 구성 요소, 즉 전체 상위 구성 요소의 하위 구성 요소로 볼 수 있습니다.

BEM 명명 규칙을 사용하여 두 개의 밑줄을 추가하고 요소 이름을 추가하여 요소 클래스 이름을 파생합니다.

.catalyst-navbar__logo{  ... }
.catalyst-navbar__content{  ... }

M - 수정자

M은 BEM에서 Modifier를 나타냅니다.

navbar가 수정되어 파란색 또는 빨간색 배경을 가질 수 있다면 어떨까요?

실제 세계에서는 빨간색 버튼 또는 파란색 버튼이 될 수 있습니다. 이들은 해당 구성 요소의 수정입니다.

BEM을 사용하여 수정자 클래스 이름은 두 개의 하이픈과 요소 이름을 추가하여 파생됩니다.

예를 들어:

.catalyst-navbar--bg{  ... }
.catalyst-navbar--red{  ... }
.catalyst-navbar--blue{  ... }

이 navbar에 대해 작성한 최종 코드는 다음과 같습니다.



이제 명명 규칙이 필요한 이유는 무엇입니까?라는 질문이 생깁니다.

사물의 이름을 짓는 것은 어렵다. 우리는 일을 더 쉽게 만들고 더 유지 관리 가능한 코드로 미래에 시간을 절약하기 위해 노력하고 있습니다.

CSS에서 이름을 올바르게 지정하면 코드를 더 쉽게 읽고 유지 관리할 수 있습니다.

BEM 명명 규칙을 사용하기로 선택한 경우 마크업만 보면 디자인 구성 요소/블록 간의 관계를 쉽게 확인할 수 있습니다.