개발을 하다보면 가장 어려운 것은 역시 변수명 짓기가 아닐까요?
JavaScript에서는 흔히 Camel case로 불리는 컨벤션 규칙을 사용합니다. 띄어쓰기 없이, 변수명을 붙여 쓰되 이어지는 단어의 첫 글자는 대문자로 작성합니다.
예를 들면, doYouKnowKimchi 같은 형식으로 말입니다.
그런데 말입니다.
CSS에서는 어떻게 하는데요?
이번 글에서는 CSS의 네이밍 규칙에 대해서 알아보고 정리해보겠습니다. 그 중 CSS의 제작 방법론 중 하나인 BEM 규칙을 알아보겠습니다.
BEM 규칙
BEM 써.
BEM.. 그게 뭔데..
BEM 쓰라고.
그거 어떻게 하는 건데..BEM은 Block, Element, Modifer의 줄인 말로 일종의 네이밍 컨벤션입니다. 컴포넌트 기반의 웹 개발론 중 하나라고 보면 됩니다.
BEM 규칙을 이용해 만든 네이밍은 직관적이고, 재사용성이 좋고, 중복을 방지할 수 있습니다.
하나하나 뜯어서 부분 별로 살펴보겠습니다.
Block
블록은 기능적으로 독립되어 재사용될 수 있는 컴포넌트입니다.
Element
요소는 블록에서 분리되어 사용할 수 없는, 블록의 일부분입니다. 요소는 서로 중첩될 수 없습니다.
두 개의 밑줄(underscore, __)로 표현됩니다.
사용 예시) header__logo
Modifier
속성(Modifier)은 block이나 element 행동이나 상태 또는 외양을 정의하는 객체입니다.
속성의 경우 한개의 밑줄(_) 또는 하이픈(-)을 추가하여 표시합니다. (혹은 더블 하이픈 --을 사용하는 곳도 있습니다.)
여기서 속성에는 여러가지가 포함될 수 있는데, 차근차근 자세히 살펴보도록 하겠습니다.
1. Boolean
속성(Modifier)의 유무가 중요할 때 사용됩니다.
값이 상관 없을 때는 disabled로 표현됩니다.
사용 예시)
block-name_modifier-nameblock-name__element-name_modifier-name
예:search-form__buton_disabled
2. Key-Value
속성(Modifier)의 값이 중요할 때 사용됩니다.
사용 예시)
block-name_modifier-name_modifier-valueblock-name__element-name_modifier-name_modifier-value
예:menu_theme_islands
좋은 네이밍을 만들기 위한 규칙들
1. 하이픈을 씁니다!
JavaScript와는 달리 CSS에서는 하이픈을 사용해야 합니다.
CSS에서의 속성들은 대개 하이픈으로 이루어져 있기 때문에, 형식을 맞춰준다고 생각하면 됩니다.
(예- background-color: black;)
언더스코어도 사용하지만, 파일이나 폴더의 이름에만 사용합니다.
(예 - please_hire_me.png)
2. 소문자만 사용합니다!
1번과 이어지는 문제입니다. CSS의 속성에서는 대문자가 없습니다.
소문자만 사용해줍니다.
3. 숫자는 확장성을 고려합니다!
007이나 01처럼 숫자는 앞에 숫자를 더 붙여 여러 자리인 것처럼 해줍니다. 정렬의 순서를 보장하기 위해서입니다.
4. (형태)(의미)(순서)_(상태) 순으로 작성합니다!
5. id가 아닌 class로 사용합니다.
id보다는 class를 사용하는 것이 권장됩니다.
6. 언더스코어(_) 조합은 파일, 폴더, 이미지에 사용됩니다.
btn_login_001_off.png
BEM 규칙을 사용하는 방법에 대해서 소개해보았습니다.
초기에는 직관성이 높지만, 세부사항일 경우 표현이 복잡하고 길어질 수 있다는 단점도 존재합니다.
같은 프로젝트를 하는 사람들과 정한 규칙이 있다면, 그 규칙과 함께 병행하여 사용할 수 있을 것 같습니다.
이 글을 작성하는 데 참고한 글은 다음과 같습니다.
