[코드라이언] CSS 설계기법 -Day15-

CSS의 설계기법은 막 써내려갔던 CSS를 좀 더 "구조화"해서 설계하는 기법이다. 대표적으로 세가지의 CSS 설계기법이 있다. 말 그대로 "대표"기법이지 항상 통용되는 것은 아니다. 중요한건 회사의 컨벤션에 따르는것!

 

 

1. OOCSS(Object Oriented CSS)

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

 

• 구조(structure)와 스킨 분리
  구조에는 레이아웃과 관련된 속성들이 포함된다. (padding, margin, width, height 등)
  스킨에는 레이아웃에 영향을 미치지 않는 시각적인 요소들이 포함된다. (color, background-color, border 등)
  
  

<button type="button" class="btn"></button>
<button type="button" class="btn btn-close"></button>

.btn {
    width: 200px;
    height: 80px;
    font-size: 30px;
}

.btn-close {
    background: black;
    color: #fff;
    border: 3px dotted #fff;
}

 

 

• 컨테이너와 콘텐츠의 분리
  콘텐츠 스타일이 컨테이너에 종속되지 않도록 한다. 즉, 콘텐츠 선택자의 컨테이너 선택자를 배제한다.

 

 

 

 

2. SMACSS(Scalable and Modular Architecture for CSS)

코드를 다음과 같은 역할에 따라 5가지로 분리한다.

 

• 베이스
  표준 스타일을 정한다. 폰트, 사이즈, <img> 공통 스타일 등.
  
  
• 레이아웃
  헤더, 메인 영역, 푸터, 사이드 바 등과 같은 페이지에서 큰 틀을 구성하는 모듈에 관한 규칙.
  ID 선택자를 사용하기도 한다.
  
  
• 모듈
  레이아웃 안에 배치되는 모든 요소를 의미.
  
  
• 스테이트
  기존 스타일을 덮어쓰거나 확장하는데 사용. 자바스크립트로 필요할 때 넣었다 뺐다 할 수 있다. 클래스 이름 앞에 'is' 접두사를 사용한다.
  
  
• 테마
  background-img, background-color, color등의 느낌을 전달하는 이미지

 

 

2.BEM(Block, Element, Modifier)

OOCSS와 같은 모듈 기반 방법을 베이스로 한다. 선택자 가중치 계산을 정확하게 하기 위해 ID선택자, 요소 선택자 사용을 지양한다.

 

 

• Block
  어디에든 재사용 가능한 부품. 클래스 네이밍은 정확히 목적을 알 수 있도록 직관적으로 작성한다. 소문자를 사용하며 여러 단어가 연결될 때는 하이픈(케밥 케이스)를 사용한다.
  
  
• Element
  Block에 종속되는 자식 요소들로 block의 클래스 네이밍을 상속 받는다. 그 뒤에 언더바 두개를 접두사로 붙여 element의 클래스 이름을 붙인다.

<section class="chapter-baseball">
    <button type="button" class="chapter-baseball__btn"></button>
</section>

하위 element끼리는 클래스 네임을 중복하지 않는다. 

<p class="txt-grey">더 많은 정보가 필요하시면
    <button class="txt-grey__btn">
        <!-- <strong  class="txt-grey__btn__bold">여기</strong> 이렇게 네이밍 하지 않습니다. -->
        <strong class="txt-grey__bold">여기</strong>
    </button>
    를 클릭하세요!
</p>

• Modifier
  block이나 element의 모습이나 상태 또는 움직임 (요소가 활성화된 상태, 사이즈, 컬러 등등)을 정의.
  단독으로 클래스 이름을 사용하지 않고 두 번째 클래스 이름으로 사용한다.
  클래스 네이밍은 block이나 element의 이름을 상속 받고 하이픈 두 개로 연결한다. 만약 두 개 이상의 단어를 사용해야하면 block처럼 하이픈으로 연결한다.
  
  

 

 

서두에서도 얘기했지만, 이러한 대표적인 CSS 기법이 있지만 회사의 컨벤션을 따르는 것이 중요하다.