CSS 패턴 이야기 - BEM, SMACSS, OOCSS

 

1. SMACSS ( Scalable and Modular Architecture for CSS )

: CSS를 [기본(base), 레이아웃(layout), 모듈(module), 상태(state), 테마(theme)]5가지를 범주화로 패턴화 하고자 함 = categorization

 

1. Base.css [= reset.css]

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

2. layout : 주요소(id) + 하위요소(class)

예 : 2개의 레이웃 스타일을 사용할경우 [ 1.유연한레이아웃 2.고정적레이아웃 ]

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

3. module : 재사용가능한 요소

.title{...}
.title-sub{...}
.title-pop{...}

4. state : 요소의 상태변화를 표현

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

// another Ex
.tab {
    background-color: purple;
    color: white;
}

.is-tab-active {
    background-color: white;
    color: black;
}

5. theme : 선택적으로 스타일 재선언 ( suffix 에 li- 를 붙여서 사용 )

// in module-name.css
.mod {
    border: 1px solid;
}
// in theme.css
.mod {
    border-color: blue;
}

공식사이트 : http://smacss.com/book/type-theme

 

---

 

2. BEM( Block, Element, Modifier ) / 블록, 요소, 수정

1. Block

: 재사용가능한 영역들 [ header, footer, navigation... ] 이며, 종속되지않는 독립적인 하나의 상태.

하나의 단어를 사용하되 길어질경우 -를 사용한다

 

.head{...}
.block{...}

.header-navigation{...}
.header-popup{...}

 

2. Element

: Block의 내부 구성을 표현, 두개의 underscores로 표기하며 속성을 피해서 사용

"블록이름__요소이름" 으로 표기

 

.header { ... }
.block__elem { color: #042; }

// NOT GOOD
.block .block__elem { color: #042; }
div.block__elem { color: #042; }

 

3. Modifier : 변할수 있는 블럭이나 요소의 상태 두개의 hyphen(--)으로 표기

"블록이름--상태", "블록이름__요소이름--상태" 으로 표기

 

.block--hidden { ... }
.block__elem--mod { ... }

 

단점 : 코드를 직관적으로 파악하기 좋으나 이름이 길고 복잡해질수있음

 

공식사이트 : http://getbem.com/

 

---

 

3. 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{공통 스타일 정의}

단점 : 재활용성 높아짐, 다중클래스로 인한 유지보수의 어려움과 복잡도 상승

공식사이트 : http://oocss.org/

 

---

* 결론

* 3가지 방법론이 지향하는 점

 

1. 코드의 재사용성

2. 쉬운 유지보수(효율성)

3. 확장가능성

4. 구조, 스킨 분할

 

* 3가지 방법론이 지양하는 점

1. 의존적인 스타일 [ .class p{...} ]

2. Tag 직접 접근 [ div.class{...} ]

 

** 참조

https://medium.com/@jinminkim_50502/css-bem-smacss-oocss-9e4d6beb0a38

https://wit.nts-corp.com/2015/04/16/3538