OOCSS (Object Oriented CSS)

구조와 외형을 분리하고 컨테이너와 내용을 분리하는 방법

장점

• 재사용 가능
• 동일한 클래스 -> 동일한 스타일
• 클래스 재사용으로 코드 양 줄어든다

단점

• 공통된 클래스가 많으므로 수정 발생시 다 바뀜
• 멀티 클래스 많아짐에 따라 유지보수 어려움
• 코드 가독성 떨어짐

=> 부트스트랩 같은 느낌

구조와 외형 분리

구조 : width, height, border, padding, margin....
외형 : color, border-color, font-color, background-color...

html

<!--기존 방식-->
  <a class=”instagram_btn instagram_skin”>Instagram</a>
  <a class=”facebook_btn facebook_skin”>Facebook</a>

<!--OOCSS-->
  <a class=”btn skin instagram”>Instagram</a>
  <a class=”btn skin facebook”>Facebook</a>

css

.btn{
	공통 버튼 스타일 정의
}
.skin{
	공통 스킨 스타일 정의
}

컨테이너와 내용 분리

• 위치에 의존 x
• 어떤 태그라도 동일한 외형 제공
• 어디에서나 재사용 가능

html

<div class="header common-width">Header</div>
<div class="footer common-width">Footer</div>

css

.header {
    position: fixed;
    top: 0;
}
.footer {
    position: relative;
    bottom: 0;
}
.common-width {
    width: 800px;
    margin: 0;
}

---

BEM (Block Element Modifier)

아이디를 사용하지 않고 클래스명만 사용하며 전체 구조를 block(전체를 감싸고 있는 블록 요소),
element(내부 요소)
modifier(기능/수정)으로 정의하고
block과 element는 더블 언더스코어로,
modifier는 더블 하이픈으로 연결하여 정의하는 방법론

장점

• 직관적인 클래스 명으로 마크업 구조 파악 쉬움

단점

• 클래스명 길다
• 기능이 추가되면 클래스명 재수정이 불편하다

block

.header {..}
.block {..}

element

.header {..}
.header__tap {..}
.header__content {..}
.header__logo__button {..}

modifier

.header--hide {..}
.header__tap--big {..}
.header__content--disabled {..}

---

SMACSS (Scalable and Modular Architecture for CSS)

5개의 구분된 카테고리로 CSS 코딩 기법 제시하는 방법

장점

• 클래스명으로 예측 쉽다
• 클래스 재사용 많아 코드 용량 줄어듦
• 확장의 용이

단점

• 카테고리 나누는 기준 모호
• css사용이 번거롭다
• 잘못 사용하면 의도와 달리 더 번거로워진다

Base - 기본 규칙

각 브라우저의 기본 스타일 (default.css, reset.css), 요소 element 스타일의 기본 정의 값

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

Layout - 레이아웃 규칙

큰 틀의 레이아웃, 요소를 배치, 구별하는데 적용
주요 컴포넘트 : header, footer, aside, container, content 등
하위 컴포넘트 : list, item, form 등
클래스명은 접수사 i-, layout-명시

/* layout => l- */

/* 주요 요소 작성 */
#header {
    width: 400px;
}
#aside {
    width: 40px;
}

/* 하위 요소 작성 */
.l-width #header {
    width: 650px;
    padding: 10px;
}
.l-width #aside {
    width: 100px
}

Module - 모듈 규칙

페이지에서 재사용 가능한 요소 : 버튼, 배너, 아이콘, 박스 요소 등
각 모듈은 독립성을 가지게 스타일 선언 : 재사용이 가능하게 id, 태그 선택자는 사용하지 않음.

.stick { ... }
.stick-name { ... }
.stick-number { ... }

State - 상태 규칙

요소의 상태변화를 표현하는 요소 : 툴팁, 아코디언 등
active나 disable 등이며 suffix "is-"나 "s-"를 붙여서 사용
모듈과 레이아웃 모두 적용 가능

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

Theme - 테마 규칙

사용자가 선택 가능하도록 스타일을 재선언하여 사용.
Theme는 전반적인 Look and feel을 정의하며 suffix "theme-"를 붙인다.

/* base.css */
.header {
    background-color: red;
}
/* theme.css */
.header {
    background-color: orange;
}