[CSS] CSS 방법론- class naming convention (OOCSS, BEM)

1. OOCSS  (Object Oriented CSS) 

✔ 주로 많이 사용되는 CSS방법론

OOCSS는 약어에서도 알 수 있듯이 객체 지향에 따라서 고안된 설계 방식입니다.

 

중복을 최소화하고 캡슐화를 원칙으로 하는 방법론

• CSS를 모듈 방식으로 코딩하여 중복을 최소하는 방법입니다.
• 가능한 짧고 간결하게 작성합니다.
• 동작과 형태가 예상 가능하도록 명확하게 작성합니다.
• 어떻게 생겼는지 보다는 어떤 목적인지 알 수 있도록 의미 있게 작성합니다.
• 지나치게 구체적이지 않게 일반적으로 사용가능 하도록 작성합니다.
• 외양: .button, .box, .widget, .skin…
• 컨테이너와 콘텐츠 분리
  • .globalwidth + .header-inside / .main-btn
  • .bg-blue, .bg-red

 

이 방법론의 특징은 첫째. 구조와 외형을 분리하고 둘째. 컨테이너와 내용을 분리하는 것입니다.

 

첫째. 구조와 외형을 분리

• 구조 : width, height, border, padding, margin....
• 외형 : color, border-color, font-color, background-color...

// html
<div class="btn common-skin tel">tel</div>
<div class="btn common-skin email">email</div>

// css
.btn{공통 스타일 정의} 
.common-skin{공통 스타일 정의}

 

둘째. 컨테이너와 내용을 분리

• 위치에 의존하지 않는 스타일 정의
• 어떤 태그라도 동일한 외형 제공
• 어디에서나 재사용이 가능한 클래스 기반 모듈 구축

<!-- Bad -->
h3 { font-size:16px }

<!-- Good -->
.sub-title {font-size:16px}

<!-- Good --> 
<h3 class="sub-title"> ... </h3> 
<span class="sub-title"> ... </span>

 

OOCSS 장점

• 공통된 부분을 정의해서 재사용이 가능.
• 구조적 상황에 관계없이 동일한 클래스라면 동일한 스타일을 기대할 수 있음.
• 코드의 재사용으로 코드 양이 줄어듬.

 

OOCSS 단점

• 공통된 클래스가 많기 때문에 수정이 발생할 시 멀티클래스를 사용해야 함. 
• 멀티클래스가 많아짐에 따라 유지보수에 어려움
• 코드의 가독성이 떨어짐.

 

CSS방법론 : OOCSS, BEM, SMACSS 비교해보기

 

CSS 방법론(BEM, SMACSS, OOCSS)

---

2.BEM

BEM은 전체적으로 이렇게 이루어집니다.

• 항상 영어 소문자만을 사용합니다. 카멜 케이스 등은 사용하지 않습니다.
• 일반적으로 한 요소는 하이픈으로 연결합니다. (예를 들면 input-text, button-submit, modal-alert 등등.. )
• 네이밍의 조합은 형태-의미-순서-상태 순으로 사용합니다. (예시 button-submit-03-disable)
• 언더스코어는 파일, 폴더, 이미지 등에만 사용합니다(image_elysia_asset_01.png)
• 아이디를 사용하지 않고 클래스명만 사용한다.
• 숫자를 사용할 때는 확장성을 고려해 1, 2 이런 식으로 표현하지 않고 01, 02, 03… 혹은 001, 002, 003처럼 사용합니다. 앞에 0을 붙이지 않으면, 이미지 정렬 시 1 다음에 2가 오지 않고 10이 오는 등, 정렬 순서가 엉망이 될 수 있기 때문입니다.

 

BEM 장점

• 직관적인 클래스 명으로 마크업 구조를 직접 보지 않아도 구조의 파악이 쉬움

 

BEM 단점

• 클래스명이 상대적으로 길어질 수밖에 없는 구조이기 때문에 코드가 길어지고 복잡해지는 단점.
• 기존 마크업에서 새롭게 기능이 추가되었을 경우 클래스명 재수정이 불편

 

네이밍 컨벤션 BEM

 

CSS class naming convention

 

 

---

⭐

=> OOCSS 방법론을 참고하여 아래와 같이 사용하기로 함

 

* className: - 하이픈으로 단어 사이 구분

ex) class="link-view"
ex) class="btn-blackLine-on"

 

* id: 카멜표기법으로 구분 (화면에서 한번만 사용이 되므로, 고유 기능을 쉽게 인지할 수 있도록 네이밍)

 id="btnGnbSearch" ( o )

 

 

---

참고하면 좋을 사이트

 

[작업가이드] 파일,CSS 네이밍 규칙