about CSS Architecture

01.08. 2016

book-covers

* SMACSS (Scalable & Modular Architecture for CSS)

SMACSS는 CSS를 5가지로 분류/범주화하여 작명규칙 등 스타일 가이드를 제시한 방법론이다.

  • Bass : 기본스타일(Reset, Default, Variables, Mixins) 등 ID, class 셀렉터의 정의 없이 기본 스타일 구축
  • Layout
    • 페이지 분할 요소 스타일 구축
    • l- ,layout-, grid- 등의 접두사(prefix)를 사용하여 클래스 명을 접미사(suffix)로 조합하여 구축
  • Module
    • 스타일 반복, 재사용을 위한 요소 스타일 구축
    • 위치기반의 클래스명 작명은 지양한다.
  • State
    • 상태를 나타내는 요소 스타일 구축
    • is-, s- 등의 접두사(prefix)를 사용하여 클래스 명을 접미사(suffix)로 조합하여 구축
    • 자바스크립트에 의존적인 요소 스타일 / Layout, Module에 사용이 가능한 요소 스타일
  • Theme : 사이트의 전반적 look and feel 제어

* OOCSS (Object Oriented CSS)

OOCSS는 2가지 범주 내에서 독립적인 요소로 추상화할 수 있는 반복패턴을 정의하여 사용하자는 객체 지향 스타일 가이드를 제시한 방법론이다.

  • 표현과 구조의 분리 (Separate structure and skin) : CSS를 Positioning / Styling으로 객체화하여 Mix & Match
.position {
  position: relative;
  display: block;
  float: none;
}
.style {
  background: transparent;
  border: none; 
}
  • 컨테이너와 콘텐츠의 분리 (Separate container and content) : DOM 위치에 의존하지 않고 객체의 재사용이 가능한 클래스 기반 모듈 구축
  • 장점 : 코드의 재사용성이 높아진다.
  • 단점
    • 다중클래스를 사용하여 HTML이 복잡해진다.
    • 의미 있는 클래스 이름을 짓기 어렵다.

* OOSass

OOCSS를 토대로 Sass에 적용하는 방법론
(Less, Sass와 같은 CSS 전처리기를 사용하여 OOCSS의 단점을 보완하고 Mixin을 사용하여 코드의 재활용성과 의미 있는 네이밍 등의 장점을 극대화하여 사용할수 있다.)

* BEM (Block Element Modifier)

  • Block : 문단 전체에 적용된 엘리먼트, 또는 엘리먼트를 담고 있는 컨테이너를 말함
.block-name {
  //
}
  • Element : Block 안에서 특정기능을 수행하는 컴포넌트
.block-name__element-name{
  //
}
  • Modifier : Block, Element의 외관/상태를 변화시킨다.
.block-name__element-name--modifier {
  //
}
  • 장점 : 의미있는 클래스 이름의 작명이 가능하다.
  • 단점 : 클래스 이름이 길어진다.

BEM 방법론을 토대로 응용한 사례

.module-function-expand {
	//
	&.statement {
		//
	}
}

* 여러 방법론을 토대로 사용하기 쉽고 효율적으로 자신만의 방법론으로 사용함을 추천한다.

Reference

Was it useful?