CSS Naming - SMACSS, BEM, OOCSS
SMACSS (Scalable and Modular Architecture for CSS)
SMACSS는 스타일을 다섯가지로 분류하고 각 유형에 맞는 선택자(selector)와 작명법(naming convention), 코딩 기법을 제시 함
- 기본 (BASE)
- 레이아웃 (Layout)
- 모듈 (Module)
- 상태 (States)
- 테마 (Theme)
폴더 구조 예시
1
2
3
4
5
6
7
8
9
| SCSS
ㄴ 서비스명.scss (import 구문으로 이루어진 메인 파일)
ㄴ common
ㄴ _reset.scss
ㄴ _variables.scss
ㄴ import
ㄴ _페이지명.scss
ㄴ lib
ㄴ _외부라이브러리.scss
|
0. 공통 유의사항
- ID 사용 금지
- !important 사용 금지
- class는 작업자가 이해할 수 있도록 의미있게 작명
1. 기본(Base)
- 기본 스타일(reset, variables, mixins 등등)
2. 레이아웃 (Layout)
- 페이지의 레이아웃과 관련된 스타일을 정의(EX> header, footer 등등)
- 선택자는 ID나 CLASS를 사용(단 ID는 신중하게 사용)
- CLASS명 앞에 접미사 ‘l-‘을 붙여서 작명
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| #content {
width: 80%;
float: left;
}
#aside {
width: 20%
}
.l-fixed #content {
width: 600px;
margin-right: 10px;
}
.l-fixed #aside {
width: 200px
}
|
3. 모듈 (Module)
- Block, Element, Module과 관련된 스타일 정의
- 스타일 재 사용을 위한 요소 (EX> nav, widget, icons, tables등등)
- 선택자는 재사용 가능 요소이기 때문에 ID와 element의 사용을 금한다. (단 element에 한정하여 자식 선택자를 사용)
1
2
3
| <div class="forder">
<span>Forder Name</span>
</div>
|
1
2
3
4
| .folder > span {
padding-left: 20px;
background: url(icon.png);
}
|
4. 상태 (State)
- 접두사 ‘is-‘를 붙여 작명
- 상태를 나타내는 스타일을 정의 (EX> is-error / is-on)
- 다른 스타일에 덧붙이거나 단독으로 사용 특정 모듈에 한정되는 상태의 경우 모듈의 이름을 뒤에 붙인다. (EX> is-nav-on)
1
2
3
4
| <div class="btn_area">
<a href="#" class="btn btn_good is-active">좋아요버튼</a>
<a href="#" class="btn btn_bad">나빠요버튼</a>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| .btn {
display: inline-block;
background:#ddd;
border-radius:4px;
}
.btn.is-active{
background:#43f837;
}
.btn.is-hidden {
display: none;
}
|
5. 테마 (theme)
- 적용 범위가 넓은 테마는 접두사 ‘theme-‘를 접두어로 붙여 구분한다.
- 사용자가 테마를 선택할 수 있는 경우를 염두에 두고 색상, 이미지 등 look & feel 제어
1
2
3
4
5
6
7
| .mod {
border: 1px solid;
}
.mod.theme-default {
border-color: blue;
}
|
BEM (Block, Element, Module)
- BEM은 Block Element Modifier의 약자
- ID는 사용할 수 없고, 오직 class명만 사용 (.header__navigation‐‐secondary과 같은 class를 사용)
Block
- Block은 문단 전체에 적용된 element 또는 element를 담고 있는 컨테이너를 말함
(EX> logo, login form, menu 등등)
참고
WIT: CSS방법론 - SMACSS, BEM, OOCSS
레진 기술 블로그 - 레진 챌린지 CSS 개발 후기
