css 방법론 (methodology) - SMACSS, BEM, OOCSS

실무에서 css를 작성을 하다보면

간단한 페이지나 짧은 css 소스가 필요한 부분의 경우를 제외한

대규모의 페이지 및 여러명이 함께 작업을 해야할 경우의 페이지를 작업할 때에

 

각자 작성하는 마크업 방식이나 클래스 네이밍이 다르기 때문에

서로 작성해놓은 코드를 쉽게 알아보지 못해서

불필요한 소스가 생겨나고 유지보수에 어려움을 겪는 경우가 많아진다.

 

그렇기 때문에 css 방법론이 생겨났다.

css 방법론은 크게 SMACSS, BEM, OOCSS 3가지의 방법이 있는데

이 3가지는 각각 방법은 조금씩 다르지만

 

- 코드의 재사용성 높여 불필요하게 반복되는 css의 사용 최소화\

- 쉬운 유지보수

- 확장성 보장

- 의미있는 클래스명 사용을 통한 클래스명만으로 용도 파악

 

위 4가지의 형태를 추구하고자 한다.

 

1. SMACSS (Scalable and Modular Architecture for CSS)

SMACSS는 클래스명을 최대한 의미있게 사용하여 여러사람이 프로젝트를 진행해도

서로가 서로의 소스를 보다 쉽게 이해할 수 있도록 한다.

 

SMACSS는 5개의 규칙을 따른다.

 

1. Base (기본 규칙)

각 브라우저의 스타일 초기화를 위해

reset, normalize 등 페이지 전체에 기본 스타일을 적용한다.

이때, css !important는 사용하지 않는다.

2020.02.19 - [Frontend/CSS] - CSS Reset (초기화)

 

2. Layout (레이아웃 규칙)

- 페이지 큰 틀을 잡아주는 레이아웃과 관련된 스타일을 정의한다.

- header, footer, container, aside 등 주요 컴포넌트들과 그 하위 컴포넌트에 규칙을 적용한다.(nav, form...)

- 주요 컴포넌트는 #id, 하위 컴포넌트는 .class로 제어한다.

- 특정 상태에 따른 레이아웃을 변경하는 내용을 다루는 css 작성시 l- 혹은 layout- 클래스를 접두사로 붙인다.

#header{width:100%}
#footer{width:100%}

#header .nav{overflow:hidden;}
#footer .list{margin-top:5px;}

/* ex) fixed: 고정된 크기의 #header를 명시 */
.l-fixed #header{width:1200px;}

/* ex) flipped: floating된 .nav를 명시 */
.l-flipped #header .nav{float:left}

 

3. Module (모듈 규칙)

- 스타일 재사용을 위한 규칙 (버튼, 아이콘 등...)

- 재사용을 위해서 id 선택자, 태그(element) 선택자를 사용하지 않는다.

(단순 태그 선택자를 사용하게 된다면 .side_button > a 와 같이 '>' 직계자손 선택자를 사용한다.)

<style>
  .buttons{absolute; top:0; right:0}
  .buttons > a{display:block; border:1px solid blue;}
</style>

<div class="buttons">
  <a href="#">버튼</a>
</div>

 

4. State (상태 규칙)

- 요소의 상태에 따른 클래스 적용을 통한 변화 규칙

- 클래스 적용은 스크립트를 통해 (addClass) 특정 이벤트에 따라 적용한다.

- 클래스명은 주로 접두사 .is- 클래스 사용 (.is-on, .is-checked...)

<!-- 버튼 클릭 후 버튼이 on 되어있는 상태 -->
<div class="buttons is-on">
  <a href="#">버튼</a>
</div>

 

5. Theme (테마 규칙)

- 페이지 전체적인 테마색상에 대한 클래스를 적용하는 규칙

- 테마 적용을 위한 css를 별도로 분리하여 만들어 메인 css에 적용된 내용을 특정 테마에 따라 color값을 제어

- 주의 할 점은 메인 css 뒤에 테마용 css를 선언해야 한다는 점이다.

/* main.css */
.button{background:#fff;}

/* theme.css */
.button{background:skyblue;}

 

2. BEM (Block Element Modifier)

BEM은 클래스 사용을 각각 블록(block), 요소(element), 상태(modifier)로 구분하여 네이밍한다.

 

*장점

- 직관적인 클래스 사용을 통해 여러사람이 함께 작업을 진행하더라도 클래스를 알아보기 쉽게한다.

- 코드의 재사용성이 용이하다.

 

*단점

- 직관적인 클래스명을 사용하다보니 클래스명이 지나치게 길어져 복잡해지는 경우가 있다.

 

 

1. Block

- block의 속성을 가지고 재사용할 수 있는 독립적인 영역에 적용한다.

- block은 여백, 위치, 색상 등 상태에 대한 내용은 담지 않는다.

- 클래스명이 길어질 경우엔 하이픈(-) 으로 구분한다.

<!-- O -->
<div class="paging"></div>
<div class="btn-area"></div>

<!-- X -->
<!-- fixed, red와 같이 상태에 대한 내용은 클래스로 담지 않는다. -->
<div class="paging-fixed"></div>
<div class="btn-area-red"></div>

 

2. Element

- Block 안에 적용되는 내용들로 클래스명도 블록과 맥락이 이어져야한다.

- 클래스명은 언더바 2개(__) 로 작성한다.

<div class="button-area">
  <a href="#" class="button-area__button"></a>
  <span class="button-area__text"></span>
</div>

 

3. Modifiers

- block 혹은 element의 모양(color, size), 상태(position, disabled, checked)를 정의한다.

- 클래스명은 하이픈 2개(--)로 작성한다.

<div class="button">
  <div class="button__text">
    <span class="button__text--red"></span>
  </div>
</div>

 

3. OOCSS (Object Oriented CSS)

- css를 모듈 방식으로 적용해서 중복을 최소화 하는 것을 추구한다.

- id 선택자를 사용하지 않는다.

- 각 단어별 하이픈(-)으로 구분한다.

 

 

1. 구조와 외형을 분리

반복되는 기본 구조 및 외형과 관련된 내용을 공통 스타일화 하여 정의한다.

<style>
   /* 구조 스타일 */
  .button{width:100px; height:30px; text-align:center;}
  
  /* 외형 스타일 */
  .button-red{background:red; color:#fff;}
</style>

<a href="#" class="button button-red">버튼</a>

 

2. 컨텐츠와 컨테이너를 분리

- 어떤 요소(element)에 적용되어 있는게 중요한 것이 아니라 클래스를 적용한 컨텐츠 자체에 의미를 부여하고 사용한다.

- 태그가 변경되어도 적용한 클래스가 같다면 css를 바꿀 필요가 없다.

- 태그에 영향없이 클래스 자체에 스타일이 부여되기 때문에 재사용이 용이하다.

<h2 class="title"></h2>

<strong class="title"></strong>

 

 

위에 설명한 3가지의 css 방법론은 어디까지나 이러한 방법이 적용될 수 있다는 것을 의미한다.

 

반드시 해당 방법에 따라야 하는 것은 아니고 내가 작업하는 상황에 따라

해당 방법론들을 참고하여 나에게, 우리 팀에게 맞는 css 및 class 작성법을 연구하면

 

복잡한 페이지에서도 원활하게 작업할 수 있는 환경을 구축할 수 있을거라 생각한다.

 

 

 

---

참고

viaeoo.tistory.com/26#recentComments

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

jmjmjm.tistory.com/44