OOCSS란?

오호·2021년 12월 26일

CSS

css

목록 보기

2/4

CSS 설계에는 다양한 기법들이 존재하는데 그 중에서도 객체 지향 CSS라고 불리는 OOCSS에 대해서 알아보자.

1. OOCSS

Object Oriented CSS(객체 지향 CSS)의 약어로 니콜 설리번이 제창했다.

강조하는 내용은 다음과 같다.

자유로운 조합이 가능한 모듈의 집합을 만든다.

이 모듈들을 조합해 페이지를 완성한다.

재사용성이 강화된 모듈 사용이 가능해지므로 이에 따라 신규 페이지를 만들 때도 CSS를 추가로 만들 필요가 없어진다.

🔥 OOCSS를 실행하기 위한 큰 두 가지 원칙은!

스트럭처와 스킨 분리
컨테이너와 콘텐츠 분리

2. 스트럭처와 스킨 분리

기본적으로 스트럭처 즉, 구조라고 불리는 속성들은 다음과 같다. 스트럭처 : width height padding margin

스킨 즉, 화면이라고 불리는 속성들은 다음과 같다.
스킨 : color font background box-shadow 등등

⚡️ 간단하게 말하면 structure는 공통되는 부분, skin은 공통되지 않는 부분 이라고 생각할 수 있겠다.

유즈케이스)

<main id="main">
  <button class="btn-general">기본 버튼</button>
  <button class="btn-warning">취소 버튼</button>
</main>

#main .btn-general{
  display: inline-block;
  width: 300px;
  background-color: #e25c00;
  color: #fff;
  /* 생략.. */
}
#main .btn-warning{
  display: inline-block;
  width: 300px;
  background-color: #f1de00;
  color: #222;
  /* 생략.. */
}

위 예시는 스트럭처와 스킨을 분리하지 않은 CSS이다. 동일하게 반복되는 width, display등 두번 작성해야 하는 문제가 있다.

이를 분리시켜보면,

<main id="main">
  <button class="btn general">기본 버튼</button>
  <button class="btn warning">취소 버튼</button>
</main>

스트럭처에 해당하는 btn클래스와 스킨에 해당하는 general, warning클래스를 따로 작성할 수 있다.

/* 스트럭처 */
#main .btn{
  display: inline-block;
  widht: 300px;
}

/* 스킨 */
#main .general{
  background-color: #e25c00;
  color: #fff;
}

#main .warning{
  background-color: #f1de00;
  color: #222;
}

이렇게 간단하게 코드의 중복을 제거할 수 있다.

3. 컨테이너와 콘텐츠 분리

'컨테이너와 콘텐츠 분리'는 CSS의 기본 법칙 중 '특정한 컨텍스트에 지나치게 의존하지 않는다' 라는 법칙과 연관이 있다고 할 수 있다.

두번째 챕터에서는 두 버튼이main이라는 id를 가진 컨테이너 요소에 지나치게 의존성을 가지고 있다.

따라서 #main이 아닌 다른 태그나 다른 페이지에서 사용하려고 한다면 또 다시 비슷한 CSS를 작성해야만 한다.

즉, 공통된 css를 작성할 땐 최대한 의존성을 가지지 않도록 작성하는 것이 현명하다.

/* 스트럭처 */
.btn{
  display: inline-block;
  widht: 300px;
}

/* 스킨 */
#main .general{
  background-color: #e25c00;
  color: #fff;
}

#main .warning{
  background-color: #f1de00;
  color: #222;
}