CSS) [BEM 방식] 클래스 명명법으로 코드 간결화

말 그대로, 클래스 명명법을 통해 html 태그를 구성하는 방식이다.

 

빠르게 실제 예시를 통해 살펴본다.

 

위 사진은 html 태그를 생성할 때, 특정 태그에 속하는 모든 자식 태그들을 상위 태그의 클래스명을 포함하여

명명한 사진이다. (간단하게 이러한 방식을 BEM 이라고 생각하면 된다.)

 

실용적인 측면만 살펴보자면, 이처럼 클래스명으로 구분하는 것이 나중에 해당 요소에 대한 유지보수가 용이하다.

 

CSS 코드로 보면 직관적으로 어떤 부분에 대한 코드인지도 한 번에 알 수 있다.

 

 

참고로, 위 코드는 SCSS를 적용했을 때의 코드 형태이다. 

 

단점은 클래스명을 센스있게 짓기가 까다롭다는 점이다. 이는 코딩 실력과는 무관한 다른 영역인 것 같다.

하다보면 노하우가 생길 것이다.

 

BEM 방식을 SCSS와 결합하여 사용한다면, 아주 큰 무기가 될 것 같다.

 

---

참고)

 

https://nomadcoders.co/kokoa-clone/lectures/1793