공부/CSS

CSS 방법론

도리암 2022. 5. 17. 21:22

대규모의 페이지 및 다수의 인원이 작업을 해야할 경우 클래스 명을 일관성 있게 유지해야할 필요가 있다.

그렇기 때문에 생겨난 것이 CSS 방법론이다.

 

CSS 방법론은 다음의 형태를 추구한다.

  1. 코드의 재사용성 증대
  2. 쉬운 유지보수
  3. 확장성 보장
  4. 의미 있는 클래스명 사용( 클래스 명으로 용도 파악 )

SMACSS (Scalable and Modular Architecture for CSS)

클래스명을 최대한 의미있게 사용하여 여러 사람이 프로젝트를 진행할 때 쉬운 이해를 제공한다.

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

1. Base(기본 규칙)

각 브라우저의 스타일 초기화를 위해 reset, normalize 등 페이지 전체에 기본 스타일을 적용한다.

css !important는 사용하지 않는다.

2. Layout (레이아웃 규칙)

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

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

주요 컴포넌트는 #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 선택자, 태그 선택자를 사용하지 않는다.

(단순 태그 선택자를 사용하게 되면 >(직계자손 선택자)를 사용한다.

<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 (상태 규칙)

요소의 상태에 따라 클래스를 변동시켜 적용하는 변화 규칙

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

클래스명은 주로 접두사 .is- 클래스를 사용한다. (ex, is-on)

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

5. Theme (테마 규칙)

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

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

주의할 점은 main css 뒤에 테마용 css를 선언해야 한다.

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

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

BEM(Block, Element, Modifier)

BEM은 스타일 독립 설정을 위한 태그 이름 방법론으로 Block, Element, Modifier를 의미한다.

저 세가지로 이름을 구성하며 각각 __ 또는 --로 구분한다.

1. 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

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

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

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

3. Modifiers

블록 혹은 엘리먼트의 모양(Color, Size), 상태(Position, disabled, checked)를 정의한다.

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

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

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. 컨텐츠와 컨테이너를 분리

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

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

태그에 영향 없이 클래스 자체에 스타일이 부여되므로 재사용이 용이하다.

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

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