CSS Convention - BEM

css naming convention
작성 : 박준기

재사용 가능한 구성 요소 및 코드 공유를 만드는 데 도움이 되는 CSS방법론입니다.
B__E--M

BEM 방법론 도입의 필요성
CSS에서도 마찬가지이다. 요소들을 구분하기 위해 id와 class를 남발하다보면 어디에 무엇이 있었는지 알기 너무 힘들어진다.
다른 사람과의 작업 결과물을 합치다 보면 새로 만드는게 훨씬 빠르겠다는 생각이 든다.
그러다보면 어느덧 그냥 또다른 쓰레기를 만들고 있는 나를 발견한다.

CSS 방법론의 역사
OOCSS
니콜 설리번(Nicole Sulivan) 제창
• 레고처럼 자유로운 조합이 가능한 모듈의 집합을 만들고
• 그 모듈을 조합해 페이지를 구성한다.
• 따라서 신규 페이지를 만드는 경우에도 기본적으로 추가적인 CSS를 만들 필요가 없다.
• 모듈을 구현하기 위한 두가지 원칙(스트럭쳐와 스킨을 분리 / 컨테이너와 콘텐츠 분리)을 따른다.
- Object Oriented CSS(객체 지향 CSS) -

ABOUT OOCSS
스트럭쳐와 스킨 - With, height, padding, margin 등 / color, font, background, box-shadow등 컨테이너와 콘텐츠 분리 – 모듈을 영역에 의존하지 않도록 한다
요소
모듈

OOCSS 정리
장점
• 재사용성이 높음: OOCSS는 CSS 코드를 모듈 단위로 구성하므로, 재사용성이 높은 코드를 작성할 수 있다.
이를 통해 코드의 양을 줄이고, 개발 시간을 단축할 수 있다.
• 유지보수성이 높음: OOCSS는 코드를 구조화하므로, 코드의 유지보수성이 높아진다.
스타일을 수정해도 레이아웃이 변경되지 않고, 레이아웃을 수정해도 스타일이 변경되지 않으므로, 코드를 보다 쉽게 수정할 수 있다.
• 확장성이 높음: OOCSS는 객체지향적인 접근 방식을 채용하므로, 코드를 쉽게 확장할 수 있다.
새로운 모듈을 추가하거나, 기존 모듈을 수정해도 다른 모듈에 영향을 미치지 않으므로, 코드의 안정성이 높아진다.
단점
• 학습 난이도 높음 / 코드의 양이 늘어남 / 코드의 가독성이 떨어짐
기타의견
• OOCSS의 역사는 매우 길며 명확하게 규칙이라고 불리는 것도 많지 않다.
• 다른 CSS방법론들은 기본적으로 크OCSS를 참조하면서 개선한 것
• 오늘날 컴포넌트 기반의 개발엔 OOCSS 한 가지만으로 실질적인 CSS 설계를 수행하는 것은 그다지 현실적이지 않다.

CSS 방법론의 역사
SMACSS
- Scalable and Modular Architecture for CSS(확장 가능한 모듈화된 아키텍쳐 CSS) -
조나단 스눅(Jonathan Snook) 제창
CSS 코드를 그 역할에 따라 분류한 것이 특징
• Base(베이스)
• Layout(레이아웃)
• Module(모듈)
• State(스테이트)
• Theme(테마)

ABOUT SMACSS
Base(베이스) 규칙
• 프로젝트의 표준 스타일의 정의 – 바탕화면 생상과 같은 프로젝트 전반에 적용되는 스타일링입니다.
• 또한 브라우저간의 차이를 제거하기 위해 사용되는 리셋 CSS, 노멀라이즈 CSS도 SMACSS 기준에는 베이스 규칙에 해당합니다.

• 웹사이트의 레이아웃을 구성하는 큰 모듈에 관한 규칙이며, 레이아웃을 구성하는 모듈은 특정 페이지에 한차례만 사용하는 것이 많으므로 ID셀렉터
• 반복적으로 사용되는 모듈의 경우엔 Class 셀렉터를 이용합니다.
• 만약 특정페이지에서 레이아웃을 변경하고 싶다면 SMACSS 에서는 손자 셀렉를 이용해 레이아웃 모듈 스타일을 덮어쓸 것을 권장하고 있습니다.
ABOUT SMACSS
Layout(레이아웃) 규칙

• 모듈은 타이틀, 버튼, 카드, 네비게이션 등 일반적인 UI컴포넌트를 나타냅니다.
• 모든 모듈은 레이아웃 규칙안에 배치되는 것을 가정합니다.
• 다른 페이지로 이동하거나 다른 레이아웃 안에 삽입하더라도 형태가 부서지거나 달라지지 않고 사용할 수 있어야 합니다.
• 모듈은 페이지 내에서 반복사용되는 상황을 가정하므로 루트 요소에는 반드시 클래스 셀렉터를 사용합니다.(ID셀렉터 X)
ABOUT SMACSS
Module(모듈) 규칙

• 기존 스타일을 덮어쓰거나 확장하기 위해 사용합니다.
• 기존 스타일에 모두 덮어써서 스테이트 스타일을 반영하는 것을 기대하기 때문에 필요한 경우에는 !important 사용도 권장합니다.
• 스테이트는 레이아웃이나 모듈에 할당 할 수 있습니다.
• 스테이트 규칙에 따른 클래스 이름은 모두 is- 접두사를 붙여 다른 규칙과 구별하며, 어떤 모듈에 적용하는지를 명확하게 한다.
ABOUT SMACSS
State(스테이트) 규칙

• 사이트 내 레이아웃이나 색상, 텍스트 처리 등을 일정한 규칙에 따라 덮어쓰는 것(레이아웃규칙+스테이트규칙)
• 기존의 다양한 스타일링이 덮어쓰기의 대상이 된다.(다크모드전환, 테마 컬러&이미지 변경 등)
• theme 접두사를 붙일 것을 권장
ABOUT SMACSS
Theme(테마) 규칙

SMACSS 정리
장점
• 공통된 부분을 정의해서 재사용이 가능.
• 구조적 상황에 관계없이 동일한 클래스라면 동일한 스타일을 기대할 수 있음.
• 코드의 재사용으로 코드 양이 줄어듬.
단점
• 공통된 클래스가 많기 때문에 수정이 발생할 시 멀티클래스를 사용해야 함.
• 멀티클래스가 많아짐에 따라 유지보수에 어려움 코드의 가독성이 떨어짐.
기타의견
• 프로젝트에서 고려해하 하는 대부분의 CSS 규칙을 포함 한다.
• 각 규칙이 엄격하지 않아 유연하거나, 경우에 따라 규칙이 너무 유연하여 실제 코드의 지침으로 삼기 어렵다.
• 모듈 규칙에 OOCSS를 적용하거나 BEM의 규칙을 일부 적용하는 등 다른 설계 기법과 조합하는 경우가 많다.

BEM이란?
- Block, Element, Modifier -
Yandex社(러시아)
• 러시아의 YANDEX사가 제창한 컴포넌트 기반 웹 개발 접근법
• UI를 독립된 블록으로 분리함으로써 복잡한 페이지도 간단하고 신속하게 개발을 수행하는 것이 목적
• 기본적으로는 모듈 기반 방법이지만, 그 내용이 다른 설계 기법에 비해 엄격하고 강력하여
세계적으로 이름이 알려졌으며 실제로 널리 사용되고 있다.
BEM
https://en.bem.info/
Smashing Magazine
https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/

• 개발, 디버깅, 유지보수를 위하여 CSS 선택자의 이름을 명확하게 만드는 것이 목표이며, 소문자, 숫자 만을 이용해서 작명한다.
• 여러단어의 조합은 하이픈(-)으로 연결하여 작명한다.
• BEM은 기본적으로 ID를 사용하지 않으며, class만을 사용합니다.
• '어떻게 보이는가'가 아니라 '어떤 목적인가'에 따라 이름을 짓습니다.
예를 들어, 에러 메시지를 띄우는 P 태그에게는 .red가 아닌, .error라는 이름을 줘야합니다.
BEM 기본 구조 및 작명규칙
작명규칙
• BEM은 Blcok, Element, Modifier로 구성된 네이밍을 하는 것 그리고 그것을 각각 __와 --로 구분합니다.
기본구조
• 위 코드에서 header는 Block, naviagtion은 Element, navi-text는 Modifier가 됩니다.

BEM Block
• 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트(A functionally independent page component that can be reused)
• 블럭은 블럭을 감쌀 수 있습니다. .header>.logo는 header라는 블럭 안에 logo라는 블럭이 들어간 형태입니다.
블록이란?

BEM Element
• 블럭을 구성하는 단위입니다. 블럭은 독립적인 형태인 반면, 엘리먼트는 의존적인 형태입니다.
자신이 속한 블럭 내에서만 의미를 가지기 때문에 블럭 안에서 떼어다 다른 데 쓸 수 없습니다.)
• 위 예시에서 .search-form은 블럭이고, .search-form__input과 .search-form__button은 엘리먼트입니다.
저 search-form이란 블럭은 떼어내서 요기조기 마음껏 붙여도 됩니다.
하지만 내부의 input과 button은 검색을 위한 인풋창이자 버튼이기 때문에, search-form 안에서만 존재 의미가 있는 엘리먼트입니
엘리먼트란?

BEM Element
• 엘리먼트는 .block > .block__element1 > .block__element2와 같이 중첩 사용이 가능합니다.
• .block_element2를 .block_element1의 하위 엘리먼트로 보지 않고 둘 다 똑같이 .block의 엘리먼트로 취급합니다.
따라서 클래스네임에 캐스케이딩을 여러번 표시할 필요가 없습니다.
중첩사용
• 위 형태는 block-name__element-name이란 형식을 따르고 있지 않습니다.대신에 아래와 같이 사용합니다.

BEM Modifier
• 모디파이어는 블럭이나 엘리먼트의 속성을 담당합니다.
• 생긴 게 조금 다르거나, 다르게 동작하는 블럭이나 엘리먼트를 만들 때 사용하면 됩니다.
모디파이어란?

BEM Modifier
• 위 코드에서 --focused가 수식어에 해당합니다. 저렇게 작성된 걸 불리언(boolean) 타입이라고 하는데,
그 값이 true라고 가정하고 사용하며 “—”를 사용합니다.
불리언(boolean) 타입과 키-밸류(key-value)
• 위 예시에서 color-gray과 theme-normal가 key-value 타입에 해당하며, 하이픈으로 작성합니다.

BEM 정리
장점
• 클래스네임만으로 마크업 구조를 알 수 있습니다.
블럭과 엘리먼트로 구분되기 때문에 어디서부터 떼어다 쓸 수 있는지, 어디부터 종속되는지 알 수 있습니다.
• SASS의 부모참조자(&)와 찰떡궁합! 쓰기가 무척 편합니다.
• 작성된 SASS에서 요소를 쉽게 찾을 수 있습니다.
예를 들어, .header 아래에 &__logo, &__search로 작성하면 "헤더 아래 로고고 저건 헤더 아래 검색이구나"란 걸 바로 알 수가 있습니다.
• SASS 작성 시, 늘어지는 셀렉팅을 막아줍니다. 기존에 nested 방식으로 SASS를 작성하면, 컴파일 시 셀렉팅이 끝도 없이 길어지는 경우가 있지만
ex(.header .nav .list .item .link )
그런데 BEM 방식을 쓰면, 너도나도 엘리먼트라서 굳이 깊게 nested할 필요가 없어집니다.
단점
• 클래스네임이 너무 길어서 가독성이 떨어짐
마크업이 한눈에 들어오지 않는다는 단점이 있습니다. 특히 스크립트로 모디파이어를 변경해야할 때,
classList.add("block-name__element-name--modifier")처럼 길게 작성해야하는 건 불편해보입니다.
• 더블클릭 선택이 불편함
하이픈과 언더바가 혼재되어 있어, 더블클릭해서 클래스네임을 선택할때 한 번에 선택이 안 되는 문제가 있어요.

-끝-
기타의견
• 이렇게 BEM에 대해 살펴보았습니다.
장점도 단점도 있지만, 장점이 더 많기에 디자인~마크업~프론트엔드 간의 의사소통이 활발히 하고
마크업 단계부터 구조를 탄탄하게 짜야한다면 BEM을 추천합니다.
• 다음엔 예제를 통해 작성해보려고 합니다.

CSS Convention - BEM

More Related Content

Similar to CSS Convention - BEM

More from Wonjun Hwang

CSS Convention - BEM