안녕하세요, 일루넥스 개발팀 정민지입니다.
오늘은 지난 번 다루었던 SMACSS에 이어 OOCSS에 대해 소개해보려고 합니다.

OOCSS란?

OOCSS(Object Oriented CSS)는 Nicole Sullivan에 의해 개발된 프레임워크로,
CSS를 모듈 방식으로 코딩하여 중복을 최소화하는 기법입니다.

1. OOCSS의 원칙

OOCSS의 작성 원칙은 다음 두 가지입니다.

구조와 외형의 분리(Separate structure and skin)
컨테이너와 내용의 분리(Separate container and content)

1.1 구조와 외형의 분리

기본적인 구조와 반복 정의되는 외형은 따로 정의합니다.

구조: width, height, padding, margin, border
외형: color, border-color, font-color, background-color

#button {
  width: 200px;
  height: 50px;
  padding: 10px;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#box {
  width: 400px;
  overflow: hidden;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

위의 세 요소는 각각 독자적인 스타일이 있고, 재사용할 수 없는 ID 선택자를 사용하고 있습니다.
또한 각 요소에 공통 스타일도 다수 존재합니다.

이를 OOCSS의 원칙에 따라 공통 스타일을 추출하면 다음과 같이 변경할 수 있습니다.

이제 모든 요소는 ID가 아닌 클래스를 사용합니다. 

또한 공통 스타일의 경우 `.skin`으로 묶였고, 불필요한 반복이 사라졌습니다.

1.2 컨테이너와 내용의 분리

위치에 의존하지 않는 스타일 정의로 구조적 상황에 관계 없이 문서 어느 곳에나 재사용 가능합니다.
태그에 스타일을 지정하는 것이 아닌 클래스명을 부여하고 스타일을 지정하기 때문에, 태그가 변경되어도 css를 바꿀 필요가 없습니다.

<!-- Bad -->
<h2>...</h2>
h2{ font-size: 16px; }

<!-- Good -->
<h2 class="title">...</h2>
<span class="title">...</span>
.title { font-size: 16px; }

어디에서나 재사용이 가능한 클래스 기반의 모듈 구축

1.3 OOCSS Style

<button type="button" class="btn-base cart">장바구니</button>
<button type="button" class="btn-base but">바로구매</button>

/* 버튼 구조 ; 공통적인 구조 지정 */
.btn-base { ... }

/* 버튼 외형 */
.cart { ... }
.buy { ... }

2. OOCSS 가이드라인

요소 선택자 피하기(즉, .sidebar h3 같은 선택자 사용하지 않기)
ID에 스타일 적용 피하기
요소에 클래스 붙이는 것 피하기 ex) div.header, h1.title
!important 사용 피하기
CSS Lint를 사용하여 CSS 검사하기
CSS 그리드 사용하기

3. OOCSS 장단점

장점

1. 더 빠른 웹사이트

많은 CSS 코드가 재사용되면서 코드의 길이가 줄어들게 됩니다. 즉, CSS 파일 크기가 작어져 속도를 향상시킬 수 있습니다.

2. 유지보수가 쉬운 스타일시트

새로운 요소를 추가할 때, 기존 모듈을 통해서 재사용이 가능하고 쉽게 확장 가능하여 유지보수성이 높아집니다.

단점

1. 복잡해지는 HTML

다중으로 클래스를 사용하기 때문에 가독성이 떨어질 수 있습니다.
이를 보완하기 위해 OOSass(OOCSS + Sass)와 같은 방법이 제시되기도 했습니다.

마치며

지금까지 CSS 방법론 중 OOCSS에 대해 알아보았습니다.
읽어주셔서 감사합니다.

CSS 방법론 – OOCSS

CSS 방법론 - OOCSS