BEM이란...

헉; 지금 글을 쓰면 BEM 벌써 3번째 포스팅이다.

거의 1년마다 포스팅하는 것 같은데,

글로만 정리를하고 실제 내것으로 체화하지 않았다는, 나의 게으름의 반증이다.

이번이 마지막 포스팅이 되길........🙏🙏🙏🙏🙏

 

안그래도 javascript로도 유지보수 비용이 많이 드는데,

css도 유지보수 비용이 많이 들게되면, 프론트엔드 개발자는 많이 힘들어질 것이다.

 

가장 대표적인 css 컨벤션으로는 카멜케이스가 아니라, 하이픈(-)을 사용하여 id, class등의 문자열을 표시하는 것이다.

또는, js- prefix를 사용하여 해당 DOM요소가 Javascript와 관계있다는 것을 명시시킬 수도 있다.

 

그럼 이제 BEM 네이밍 규칙을 알아보도록 하자.

BEM을 사용할 때의 장점은 다음과 같다.

1. CSS Selector 이름을 보고, 무엇을 하는 선택자인지 알 수 있다.

2. CSS Selector 이름을 보고, 어디서 사용하는지 알 수 있다.

3. CSS Selector 이름을 보고, Class들의 관계를 알 수 있다.

 

- BEM 구조

BEM은 크게 Block, Elements, Modifiers 3가지로 나누어서 네이밍을 진행한다.

Block는 Nav, Header, Footer 같은 Component에 해당하고, 하이픈(-)을 사용한다.

Elements는 Block이 가지고 있는, 즉 Component안에 있는 구성요소를 뜻하고 2개의 언더바 (__)를 사용하여 구별한다.

Modifiers는 수식어를 뜩하고 2개의 하이픈(--)으로 표현한다. 

 

그럼 곤이라는 크루의 눈동자가 갈색임을 뜻하는 클래스는 어떻게 네이밍을 할 수 있을까?
.crew-gonee__eyes--brown 으로 네이밍을 할 수 있다!