OOCSS(Object Oriented CSS)
중복을 최소화 하고 캡슐화를 원칙으로 하는 방법론이다.
- 컨테이너와 컨텐츠를 분리
<div class="header common-width">Header</div>
<div class="footer common-width">Footer</div>
.header{
position: fixed;
top: 0;
}.footer{
position: absolute;
bottom: 0;
}.common-width{
width: 700px;
margin: 0;
}
- 구조와 모양을 분리 또는 결합
<div class="btn skin tel">tel</div>
<div class="btn skin">email</div>.btn{공통 스타일 정의}
.skin{공통 스타일 정의}
공통된 부분을 찾아 어디서나 재활용 할수 있다는 장점이 있다. 반면에 다중 클래스 사용으로 유지보수의 어려움과 가독성이 떨어질수 있다.
SMACSS(Scalable Modular Architecture CSS)
범주화(categorization)로 패턴화 하고자 하는 방법론이다.
기본(base), 레이아웃(layout), 모듈(module), 상태(state), 테마(theme) 다섯가지의 범주를 제시한다.
Base : 스타일 초기화 (reset.css)
body, p, table, form, fieldset, legend, input, button ... {
margin: 0;
padding: 0;
}layout : 주요 요소(id), 하위 요소(class)로 구분하고 접두사를 사용
// layout => l-// 주요 요소 ()
#header {
width: 400px;
}
#aside {
width: 30px;
}// 하위 요소
.l-width #header {
width: 600px;
padding: 10px;
}
.l-width #aside {
width: 100px
}
module : 재사용 가능한 구성요소
.stick { ... }
.stick-name { ... }
.stick-number { ... }state : 요소의 상태 변화를 표현하고 접두사 사용
.is-error { ... }
.is-hidden { ... }
.is-disabled { ... }theme : 사용자가 선택 가능 하도록 스타일을 재선언하여 사용
// base.css
.header {
background-color: green;
}// theme.css
.header {
background-color: red;
}
BEM (Block Element Modifier)
블록(block), 요소(element), 상태(modifier)로 구분하여 클래스 작성하며 엄격한 네이밍 규칙을 가진다.
block : 재사용 가능한 영역(header, footer, navigation…), 하나의 단어를 사용하되 길어질 경우 (-)를 사용
.header { ... }
.block { ... }element : 블록의 내부 구성을 표현, 두개의 underscores( _ )로 표기
.header { ... }
.header__link { ... }
.header__tap { ... }
.header__tap__item { ... }modifier : 요소의 상태를 표현, 두개의 hyphen(-)로 표기
.header--hide { ... }
.header__tap--big { ... }
.header__tap--big { ... }코드를 직관적으로 파악할수 있지만 이름이 길고 복잡해 질수 있다.
위에서 살펴본 내용들은 CSS코드를 무질서 하게 작성 할 때 오는 문제점들을 보완 하고자 일관되고 체계적인 방법을 제시하는 방법론일 뿐이다. 특정 방법론을 선택하고 강제하여 사용하는 것은 명확한 장점과 함께 단점도 가져 가는 것이다. 방법론들의 의미를 잘 이해하고 적절하게 응용하여 CSS 체계를 만들어 사용하는 것이 좋을것 같다.
