[CSS] CSS 방법론이란? (ft. OOCSS / BEM / SMACSS)

CSS 방법론

CSS 방법론이란 CSS를 어떤 방법으로 구성하면 더 효율적으로 구성할 수 있는가에 대한 방법론이다.

즉, 쉽게 말하면 CSS에서 클래스 네임을 쉽게 정의하기 위한 일종의 규칙이라고 생각하면 될 것 같다.

 

CSS방법론을 사용하는 이유는 뭘까?

• 원활한 유지보수
• 코드의 재사용성
• 클래스명으로도 무슨 내요인지 예측 가능
• 확장 가능

그리고 CSS 방법론에는 크게 OOCSS, BEM, SMACSS로 나뉘어 있다.

---

OOCSS

OOCSS(Object Oriented CSS)는 CSS를 모듈 방식으로 작성하여 중복을 줄이는 방식의 방법론이다.

실제로 가장 많이 쓰이는 방법론이라고 볼 수 있는데, 나 역시 현업에서 프로젝트를 진행할 때 OOCSS 방법론을 많이 사용하였다.

 

주요 원리는 구조와 스타일을 분리해서 작성하는 것이다.

<button class="btn_common btn_1">버튼 1</button>
<button class="btn_common btn_2">버튼 2</button>

.btn_common {
  width: 200px;
  border-radius: 5px;
}

.btn_1 {
  background-color: gray;
}

.btn_1 {
  background-color: rosybrown;
}

뭐 예제가 형편없기는 하지만 대충 예제를 보자면 위와 같은 형식의 코드가 나올 텐데,

쉽게 생각해서 공통적인 부분을 추출하고 각 고유의 스타일을 지정해 사용한다고 생각하면 좋을 것 같다.

 

중복을 최소화하고 코드의 재사용성이 높아진다는 장점이 있지만, 아무래도 가독성 측면과 코드가 길어진다는 단점이 존재한다.

 

개인적인 의견으로는 OOCSS의 궁극적인 목표는 구조와 스타일을 분리해서 사용하는 거라고는 하지만,

결국 공통적인 부분과 독립적인 부분을 분리해서 다시 조합해 사용하는 것이 아닌가라는 생각이 든다.

그래서 만약 공통적인 부분을 계속해서 쪼개 나가다 보면 아래와 같은 형식의 코드가 될 수 있다.

.pT10 {
  padding-top: 10px;
}
.pT20 {
  padding-top: 20px;
}
.mB10 {
  margin-bottom: 10px;
}

이 정도까지 쪼개면 사실 굳이 OOCSS라는 방법론을 고수할 필요가 없어진다.

이 코드를 보면서 느낀 것은 Tailwind CSS라는 것이랑 참 비슷해지는구나 라는걸 느꼈다.

 

https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

CSS Utility Classes and "Separation of Concerns"

위 링크는 Tailwind CSS를 개발한 개발자가 왜 Tailwind CSS를 만들게 되었는지 그 의도를 밝힌 글이라고 한다.

(참고: CSS 유틸 클래스와 관심사 분리 - 영문 번역 게시글)

 

Tailwind CSS에 관련해서 아래 글을 한번 읽어보는 걸 추천한다.

https://wonny.space/writing/dev/hello-tailwind-css

Hello Tailwind CSS! | 장점, 단점, 사용법 | Wonny Log

 

아 물론 Tailwind CSS를 사용하자! 라기보다는 그냥 의식의 흐름대로 정리한 것이기 때문에 그럴 수도 있겠구나라고 생각하면서 봐주면 좋겠다.

 

추가적으로 OOCSS 방법론과 SACC/SCSS를 같이 사용하면 좀 더 깔끔한 코딩이 가능해진다고 한다.

뭐 OOCSS 방법론뿐만 아니라 위 Tailwind CSS 관련 글을 살펴보면 BEM 방법론을 사용했음에도 Tailwind CSS를 만들었던 과정에 포함되어있는 거 보니 결국 어떤 방법론을 사용하더라도 똑같은 의문과 문제에 직면할 수 있다는 것을 시사하는 것 같다.

---

BEM

BEM은 블록(Block), 요소(Element), 상태(Modifier)로 구분하여 클래스 이름을 작성하는 방법론이다.

각 부분을 __와 --로 구분하여 클래스명을 짓게 된다.

• 블록(Block)
  : 재사용성이 가능하고 기능적으로 독립이 가능한 컴포넌트이다. 일반적으로 하나의 단어를 사용하되 길어질 경우엔 -를 사용한다.

.card {...}
.author-bio {...}

• 요소(Element)
  : 블록을 구성하는 단위로 __를 사용한다.

.card__content {...}
.author-bio__content {...}
.author-bio__image {...}

• 상태(Modifier)
  : 블록이나 요소의 속성으로 --를 사용한다.

.card--hide {...}
.author-bio__content--disabled {...}

OOCSS와 더불어 BEM 방법론 역시 상당히 많이 사용하는 방법론이다.

하지만 이 역시 위에서 Tailwind CSS를 만들어 가는 과정의 글을 읽어보면 알겠지만 결국 딜레마를 겪게 된다.

---

SMACSS

SMACSS(Scalable and Modular Architecture for CSS)는 CSS를 범주화(Categorization)로 패턴화 하고자 하는 방법론이다.

SMACSS는 작성할 CSS를 비슷한 종류끼리 모아 5가지 스타일로 나누고 각 유형에 맞는 선택자와 작명법, 코딩 기법을 제시한다. 기본(base), 레이아웃(layout), 모듈(module), 상태(state), 테마(theme)라는 다섯 가지의 범주를 제시한다.

 

• 기본(base)
  : Reset, Variable 등을 포함하고 !important를 쓰지 않는다.

body, form, p, table, button, fieldset, input ... {
    margin: 0;
    padding: 0;
}

• 레이아웃(layout)
  : 주요 요소(id)와 하위 요소(class)로 구분하고 접두사를 사용한다.

// layout => l-

// 주요 요소 작성
#header {
    width: 400px;
}
#aside {
    width: 40px;
}

// 하위 요소 작성
.l-width #header {
    width: 650px;
    padding: 10px;
}
.l-width #aside {
    width: 100px
}

• 모듈(module)
  : 재사용성이 높은 구성 요소를 정의한다.

.stick { ... }
.stick-name { ... }
.stick-number { ... }

• 상태(state)
  : 요소의 상태 변화를 표현하고 접두사 "is-"나 "s-"를 사용한다.

.is-error { ... }
.is-hidden { ... }
.is-disabled { ... }

• 테마(theme)
  : 사용자가 선택 가능하도록 스타일을 재선언하여 사용한다.
  

// base.css
.header {
    background-color: red;
}
// theme.css
.header {
    background-color: orange;
}

SMACSS 사용 시에는 다음과 같은 유의사항들이 존재한다.

1. 파생된 CSS셀렉터 사용금지
2. Id 셀렉터 사용금지
3. !Important 사용금지
4. 다른 개발자들이 이해할 수 있도록 class 이름을 의미 있게 지어야 함

---

CSS 방법론에 대하여 (잡담)

CSS 방법론은 어떤 규칙으로 CSS를 만들어야 기존에 사용하던 방식에서 발생하는 문제들이 발생하지 않을까? 에서 시작해 만들어진 규칙들이다.

 

하지만 이러한 방법론 (OOCSS, BEM, SMACSS 그리고 그 외 ITCSS, ATOMI CSS 등)을 통해서도 복잡성을 줄이거나 더 나은 생상선을 가져오는 것이 아니였다고 한다.

 

여기서 다양한 방법으로 발전을 해와서 생겨난 게 CSS Module, CSS-in-JS 등이 있다.

 

위에서 링크를 걸어놨던 Tailwind CSS 역시 글을 읽어보면 알겠지만 아마 많은 사람들이 그러한 문제점을 인지하고 있었을 것이라고 생각한다. 비슷한 문제점들을 해결해 나가면서 더 좋은 방법이 없을까 해서 만들어낸 게 Tailwind CSS니 말이다.

 

아까 위에서 OOCSS와 SASS를 같이 쓰면 좋다라고는 하였는데, SASS/SCSS에서는 자체적으로 권장하고 있는 고유의 아키텍처 7-1 Architecture가 존재한다.

이렇듯 무엇을 사용함에 있어 정답은 없다고 생각된다. 모두 각각의 장단점이 있고 그걸 인지한 상태에서 현재 속한 팀이 무엇을 선택하고 사용함에 달린 것 같다.

 

본문을 작성하면서 좀 더 다양한 내용을 찾아보다가 아래와 같은 흥미로운 글을 발견했는데, 한번 읽어보는 걸 추천한다.

https://tech.kakao.com/2022/05/20/on-demand-atomic-css-library/

내가 하면 더 잘 만들 것 같아서 만들어 본 세상 귀여운 on-demand Atomic CSS Library. -Part.1

 

---

참고: https://velog.io/@hahan/CSS%EB%B0%A9%EB%B2%95%EB%A1%A0OOCSS-BEM-SMACSS

CSS방법론 (OOCSS, BEM, SMACSS)

참고: https://wit.nts-corp.com/2015/04/16/3538

[CSS방법론] SMACSS, BEM, OOCSS | WIT블로그