CSS방법론 SMACSS (Scalable and Modular Architecture for CSS)

SMACSS는 기본스타일(Base), 레이아웃스타일(Layout), 모듈스타일(Module), 상태스타일(State), 테마스타일(Theme)로 총 5가지로 나뉩니다. 이렇게 함으로 규칙과 패턴이 생기고 스타일을 이해하기 쉽게 정리합니다.

 

기본스타일(Base)

초기 설정을 말하며 reset.css도 포함됩니다.
아이디나 클래스 선택자를 포함하지 않으며 !important는 허용하지 않습니다.

 

body, p, table, form, fieldset, legend, input, button ... {
    margin: 0;
    padding: 0;
}

 

레이아웃스타일(Layout)

여러 요소를 배치하고 구별하는데 사용합니다.
주요 컴포넌트는 아이디, 하위 컴포넌트는 클래스를 사용합니다.
클래스명을 사용할때는 접두사로 l-, layout- 을 사용합니다.

 

// 주요 요소
#header {
    width: 400px;
}
#aside {
    width: 30px;
}
// 하위 요소
.l-width #header {
    width: 600px;
    padding: 10px;
}
.l-width #aside {
    width: 100px
}

 

모듈스타일(Module)

버튼, 배너등 페이지에서 재사용을 위한 스타일입니다.
독립적으로 존재할 수 있으므로 재사용을 위해 id 대신 class를 사용합니다.
엘리먼트 selector를 사용한다면 child selector를 사용합니다.

 

.box { ... }
.box-name { ... }
.box-items { ... }

 

상태스타일(State)

요소의 상태 변화를 나타내는 스타일입니다.
클래스로 지정하며 접두사로 is-, s- 를 사용합니다.

 

.is-error { ... }
.is-hidden { ... }
.is-disabled { ... }

 

테마스타일(Theme)

색이나 이미지를 사용자가 선택하여 재선언할 수 있습니다.

 

/* main.css */
.box {
  border: 1px solid;
} 

/* theme.css - main.css 뒤에서 읽도록 적용 */
.box {
  border-color: blue;
}