객체 지향 CSS(OOCSS, Object Oriented CSS)

애플리케이션의 규모가 커질수록 CSS를 유지하는 게 어려워질 수 있다. 간결하고 유지하기 쉬운 CSS를 작성하는 것이 필요하다.

객체 지향 CSS는 CSS 작성을 위한 방법론 중에 하나다. SMACSS, BEM과 같은 다른 방법론과 결합하여 사용할 수도 있다. Nicole Sullivan이 2008년도에 제안하였다. Java와 Ruby의 객체 지향 프로그래밍의 디자인의 원리를 적용하여 CSS의 재사용성, 확장성, 유지보수성을 향상시키고자 하였다. 단일 책임 원칙, 관심사의 분리 원칙과 같은 OOP의 컨셉을 적극적으로 도입하였다. 페이지에서 반복적으로 사용되는 비쥬얼 패턴을 객체로 정의하고 사용하는 것이 목적이다.

OOCSS에는 두 가지 원칙이 있다.

1. 구조와 외형을 분리 (Seperation of structure and skin)
2. 컨테이너와 컨텐츠를 분리 (Seperation of container and content)

 

OOCSS의 첫 번째 원칙 :: 구조와 외형을 분리

구조는 요소의 크기나 위치와 같이 사용자에게 보이지 않는 것을 의미한다. 레이아웃을 담당한다.

• 높이, 너비, 마진, 패딩, 포지션

 

반면 외형은 요소의 시각적인 속성을 의미한다. 레이아웃이 어떻게 보여질지를 정의한다.

• 컬러, 폰트, 쉐도우, 백그라운드

 

OOCSS 적용 전후 비교

// OOCSS 적용 전
.button-1 {
  width: 120px;
  height: 60px;
  border: 1px solid blue;
  color: blue;
}
.button-2 {
  width: 120px;
  height: 60px;
  border: 1px solid green;
  color: green;
}

// OOCSS 적용 후
.button-1 {
  border: 1px solid blue;
  color: blue;
}
.button-2 {
  border: 1px solid green;
  color: green;
}
.button {
  width: 120px;
  height: 60px;
}

 

HTML

<button class="button-1 button">버튼1</button>
<button class="button-2 button">버튼2</button>

 

OOCSS의 두 번째 원칙 :: 컨테이너와 컨텐츠를 분리

컨테이너는 부모 요소고 컨텐츠는 컨테이너에 속한 자식 요소다. 컨테이너에는 대개 구조 클래스가 적용된다. 컨테이너와 컨텐츠의 분리를 위해서 child selector는 사용하지 않도록 한다. 또한 고유한 요소에 고유한 클래스명이 사용되어야 한다.

 

HTML

<section class="section">
  <h2 class="section-title">섹션 타이틀</h2>
  ...
</section>

 

OOCSS 적용 전후 비교

// OOCSS 적용 전
.section {
  ...
}
.section h2 {
  ...
}

// OOCSS 적용 후
.section {
  ...
}
.section-title {
  ...
}

 

OOCSS의 장단점

장점

1. 코드 재사용으로 CSS 파일 크기가 줄어든다.
2. HTML 마크업을 추가하거나 재배치해도 CSS 영향을 고려하지 않아도 되서 유지보수가 편하다.

단점

1. 클래스를 분리하기 때문에 요소에 적용되는 클래스 개수가 많다.
2. 작은 프로젝트에서는 불필요할 수 있다.
3. 적용하려면 러닝커브가 있는 편이다.