CSS 방법론이란? OOCSS, BEM, SAMCSS, Atomic CSS

소개

CSS방법론들은 모듈성, 확장성, 유지보수성을 고려한 설계 방법들을 제안하고 있습니다. 다양한 CSS방법론이 있지만 CSS방법론에서 추구하고자 하는 모습은 아래와 같습니다.

코드의 재사용성을 높이자.
쉽게 유지보수 하자.
확장 가능하게 하자.
클래스명 만으로도 무슨 의미인지 예측 가능하도록 하자.

이는 CSS의 규모가 확장되고 프로젝트의 규모가 커질수록 관리하기 어려운 CSS를 관리하기 수월하게 하고자 하는 노력이며, 방법론은 상황에 맞춰 다양한 모습으로 변형될 수 있으며 유연하게 여러 방법론을 함께 사용할 수 있습니다.

OOCSS(Object Oriented CSS)

OOCSS는 Object Oriented CSS의 약자이며, 모듈 방식으로 다양한 스타일 규칙 전체에서 동일한 속성의 중복을 줄이는 것입니다. 객제지향의 CSS방법론으로, OOP(Object-oriented programming)의 일반적인 의미에서 결합도 낮추기(decoupling), 단일 책임의 원칙(single responsibility principle), 캡슐화(encapsulation)를 강조하는 방법론입니다.

OOCSS 원칙

OOCSS 방법론은 스타일의 특징(feature)에 따라 범주를 분리하여 구조적으로 선택자들을 적용할 수 있게합니다.

이를 위해 OOCSS의 두가지 원칙은 아래와 같습니다.

표현과 구조의 분리(Separate structure and skin)
표현은 시각적 속성(colors, fonts, shadows, gradients 등)을 얘기하며, 구조는 (width, height, padding, margin 등) 요소의 크기 및 위치를 말합니다.

.btn {
  width: 100px;
  padding: 10px;
}

.btn-danger {
  color: white;
  background-color: red;
}

컨테이너와 콘텐츠의 분리(Separation of Container and Content)

컨테이너란 스타일의 적용 범위를 제한하는 범주이며, 내용물이란 컨테이너로 인해 제한된 스타일의 범주를 말합니다.

.header {
  /* header 속성 */
}

.list {
  /* list 속성 */
}

<header class="header>
  <ul class="list>
    <li>header 안에 list</li>
  </ul>
</header>

네이밍 규칙

OOCSS의 네이밍 규칙은 .element .element-* 입니다.

이름은 소문자 라틴 문자로 작성됩니다.
id 선택자를 사용하지 않습니다.
단어는 하이픈 (-) 으로 구분됩니다.

/* button basic style */
.btn {
  ...
}
 
/* button size style */
.btn-small {
  ...
}
.btn-medium {
  ...
}
.btn-large {
  ...
}
 
 
/* button color style */
.btn-blue {
  ...
}
.btn-dark-blue {
  ...
}
.btn-dark-grey {
  ...
}
.btn-salmon {
  ...
}
.btn-orange {
  ...
}
.btn-mint {
  ...
}
.btn-pink {
  ...
}
.btn-purple {
  ...
}
.btn-yellow {
  ...
}
.btn-white {
  ...
}

OOCSS 장단점

장점

확장성
OOCSS를 사용하면 각 요소를 고려하지 않고 여러 요소를 자유롭게 혼합하고 다시 적용 할 수 있습니다.
따라서 한 프로젝트에서 다른 개발자로 프로젝트가 전달 될 때마다 CSS를 더 많이 쌓는 대신에, 프로젝트의 신규 사용자는 이전에 이미 추상화 한 것을 다시 사용할 수 있습니다.
재사용성과 속도
CSS 파일은 웹 사이트가 복잡 해짐에 따라 기하 급수적으로 확장되는 경우가 있습니다. 특이성은 중요하지만 CSS 파일에는 필요한 것보다 더 많은 정보가 포함되는 경우가 많습니다. OOCSS는 DRY(Don't Repeat Yourself)에 입각하여, CSS의 재사용성과 효율 및 속도를 향상시킬 수 있습니다.

단점

클래스(class)의 복잡화
클래스가 생성되는 방식에는 훨씬 더 많은 분리가 있기 때문에 모든 스타일 요소를 설명하기 위해 요소에 여러 클래스를 추가해야 할 수도 있습니다. 이는 마크업을 혼란스럽게 만들 수 있으며, OOCSS가 익숙치 않은 경우 혼동을 줄 수 있습니다.

BEM(Block Element Modifier)

BEM은 사용자 인터페이스를 독립돤 블록으로 나누는 아이디어를 중심으로 구성되었습니다. 이를 통해 복잡한 UI 에서도 쉽고 빠르게 인터페이스를 개발할 수 있으며 복사 및 붙여넣기 없이 기존 코드를 재사용 할 수 있습니다.

BEM 개념

BEM은 Block, Element, modifier로 조합되며, 각각의 의미는 아래와 같습니다.

Block
Block은 재사용 할 수있는 기능적으로 독립적 인 페이지 구성 요소입니다.
이는 환경에 영향을 주어서는 안되며, 여백 또는 위치를 설정하면 안됩니다.

<div class="stick-man">
</div>

.stick-man__head {
  ...
}
.stick-man__arms {
  ...
}
.stick-man__feet {
  ...
}

.stick-man_blue {
  ...
}
.stick-man_red {
  ...
}

.stick-man__head_small {
  ...
}
.stick-man__head_big {
  ...
}

네이밍 규칙

BEM의 네이밍 규칙은 .block-name__elem-name_mod-name_mod-val orblock-name__elem-name--mod-name--mod-val or ETC입니다.

이름은 소문자 라틴 문자로 작성됩니다.
단어는 하이픈 (-) 으로 구분됩니다.
Block 이름은 Element와 Modifier의 네임 스페이스 를 정의합니다 .
Element 이름은 Block 이름에서 밑줄 (__)로 구분됩니다.
Modifier은 Block 또는 Element 이름과 밑줄 (_)로 구분됩니다.
Modifier 값은 밑줄 (_)로 Modifier 이름과 구분됩니다 .
Boolean 수식 자의 경우, 값은 이름에 포함되지 않습니다.

<header class="header">
  <img class="logo">
  <form class="search-form">
    <input class="search-form__input">
    <button class="search-form__btn">
    </button>
  </form>
  <ul class="lang-switcher">
    <li class="lang-switcher__item">
      <a class="lang-switcher__link" href="url">
        ko
      </a>
    </li>
    <li class="lang-switcher__item">
      <a class="lang-switcher__link" href="url">
        en
      </a>
    </li>
  </ul>
</header>

BEM 장단점

장점

재사용성과 직관적인 클레스(class)
BEM은 이해하기 쉽고, 직관적인 클레스 이름의 작명을 하기가 쉽습니다.
또한, Block 기반의 스타일로 Block을 다른 곳에 재사용하기 쉽습니다.
클레스(class) 중복 방지
BEM은 Block 단위의 class name을 통해 CSS의 원치 않은 상속을 제한하며, 클레스 네임 중복을 방지합니다.

단점

네이밍 명명법의 한계
BEM은 초기 Block의 네이밍은 간결하지만 안에 세부 요소로 들어갈수록 복잡한 명명법을 갖게 됩니다. 이는 HTML내 복잡한 클래스(class)를 갖게 되며, 익숙치 않을 경우 괴이한 모습으로 비춰질 수 있습니다.

SMACSS(Scalable and Modular Architecture CSS)

SMACSS(Scalable and Modular Architecture CSS)는 5가지 간단한 카테고리를 따르는 스타일 가이드입니다. SMACSS는 설계 프로세스를 검토하고 이러한 견고한 프레임 워크를 유연한 사고 프로세스에 맞게 조정하는 방법이며, CSS를 사용할 때 사이트 개발에 대한 일관된 접근 방식을 문서화하려는 시도입니다.

SMACSS 개념

SMACSS에서 따라야 할 5가지 카테고리는 다음과 같습니다.

Base
기본값입니다. 그들은 여백, 여백, 테두리, 글꼴 및 기타 속성과 같으며이 값은 전체 웹 사이트와 모든 요소에 사용됩니다. Base에서는 어떤 클래스(class)나 ID 선택 자도 포함하지 않습니다. 또한, !important를 쓸 필요가 없습니다.

body,
form {
  margin: 0;
  padding: 0;
}
 
a {
  color: #039;
}
 
a:hover {
  color: #03F;   
}

Layout
페이지를 머리글, 바닥글, 기본 페이지 등과 같은 요소를 지칭합니다. 레이아웃은 하나 이상의 모듈을 함께 유지합니다. 종종 l-이나 layout-이라는 suffix를 이름에 붙입니다.

#article {
  float: left;
}
 
#sidebar {
  float: right;
}
 
.l-flipped #article {
  float: right;
}
 
.l-flipped #sidebar {
  float: left;
}

Module
모듈은 페이지의보다 개별적인 구성 요소입니다. (nav bar, 이미지 슬라이더, dialogs, widgets, tables, icons 등) 각 모듈은 독립형 구성 요소로 존재하도록 설계되어야합니다.

모듈에서는 재사용을 위해 id 셀렉터와 element를 사용하지 않습니다. 만약, element 셀렉터를 사용해야 한다면, .box > span 처럼 child 셀렉터를 사용합니다.

.folder > span {
  padding-left: 20px;
  background: url(icon.png);
}

.folder {
  ...
}
 
.folder .name {
  ...
}
 
.folder .date {
  ...
}

State
State는 상태를 나타내는 스타일입니다. 이는 특정 상태에있을 때 모듈 또는 레이아웃이 어떻게 표시되는지 설명하는 방법입니다.

주로 Hidden, expend, active, hover 등의 상태에서 사용합니다. 또한 이는, 자바스크립트 종속성을 나타내기도 합니다. 클래스(class)에 suffix is- 또는 s- 를 붙여서 사용합니다.

.is-active {
  ...
}

.is-collapsed {
  ...
} 

.btn {
  display: inline-block;
  background: #ddd;
  border-radius: 4px;
}
  
.btn.is-active {
  background: #43f837;
}
  
.btn.is-hidden {
  display: none;
}

Theme
테마는 사이트 전반적인 컬러감(느낌)을 담당합니다. 테마를 고유 한 스타일 세트로 분리하며, 해당 스타일을 대체 테마로 쉽게 재정의 할 수 있습니다.

또한, 테마는 기본 유형에 영향을 줄 수 있습니다. 기본 링크 색상과 같은 기본 스타일을 무시할 수 있습니다. 적용범위가 넓은 테마는 theme-* 를 suffix를 붙여 사용합니다.

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

/* in theme.css */
.mod {
  border-color: blue;
}

네이밍 규칙

SMACSS의 네이밍 규칙은 레이아웃의 경우 .l-* or .layout or #layout 이며, 모듈은 .module state는 .is-* or .s-* theme는 .theme or .theme-* 입니다.

이름은 소문자 라틴 문자로 작성됩니다.
레이아웃을 제외하고 id 선택자를 사용하지 않습니다.
단어는 하이픈 (-) 으로 구분됩니다.

/* Example Module */
.example {
  ...
}
 
/* Callout Module */
.callout {
  ...
}
 
/* Callout Module with State */
.callout.is-collapsed {
  ...
}
 
/* Form field module */
.field {
  ...
}
 
/* Inline layout  */
.l-inline {
  ...
}

SMACSS 장단점

장점

범주화를 통한 패턴화
5개의 범주화(Base, Layout, Module, State, Theme)를 통해 알아보기 쉽고 재사용 가능한 컴포넌트를 작성할 수 있습니다.
모듈 및 요소의 상태 확인
State 규칙을 통해 해당 요소의 상태까지 예측할 수 있으며, 이는 자바스크립트 훅을 추가하여 이벤트를 예측하기 쉽게할 수 있습니다.

단점

규칙에 대한 종속성
규칙으로 CSS 작성에 제한을 둘 수 있습니다.

Atomic CSS

Atomic CSS는 CSS 스타일링을 작은, 단일 기능 단위로 분리하는 접근 방식입니다. 이러한 기능 단위를 "원자"라고도 부릅니다. Atomic CSS는 각각의 원자를 조합하여 웹 페이지 레이아웃을 생성하는 방식으로 작동합니다.

Atomic CSS 개념

Atomic CSS는 각각의 스타일 속성을 개별적인 클래스로 정의하여 사용합니다. 각 클래스는 하나의 스타일 속성과 값에 대응하며, 여러 클래스를 조합하여 원하는 스타일을 적용할 수 있습니다. 이를 통해 스타일 속성을 원자 단위로 분해하고 조합하여 더 큰 단위로 사용할 수 있게 됩니다.

네이밍 규칙

Atomic CSS의 네이밍은 스타일 속성과 일치합니다.

[<context>[:<pseudo-class>]<combinator>]<Style>[(<value>,<value>?,...)][<!>][:<pseudo-class>][::<pseudo-element>][--<breakpoint_identifier>]

1. 크기 조정 클래스 생성:
   - `.w-100`: 너비 100%
   - `.h-50`: 높이 50px

2. 배경색 조정 클래스 생성:
   - `.bg-primary`: 주요 배경색(예: 파란색)
   - `.bg-secondary`: 보조 배경색(예: 녹색)

3. 폰트 조정 클래스 생성:
   - `.text-white`: 흰색 텍스트
   - `.text-bold`: 굵은 텍스트

<button class="w-100 h-50 bg-primary text-white text-bold">Click me!</button>

위의 코드에서는 버튼에 원하는 디자인을 적용하기 위해 클래스를 조합하여 사용합니다. `w-100` 클래스는 버튼의 너비를 100%로 설정하고, `h-50` 클래스는 버튼의 높이를 50px로 설정합니다. `bg-primary` 클래스는 배경색을 파란색으로 설정하고, `text-white` 클래스는 텍스트색을 흰색으로 설정합니다. 마지막으로 `text-bold` 클래스는 텍스트를 굵게 설정합니다.

Atomic CSS 장단점

장점

높은 재사용성과 유지보수성
재사용 가능한 스타일 기능 단위로 작성되므로, 다른 컴포넌트나 요소에서도 쉽게 적용할 수 있습니다.
성능 향상
필요한 스타일 조각만을 로드하여 네트워크 대역폭을 줄일 수 있습니다.
쉬운 읽기와 이해
Atomic CSS는 단일 책임 원칙을 따르기 때문에, 스타일 조각들의 이름이 그 의미를 명확하게 나타냅니다.

단점

초기 설정이 필요
Atomic CSS를 사용하기 위해서는 초기 설정이 필요합니다. 작은 스타일 조각들을 작성하고 클래스 네임들을 관리하기 위한 시스템 구축이 필요하며, 이를 구축하는 과정에 시간과 노력이 필요할 수 있습니다.
클래스 오용
엘리먼트나 컴포넌트마다 많은 클래스를 부여하는 경향이 있습니다. 이로인해 클래스 오용이 발생할 수 있습니다.

마치며

이 밖에 SuitCSS, ITCSS 등 다양한 효율적인 CSS 작성을 위한 방법론들이 존재합니다. 이러한 CSS 방법론은 유지보수 용이하고 재사용을 위한 하나의 방법이자 제안일 뿐이며, 다양한 방법론을 혼영할 수 있고 혹은 사용을 하지 않을수도 있습니다.

또한, 여기서 나오는 장점과 단점은 해당 방법론에 적용되는 사항이 아닌, 방법론 전체에 대한 장점이자 단점으로 작용할 수 있습니다.

'Dev > CSS' 카테고리의 다른 글

CSS(Cascading Style Sheets)란 무엇인가? (2)	2023.10.31

VIAE의 IT 이모저모

CSS 방법론이란? OOCSS, BEM, SAMCSS, Atomic CSS

소개

OOCSS(Object Oriented CSS)

OOCSS 원칙

네이밍 규칙

OOCSS 장단점

BEM(Block Element Modifier)

BEM 개념

네이밍 규칙

BEM 장단점

SMACSS(Scalable and Modular Architecture CSS)

SMACSS 개념

네이밍 규칙

SMACSS 장단점

Atomic CSS

Atomic CSS 개념

네이밍 규칙

Atomic CSS 장단점

마치며

'Dev > CSS' 카테고리의 다른 글

티스토리툴바

CSS 방법론이란? OOCSS, BEM, SAMCSS, Atomic CSS

소개

OOCSS(Object Oriented CSS)

OOCSS 원칙

네이밍 규칙

OOCSS 장단점

BEM(Block Element Modifier)

BEM 개념

네이밍 규칙

BEM 장단점

SMACSS(Scalable and Modular Architecture CSS)

SMACSS 개념

네이밍 규칙

SMACSS 장단점

Atomic CSS

Atomic CSS 개념

네이밍 규칙

Atomic CSS 장단점

마치며

'Dev > CSS' 카테고리의 다른 글

관련글

티스토리툴바