OOCSS

Object Oriented CSS 의 약자
레고처럼 자유로운 조합이 가능한 모듈의 집합을 만들고, 이를 조합해 페이지를 만든다.
그리하여 신규 페이지를 만드는 경우에도 추가 CSS 생성작업을 할필요가 없다.
다른 기법들에 영향을 주었으나 현재는 이것만으로 설계하기엔 무리가 있음.

원칙 1. 확장성 확립 (구조/화면)

= 스트럭처(구조) / 스킨(화면) 분리

[1] 스트럭처 : 공통된 부분
ex) width, height, padding, margin

[2] 스킨 : 공통되지 않은 부분
ex) color, font, background, box-shadow, text-shadow

//스트럭처 (공통구조)
#main .btn {
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 20px 10px;
  box-shqdow: 0 3px 6px rgba(0,0,0,.16);
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
}

//스킨 (개별 상세)
#main .general {
  background: #e25c00;
  color: #fff;
}
#main .warning {
  background: #f1de00;
  color: #222;
}

원칙 2. 의존성 제거 (영역/모듈)

= 컨테이너(영역)와 콘텐츠(모듈) 분리

#main .btn 
#main .general 
#main .warning 
//보단..
.btn 
.general 
.warning 

• 관련 공식문서
  http://oocss.org/
  https://www.slideshare.net/stubbornella/object-oriented-css