📝
프론트엔드 스쿨 교안(1기)/
📝
CSS/
📝
20. CSS 설계 기법
📝

20. CSS 설계 기법

 
1. OOCSS (Object Oriented CSS)1.1 개념1.2 방법2. SMACSS (Scalable and Modular Architecture for CSS) 2.1 개념2.2 방법3. BEM (Block, Element, Modifier)3.1 개념3.2 방법
 
💡
꼭 한 번씩 실습을 해보시길 권해드립니다!

1. OOCSS (Object Oriented CSS)

ref : https://www.slideshare.net/stubbornella/object-oriented-css

1.1 개념

레고처럼 여러가지 모듈을 만들어서 조합하도록 하는 방법론입니다.
 

1.2 방법

1.2.1 구조(structure)와 스킨의 분리
같은 형태의 ui 에 스킨만 다르다면 구조와 스킨을 분리하여 조합합니다.
notion imagenotion image
 
구조에는 : width, height, padding, margin 등 레이아웃에 영향을 미치는 속성들이 포함됩니다.
스킨에는 : font 관련 속성, color, background, border 등 레이아웃에 영향을 미치지는 않지만 시각적인 영향을 주는 속성들이 포함됩니다.
 
1.2.2 컨테이너와 콘텐츠의 분리
콘텐츠의 스타일이 컨테이너에 종속되지 않도록합니다. 즉 컨텐츠의 스타일 선택자에 컨테이너의 클래스를 배제합니다
 
 

2. SMACSS (Scalable and Modular Architecture for CSS)

ref : http://smacss.com

2.1 개념

css 코드를 역할에 따라 분리합니다.
  • 역할목록
      1. 베이스
      1. 레이아웃
      1. 모듈
      1. 스테이트
      1. 테마
       

2.2 방법

  1. 베이스
프로젝트의 표준 스타일을 정의합니다.
전체적으로 사용되는 폰트 패밀리,  폰트 사이즈, reset 스타일, <img> 공통 스타일 등이 포함됩니다.
 
  1. 레이아웃
헤더, 메인영역, 푸터, 사이드 바와 같은 웹사이트에서 큰 틀을 구성하는 모듈에 관한 규칙입니다. 대부분 페이지에 몇개 존재하지 않기 때문에 ID 선택자를 사용하기도 합니다.
 
  1. 모듈
레이아웃안에 배치되는 모든 요소를 의미합니다. 반복되는 요소들이기 때문에 ID 선택자를 사용하지 않으며, 요소 선택자의 사용을 최소화합니다.(자식 요소에만 적용)
비슷한 모듈안에서도 모양이 조금씩 다를 경우 서브클래스를 만듭니다. (btn-small, btn-long 등등)
 
  1. 스테이트
기존 스타일을 덮어쓰거나 확장하는데 사용하는 스타일입니다.
서브클래스와 다른 점은 레이아웃이나 모듈에 둘 다 적용가능하며, 서브클래스가 한번 적용되면 바뀌지 않는 속성임에 비해 스테이트는 자바스크립트로 필요할때 넣었다 뺐다 할 수 있다는 점 입니다. 클래스 이름은 앞에 is 라는 접두사를 사용합니다. (is-hidden, is-active … )
 
  1. 테마
사용자에게 사이트의 느낌을 전달하는 이미지(background-image), 색상(background-color, color … ) 등을 의미합니다.
 
 
 

3. BEM (Block, Element, Modifier)

ref : http://getbem.com/

3.1 개념

얀덱스(Yandex)사가 만든 설계방법. 기본적으로는 OOCSS 와 같은 모듈 기반의 방법을 뿌리로 합니다.
 
기본 규칙
  • ID 선택자와 요소 선택자를 권장하지 않습니다. ( 클래스 선택자만 사용하는 이유는 가중치 계산을 원활히 하기 위해서 입니다. z-index를 10단위로 사용하는 것과 같습니다. )

3.2 방법

  1. Block
어디에서나 재사용 가능한 부품을 의미합니다.
클래스 네이밍은 목적이 명확해야 합니다. (Error, hidden … )
소문자를 사용하며 여러 단어가 연결되는 경우는 하이픈 케이스(케밥케이스)를 사용합니다. (cont-nav … )
 
  1. Element
Block 을 구성하는 요소들로 block 에 종속되야 합니다.
때문에 block 의 클래스 이름을 상속 받고 element의 클래스 이름을 언더바 두 개를 접두사로 하여 사용합니다. (error__link, opacity-half__btn )
Element 안에 또 element를 사용할 경우 클래스 네이밍은 element 끼리 중첩하지 않습니다.
opacity-half__btn__txt (x)
opacity-half__txt (o)
 
  1. Modifier
block이나 element의 모습이나 상태 또는 움직임 (요소가 활성화된 상태, 사이즈, 컬러 등등)을 정의합니다.
단독으로 클래스 이름을 사용하지 않고 두 번째 클래스 이름으로 사용합니다.
btn_size_small (x)
btn_move btn_move_active (o)
클래스 네이밍은 block이나 element의 이름을 상속 받고 언더바 하나로 연결합니다.
만약 두 개 이상의 단어를 사용해야하면 block처럼 하이픈으로 연결합니다.
btn-move btn-move_size-small (o)
이렇게 언더바와 하이픈이 혼용된 형태를 취합니다.