CSS SMACSS 방법론

2020-11-11

SMACSS(스메스)는 대규모 프로젝트를 위한 스타일링 지침이다. 스타일을 다섯가지로 분류하고 각 유형에 맞는 선택자(selector)와 작명법(naming convention), 코딩 기법을 제시한다.

스타일의 다섯가지 유형

기초 (Base)
레이아웃 (Layout)
모듈 (Module)
상태 (States)
테마 (Theme)

기초 스타일

흔히 말하는 reset 스타일(Reset, Default, Variables, Mixins)을 말한다.
기본 스타일에는 !important를 쓸 필요가 없다.

html, body, form { margin: 0; padding: 0; }
input[type=text] { border: 1px solid #999; }
a { color: #039 }
a:hover { color: #03C; }

레이아웃 스타일

레이아웃과 관련된 스타일을 정의한다.
클래스명에 suffix “l-“를 붙인다.
재사용성에 따라 큰 레이아웃 스타일과 작은 레이아웃 스타일로 구분된다.

큰 레이아웃 스타일

#header, #article, #footer {
    width: 960px;
    margin: auto;
}

작은 레이아웃 스타일

960.gs와 같은 레이아웃 프레임 워크를 쓸 경우 아이디가 아니라 클래스를 매겨 요소를 재사용한다. 아이디를 매기기 전에 해당 요소의 재사용성을 숙고하여야 한다. 재사용성이 증가하면 코드를 중복하지 않아도 되고, 선택자의 우선 순위 점수를 줄일 수 있기 때문에 레이아웃을 확장하기 좋다.

모듈 스타일

모듈 관련 스타일. 스타일 재사용을 위한 요소(네비게이션 바, 말풍선, 대화 상자, 위젯 등)이다.
Block, Element, Module
재사용을 하기 위해서 id 셀렉터와 element를 사용하지 않는다. element 셀렉터를 사용해야 한다면, .box > span 처럼 child 셀렉터를 사용한다.

.pod {
    width: 100%;
}
.pod input[type=text] {
    width: 50%;
}
.pod-constrained input[type=text] {
    width: 100%;
}
.pod-callout {
    width: 200px;
}
.pod-callout input[type=text] {
    width: 180px;
}

상태별 스타일

상태를 나타내는 스타일. (펼침과 접힘, 성공과 실패 등)
Hidden, expend, active, hover 등의 상태에서 사용한다.
선택자
- 클래스 선택자 하나
- !important를 사용할 수도 있다(최소화 할 것)
- 같은 모듈에 두 상태를 적용하지 말것
작명법
- Class명에 suffix “is-“ 또는 “s-“를 붙여서 사용한다.
- 특정 모듈에 한정된 상태는 모듈 이름도 그 뒤에 붙인다. (ex. is-tab-active)
유의: 전역 상태 스타일은 모듈 상태 스타일과 구분한다. 모듈 상태 스타일은 모듈 스타일과 병기한다.

테마 스타일

사이트 전반적 look and feel을 제어한다.
색상이나 이미지를 불변하는 스타일과 분리하여 기존 스타일을 재선언후에 사용할 수 있다.
적용범위가 넓은 테마는 theme- suffix를 붙여 사용한다.
i18n 등을 염두에 두고 글꼴도 사용자가 변경할 수 있게 하기 위해 글꼴 스타일도 따로 분류할 수 있다. 다만 굳이 글꼴별로 클래스를 만들 필요는 없다.

/* 모듈 스타일 */
.mod {
    border: 1px solid;
}

/* 테마 스타일 */
.mod {
    border-color: blue;
}

유의사항

파생된 CSS 셀렉터는 사용할 수 없다.
ID 셀렉터를 사용하지 않는다.
!important를 사용하지 않는다.
Class 이름은 의미있게, 다른 개발자가 이해할 수 있도록 선언한다.

REFERENCE