[css] css 방법론(oocss, bem, smacss)

 

 

 목차

• 방법론 1. OOCSS
• 방법론 2. BEM
• 방법론 3. SMACSS

 

CSS 방법론

 

1. OOCSS (Object Oriented CSS)

---

OOCSS(Object Oriented CSS)는 CSS를 모듈(module)방식으로 작성하여 중복을 줄이는 방식의 방법론 입니다.

 

OOCSS는 가장 많이 사용되는 방법론으로 구조와 스타일을 분리하여 작성합니다. 

중복되는 디자인 요소를 따로 빼내어 작성하기 때문에 반복적으로 사용가능합니다. 또한 코드의 재사용성이 높아져 적은 코드량으로 최적의 성능을 보입니다.

 

장점: 공통된 부분을 찾아 어디서나 재활용 할 수 있다는 점

단점: 다중 클래스 사용으로 인해 코드의 가독성이 떨어질 수 있습니다.

 

  <!-- 기존 방식 --> 
  <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>

.btn {
	display: inline-block;
    width: 380px;
    height: 50px;
    text-align: center;
}


.skin {
	margin: 10px 5px;
}

.instagram {
	background-color: #f9f9f9;
}

.facebook {
	background-color: #45B759;
}

 

 

2. BEM(Block  Element Module)

---

BEM(block element modifier)은  블록(block), 요소(element), 상태(modifier)로 구분하여 클래스 이름을 작성하는 방법론입니다.

 

 

https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/

 

https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/

 

BEM은 각 부분을 __와  --로 구분짓게 됩니다. 

사용시 규칙을 엄격하게 지어두고 가지 않으면 산으로 갈 수도있다고 생각합니다.

 

장점: 엄격한 네이밍 규칙을 따르며 클래스명이 용도와 형태로 잘 표현해주어 직관적으로 알 수 있습니다.

단점: 클래스명이 길고 복잡해 질 수 있습니다.

 

• 블록(block): 재사용성이 가능하고 기능적으로 독립이 가능한 컴포넌트입니다. 일반적으로 하나의 단어를 사용하되 길어질 경우에는  - 를 사용합니다. 

.header {//}
.main {//}
.footer {//}

• 요소(element): 블록을 구성하는 요소이며 "__"를 사용합니다.

.header__tap {//}
.header__title {//}
.header__logo {//}
.header__content {//}

• 상태(modifier): 블록이나 요소의 속성으로 "--"를 사용합니다.

.header--hide {//}
.header__title--sm {//}
.header__content--disabled {//}

 

 

 

 

 

3. SMACSS(Scalable and Modular Architecture for CSS)

 

---

SMACSS(Scalable and Modular Architecture for CSS)는 CSS를 범주화(Categorization)로 패턴화 하고자 하는 방법론입니다.

SMACSS는 작성할 CSS를 비슷한 종류끼리 모아 5가지 스타일로 나누고 각 유형에 맞는 선택자와 작명법, 코딩 기법을 제시합니다.

 

기본(base), 레이아웃(layout), 모듈(module), 상태(state), 테마(theme) 다섯가지의 종류별로 핵심 규칙이 있습니다.

 

1. 기본(base)

 

기본 스타일은 초기값 설정을 의미하며, reset.css 같은 초기화 파일도 이에 포함 됩니다.
대부분 하나의 요소(elements)로 이루어져있으며 속성 선택자, 가상 클래스 선택자, 후손 선택자, 자식 선택자 등으로 구성되어 있습니다.

기본 스타일은 클래스 또는 아이디 선택자를 포함하지 않습니다.
예를 들면 기본 링크 스타일, 기본 폰트 스타일과 바디의 배경 선언 등이 이에 포함됩니다.
기본 스타일을 정의할 때 **!important**는 허용하지 않습니다.

body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,
textarea,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-size:14px;line-height:1.25}
body.s,.s input,.s textarea,.s select,.s button,.s table{font-family:helvetica}
body{position:relative;background-color:#fff;color:#000}
body.s{-ms-text-size-adjust:none;-webkit-text-size-adjust:none}
img,fieldset{border:0}
ul,ol{list-style:none}
table{border-collapse:collapse}
em,address{font-style:normal}
a{color:inherit;text-decoration:none}

 

2. 레이아웃(layout)

 

레이아웃 스타일은 큰 틀의 레이아웃, 페이지의 다양한 요소를 배치하고 구별하는데 사용합니다.

주요 컴포넌트에는 header, footer, aside 등이 있으며, 주요 컴포넌트 내의 하위 컴포넌트에는 nav, item list, form 등이 있습니다.
주요 컴포넌트는 id, 하위 컴포넌트는 class를 사용하여 스타일을 작성합니다.

클래스명을 사용할 때는 접두사로 **l-, layout-**를 사용해야 합니다.
ex) l-fixed : 유무에 따라 가변 폭으로 할지 고정 폭으로 할지 결정하는 레이아웃

#content {
  width: 80%;
  float: left;
}
#aside {
  width: 20%
}

.l-fixed #content {
  width: 600px;
  margin-right: 10px;
}
.l-fixed #aside {
  width: 200px
}

 

3. 모듈(module)

 

스타일 재사용을 위한 요소로  재사용을 위해 id seletor와 element 를 사용하지 않습니다.

만약, element selector를 사용해야 한다면 .box > span처럼 child 셀렉터를 사용합니다. 모듈 스타일은 버튼, 위젯, 배너 등과 같이 페이지에서 재사용을 위한 스타일입니다.
네비게이션, 슬라이드, 위젯 등이 모두 모듈에 해당되며, 모듈은 레이아웃이나 다른 모듈 안에 위치할 수 있습니다.

따라서 각 모듈은 독립적으로 존재할 수 있도록 설계해야 하며, 재사용을 위해 CSS 선택자로 id, 엘리먼트 선택자를 피하고 클래스명을 사용해야 합니다.
만약 엘리먼트 셀렉터를 사용해야 한다면, .box > span 처럼 child 셀렉터를 사용하도록 합니다.

<div class="information">
	<p>...</p>
</div>

// bad 
p {
	padding-left: 20px;
}

// better 

.infomation > p {
	padding-left: 20px;
}

<div class="box">
  <span class="box-name"> ... </span>
  <span class="box-items"> ... </span>
</div>

<style>
.box { ... }
.box-name { ... }
.box-items { ... } 
</stype>

 

4. 상태(state)

 

상태 스타일은 툴팁이나 아코디언 같은 요소의 상태 변화를 표현하는 스타일로, 모듈과 레이아웃 둘 다에 적용할 수 있습니다.

주로 Javascript에서 조작되는 클래스에 지정하며, 클래스명은 접두사로 is-, **s-**를 사용해야 합니다. 특정 모듈의 경우에는 모듈 이름을 뒤에 붙입니다.

ex) is-hidden, is-collapsed / ex) is-tab-active

<!-- 레이아웃 요소, 접힌 상태 -->
<div id="header" class="is-collapsed">
  <form>
    <!-- 모듈, 오류 상태 -->
    <div class="msg is-error">
      There is an error!
    </div>
    <!-- 연관된 라벨이 숨겨진 상태 -->
    <label for="search" class="is-hidden">Search</label>
    <input type="text" id="search">
  </form>
</div>

• #header는 레이아웃 요소임을 알 수 있으며, .is-collapsed로 접힌 상태임을 알 수 있다.
• .msg는 모듈이며 .is-error로 오류 상태임을 알 수 있다.
• #searchbox 연관된 라벨은 숨겨져 있는 것을 알 수 있다. (.is-hidden)

 

5. 테마(theme)

 

테마 스타일은 전반적인 표현과 느낌을 결정하는 색깔이나 이미지를 정의합니다.
테마 스타일 규칙만 따로 모아서 분리하면 테마를 쉽게 교체하고 재정의할 수 있습니다.
적용 범위가 넓은 테마의 경우에는 접두사로 **theme-**를 붙여서 혼란을 피해야 합니다.

 

/* 공통 root 역할을 하는 main.css */

.box {
	border: 1px solid;  //border type만 공통으로 설정해놓고
}

/* 테마 별로 재정의 blue theme.css */

.box {
	border-color: blue;
}

 

SMACSS 사용 시 지켜야할 유의사항은

• 파생된 CSS셀렉터 사용금지
• 레이아웃을 제외하고 Id셀렉터 사용금지
• !important 사용금지
• 단어는 하이픈(-)으로 구분
• 다른 개발자들이 이해할 수 있도록 class 이름을 의미있게!

 

 

 

 

 

 

참고: https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/, https://blog.illunex.com/20201106-2/

 

 

잘못된 정보에 대한 피드백은 언제나 환영입니다  (´▽`ʃƪ)♡