[CSS] CSS방법론 (OOCSS, BEM, SMACSS)

CSS방법론 이란?

CSS방법론은 대규모 프로젝트나 팀 작업에서 css코드의 유지보수성, 재사용성, 확장성을 향상시키기 위해 사용되는 일련의 규칙을 의미한다.

방법론을 사용하면 좋은 점

1. CSS의 복잡성을 관리하고 코드의 구조를 표준화 할 수 있음
2. 개발자들이 사용하는 방법론은 각각의 특징과 목적, 원칙을 갖고 있음

CSS방법론에는 크게 OOCSS, BEM, SMACSS로 나눠져있다.

---

OOCSS

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

OOCSS의 주요 원칙

1. 구조와 스타일 분리
   스타일의 구조(레이아웃)과 테마(스킨)을 분리해야한다.
   ex) 버튼의 기본 레이아웃과 버튼의 테마(배경색, 테두리)를 분리하여 스타일링 해야함

2. 컨테이너와 콘텐츠 분리
   스타일은 특정 위치나 컨테이너에 의존적이지 않아야한다.
   ex) 사이드바에만 사용되는 특정 스타일 대신 일반적으로 재사용 가능한 스타일을 만들어야한다.

OOCSS의 장점

1. 재사용성
   중복된 디자인 요소를 따로 빼내어 작성하기 때문에 코드 중복을 줄이고 일관된 디자인을 유지할 수 있다.

2. 확장성
   새로운 테마나 레이아웃 추가하기가 쉬워진다.

3. 유지보수
   변경사항이 발생할 때, 특정부분만 수정하면 되므로 유지보수가 용이하다.

4. 최적의 성능
   코드 재사용성이 높아져 적은 코드량으로 최적의 성능을 보여준다.

OOCSS 단점

1. 클래스의 과다 사용

• 다중 클래스 사용으로 인해 코드 가독성이 떨어짐

2. 학습 곡선

• 팀원 모두가 OOCSS원칙에 익숙해져야 효과적으로 사용 할 수 있음

<!-- 기존 방식 -->
<div class="header_btn header_skin">haeder</div>
<div class="footer_btn footer_skin">footer</div>

<!-- OOCSS 적용 -->
<div class="btn skin hader">hader</div>
<div class="btn skin footer">footer</div>

.btn > 공통 버튼 스타일 정의
.skin > 공통 스킨 스타일 정의

---

BEM

BEM(Block Element Modifier)
블록(block), 요소(element), 상태(modifier)로 구분하여 클래스 이름을 작성하는 방식
각 부분을 __와 --로 구분하여 짓게 된다.
어떻게 보일지에 초점을 두기 보단, 어떤 목적인가에 초점을 두어 이름을 짓는다.

Block (블록)

블록은 웹페이지의 독립적인 구성 요소를 의미하며,
헤더, 메뉴, 버튼 등과 같이 재사용 가능한 높은 수준의 컴포넌트를 나타난다

.header {..}
.menu {..}
.button {..}

element(요소)

블록 내부의 구성 요소로, 해당 e3블록의 일부로만 의미를 가지며,BEM에서는 블록과 요소 사이에 __(더블 언더스코어)를 사용하여 연결한다.

.header__tap {..}
.menu__item {..}

Modifier (상태)

블록 또는 요소의 다양한 상태와 변형을 나타나는데 사용한다.
상태 표현할 때 --(더블대시) 을 사용한다.

.header__tap--active {..}
.menu__item--disabled {..}

---

SMACSS

SMACSS (Scalable and Modular Architecture for CSS)
대규모 웹 사이트와 애플리케이션의 CSS를 유지 관리하기 쉽게 만드는 데 초점을 맞춘 CSS 설계 방법론이다.
SMACSS의 핵심은 CSS를 여러 카테고리로 나누어 관리 및 확장성을 높이는 것을 목표로 한다.

SMACSS는 작성할때 CSS를 비슷한 종류끼리 모아 5가지 스타일로 나누고
각 유형에 맞는 선택자와 작명법, 코딩기법을 제시한다.

SMACSS의 주요 구성 요소

• 기본 (Base)
  기본 스타일은 초기값 설정을 의미하며, reset.css 같은 초기화 파일도 이에 포함된다.
  대부분 하나의 요소(elements)로 이루어져있으며 속성 선택자, 가상 클래스 선택자, 후손 선택자, 자식 선택자 등으로 구성되어 있다.
  기본 스타일은 클래스 또는 아이디 선택자를 포함하지 않는다.
  기본 링크 스타일, 기본 폰트 스타일과 바디의 배경 선언 등이 이에 포함된다.
  *기본 스타일을 정의할때 !impotrtant는 허용하지 않는다.

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

• 레이아웃 (layout)
  주요 레이아웃 컴포넌트를 스타일링 하는데 사용되며, 헤더, 사이드바, 컨텐츠 영역 등 페이지의 주요 섹션을 대상으로 한다.
  주요 컴포넌트는 id, 하위 컴포넌트는 class를 사용하여 스타일을 작성한다.
  클래스명을 사용할 때는 접두사로 l-, layout- 를 사용해야 합니다.
  ex) l-fixed : 유무에 따라 가변 폭으로 할지 고정 폭으로 할지 결정하는 레이아웃

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

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

• 모듈 (module)
  재사용 가능한 모듈 또는 컴포넌트를 스타일링하며, 버튼, 카드, 위젯 같은 UI요소가 해당된다.
  모듈은 독립적으로 존재할 수 있도록 설계해야하며, 재사용을 위해 css선택자로 id,엘리먼트 선택자를 피하고 class명을 사용해야한다.

 .module { ... }
  .module-name { ... }
  .module-number { ... }

• 상태 (state)
  요소의 상태 변화를 표현하고 접두사 is-, s- 를 사용해야 한다.
  특정 모듈의 경우에는 모듈 이름을 뒤에 붙인다.

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

• 테마 (theme)
  테마 스타일은 전반적인 표현과 느낌을 결정하는 색깔이나 이미지를 정의한다.
  테마 스타일 규칙만 따로 모아서 분리하면 테마를 쉽게 교체하고 재정의 할 수 있다.
  적용 범위가 넓은 테마의 경우에는 접두사로 "theme-"를 붙여서 혼란을 피해야한다.

/*공통 root 역할을 하는 main.css*/
.box {
	border: 1px solid; //border type 만 공통으로 설정해놓고
 }
 
 /*테마 별로 재정의 blue theme.css*/
.box {
	border-color: blue;
 }

SMACSS 사용시 지켜야할 유의사항

1. 파생된 css 셀렉터 사용금지
2. id 셀렉터 사용금지
3. !important 사용금지
4. 단어는 하이픈(-)으로 구분
5. 다른 개발자들이 이해할 수 있도록 class 이름을 의미있게 지어야함

---

마무리

css를 익히는 과정에서 방법론에 대해 배워봤는데 이 외에도 다양한 방법론이 존재한다.
모든 방법론이 결코 정답은 아니며, 프로젝트 성향,팀의 요구사항에 따라 가장 잘맞는 방법을 선택하는게 우선시 되어야하며 어느 방법론으로 작성하는것이 좋을지 빠르게 생각해내는게 능력중 하나다!