# CSS 방법론 - BEM

2년동안 여유가 없다는 핑계로 프론트앤드 개발자라면 피해갈 수 없는 CSS부분을 더 깊이 학습하지 못한 1인..

그러니 CSS가 그냥 재밌고 쉽고 그렇게만 생각해왔는데 이 정도에서 머문다면 스스로의 발전은 없는걸로 ㅜ_ㅜ

현 회사에서는 따로 마크업이라던가 요구하는 CSS방법이 정해져 있진 않지만 내가 먼저 나서서 프로젝트에 조금씩이라도 적용해보는걸 목표로 학습을 진행하게 되었다 : )

 

그동안 들어만 봤던 뱀~ BeeeeeeeeeeeeeeeeeM!!!!!!!

뱀이다아아 뱀이다아아아ㅏㅏ ㅎㅎㅎㅎ하하하하하핳 뱀처럼 생겨서 BEM인가 크크크킄 ㅎㅎㅎㅎ

그럴리가.....ㅈㅅ

 

BEM은 Block Element Modifier의 약자가 되겠다. 역시 뱀처럼 생겨서 그런게 아니였.... ㅈㅅ2

약자를 하나 하나 분리해서 BEM의 방법론을 파악해 보도록 하자요~!

 

Block

: 전체를 감싸고 있는 block 요소

 

Blobk은 각각의 요소를 담고 있는 Container의 역할을 말한다.

예를들면 헤더, 푸터, 사이드바, 메인콘텐츠 영역등을 Block 요소라고 할 수 있겠다.

Block요소는 클래스 작성 시 항상 맨앞에 위치하도록 한다.

Block요소의 역할을 정의하고 그 뒤에 해당 요소의 클래스명을 작성해주면 되겠다! 간단하눼!!!

 

Element

: block이 포함하고 있는 한 부분

 

Block이 감싸고 있는 전체라면 Element는 Block을 구성하고 있는 각각의 부분이 되겠다.

Element는 밑줄 두개( __ )로 Block요소 다음에 연결시키면 된다.

.block__element { ... }

 

Modifiers

: block요소의 속성, block 요소가 포함하고 있는 한 부분

Modifier는 Block요소의 외관이나 상태를 변화시킨다. 특정 요소의 스타일을 수정할 필요가 있을때 Modifier만 활용하면 된다.

Modifier는 Blobk요소 또는 Element요소 다음에 두개의 하이픈( -- )을 추가하여 표기하도록 한다.

.block--modifier { ... }
.block__element--modifier { ... }

 

 

클래스명을 작성할때는 항상 간단명료하게 naming만으로도 충분히 그 역할과 의미가 유추가능 할 수 있도록 작성해야한다.

그리고 반드시 필요한게 아니라면 추가적인 클래스를 만들거나 똑같은 스타일을 반복해서 사용하는것은 지양하도록 해야한다.

모두가 아는 사실이지만 보통 플젝하며 시간이 없다는 이유로 css는 중요하지 않을꺼라는 생각에 대충 지은 naming과 똑같은 스타일이 남발하게 된다는 점....ㅜ 나만그런가 ㅎㅎㅎ;;; 반성반성

 

BEM방식의 요점은 block요소를 독립적이고, 재사용 가능한 모듈이라는 개념으로 접근하여 HTML 마크업 모듈화를 잘 할 수 있도록 한다는 점이다. prefix 붙여 일종의 네임스페이스개념으로 사용하는 형식이 어쩌면 '너무 길어서 더 불편한데?' ( = BEM방식을 처음 접했던 내가 했던 생각 ) 라는 생각이 들 수 있겠지만 그만큼 구체적이고 명료하여 클래스명이 무엇을 나타내는지 더 분명하게 전달될 수 있기 때문에 잘사용한다면 도움이되겠다 ㅎㅎ

 

BEM Advantage

• class name 중복을 방지한다.
• 직관적이다.
• 전체 DOM tree 구조를 다시 보지 않아도 된다.