[CSS] CSS방법론(BEM/OOCSS/SMACSS)

CSS 방법론(BEM/OOCSS/SMACSS)

CSS 설계의 중요성

• 코드의 재사용성을 위해
• 쉽게 유지보수 하기 위해
• 확장을 가능하게 하기 위해
• 클래스명으로도 무슨 의미인지 예측 가능하도록 하기 위해

 

BEM (Block Element Modifier)

• Block, Element, Modifier 로 나누어 컴포넌트 기반의 웹 개발 접근법 중 하나.
• 유저 인터페이스를 독립된 여러 개의 블록으로 분리하자는 것이 목표
• 복잡한 UI를 가진 페이지의 인터페이스 개발 환경을 쉽고 빠르게 하며, 코드의 재활용을 높일 수 있다.

• 클래스명이 용도, 형태를 의미하므로 직관적이나 길고 복잡해지는 것이 단점.

1) Block

• 재사용 가능한 컴포넌트. (코드의 구조적 덩어리)

• 클래스명은 하나의 단어 사용, 길어질 경우 단일 하이픈(-)으로 구분

  • 블록의 목적으로 기술되며, 상태를 나타내지 않는다.

    <!-- Correct :: 무엇인지 정확히 기술. -->
    <div class="error"></div>
    <!-- Incorrect :: 어떻게 표현 또는 상태를 나타내지 않는다. -->
    <div class="red-text"></div>
    

 

2) Element

• 블록 외부에서 사용할 수 없는 블록 내의 요소를 뜻한다.
• 블록 맥락에서만 의미가 있어야 함

<form class="search-form">
  <input class="search-form__input">
  <button class="search-form__button"></button>
</form>

/* Good */
.search-form__input {...}
.search-form__button {...}

/* Bad */
.search-form .search-form__input {...}
button.search-form__button {...}

• 한 요소는 항상 블록의 부분이어야 하며, 블록으로부터 분리되어 사용할 수 없다.

<!-- Correct -->
<form class="search-form">
  <input class="search-form__input">
  <button class="search-form__button">Search</button>
</form>

<!-- Incorrect -->
<form class="search-form"> 
</form>
<!-- 'input'으로 권한다. -->
<input class="search-form__input">
<!-- 'button'으로 권한다. -->
<button class="search-form__button">Search</button>

• 한 블록은 DOM tree 에서 여러 개로 중첩된 요소들을 가질 수 있다.

<!-- (1) -->
<div class="block">
  <div class="block__elem1">
    <div class="block__elem2">
      <div class="block__elem3"></div>
    </div>
  </div>
</div>

<!-- (2) -->
<div class="block">
  <div class="block__elem1">
      <div class="block__elem2"></div>
  </div>
  <div class="block__elem3"></div>
</div>

• 위의 블록 구조들을 BEM 방법론에서 요소들의 목록들로 표현. :: 블록 구조가 변하더라도((1)에서 (2)로 변경) 요소들의 규칙과 이름은 똑같이 유지되어야 하므로.

.block {...}
.block__elem1 {...}
.block__elem2 {...}
.block__elem3 {...}

3) Modifier

• 블록이나 요소의 모양 (color, size) / 상태 (disabled, checked)를 정의.
• block__elem--modifier , block--modifier 형태로 사용.

• block__elem1__elem2은 잘못된 방법.

<!-- Correct -->
<form class="search-form">
  <div class="search-form__content">
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
  </div>
</form>

<!-- Incorrect -->
<form class="search-form">
  <div class="search-form__content">
    <!-- 'search-form__input' or 'search-form__content-input' 으로 권한다. -->
    <input class="search-form__content__input">
    <!-- 'search-form__button' or 'search-form__content-button' 으로 권한다. -->
    <button class="search-form__content__button">Search</button>
  </div>
</form>

• modifier의 이름은 블록이나 요소 이름으로부터 싱글 언더스코어(_)로 분리된다.

  • block-name_modifier-name
  • block-name__element-name_modifier-name
  • block-name_modifier-name_modifier-value
  • block-name__element-name_modifier-name_modifier-value

  <!-- 'search-form' :: block / 'theme' :: modifier / 'islands' :: value  -->
  <form class="search-form search-form_theme_islands">
    <input class="search-form__input">
    <button class="search-form__button search-form__button_size_m">Search</button>
  </form>
  
  <!-- 두 개의 같은 modifiers는 다른 value를 가진다. -->
  <form class="search-form
               search-form_theme_islands
               search-form_theme_lite">
    
    <input class="search-form__input">
    
    <button class="search-form__button
                   search-form__button_size_s
                   search-form__button_size_m">
      Search
    </button>
  </form>
  

 

OOCSS (Object Oriented CSS)

OOCSS는 객체 지향에 따라 고안된 설계 방식

• 구조와 외형의 분리 (Separate Structure and skin)
• 컨테이너와 내용 분리 (Separate container and content)

• OOCSS style

1) 구조와 외형의 분리

기본적인 구조와 반복 정의되는 외형은 따로 정의. (공통 스타일 추상화)

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

 

2) 컨테이너와 내용 분리

• 위치에 의존하지 않는 스타일 정의 :: 구조적 상황에 관계없이 문서 어느 곳에서나 재사용 가능.

• 태그에 스타일을 지정하는 것이 아닌 클래스명을 부여하고 스타일을 지정한다. :: 태그가 변경되어도 CSS 바꿀 필요 없음.

  <!-- Bad -->
  <h2>...</h2>
  h2 { font-size: 16px }
  
  <!-- Good -->
  <h3 class="subtitle">...</h3>
  <span class="subtitle">...</span>
  .subtitle { font-size: 16px }
  

• 어디에서나 재사용이 가능한 클래스 기반의 모듈 구축

 

3) OOCSS Style

기본 구조가 독립적으로 지정되어 있기 때문에 향후 다른 색의 버튼이 추가되더라도 외형 ㅡ타일만 추가로 정의하면 된다.

<a href="#" class="btnbase cart">장바구니</a>
<a href="#" class="btnbase buy">바로구매</a>

/* 버튼 구조 ; 공통적인 구조지정 */
.btnbase {...}

/* 버튼 외형 */
.cart {...}
.buy {...}

 

 

SMACSS (Scalable and Modular Architecture for CSS)

1) 스타일의 다섯가지 유형

SMACSS는 스타일을 다섯가지로 분류, 각 유형에 맞는 선택자(Selector)와 작명법(naming convention), 코딩기법을 제시한다.

1. Base - 기본규칙
2. Layout - 레이아웃 규칙
3. Module - 모듈 규칙
4. States - 상태 규칙
5. Theme - 테마 규칙

 

1-1) Base - 기본규칙

• 각 브라우저의 스타일을 초기화 시키는 목적으로 사용.
• 요소(elements) 스타일의 기본값 지정 (reset.css , normalize.css)

 

1-2) Layout - 레이아웃 규칙

• 큰 틀의 레이아웃, 페이지의 다양한 요소를 배치, 구별하는데 사용

• 주요 컴포넌트 : header, footer, content, aside .. etc

• 하위 컴포넌트 : 주요 컴포넌트 내에 있는 컴포넌트 (nav, item list, form.. etc)

• 주요 컴포넌트는 id 셀렉터 / 하위 컴포넌트는 class 셀렉터로 스타일 작성

• 클래스명은 접두사로 l- , laylout- 명시

  • ex. l-fixed 유무에 따라 가변폭으로 할지 고정폭으로 할지 결정하는 레이아웃

#cotent {...}
#aside {...}
.l-fixed #content {...}
.l-fixed #aside {...}

 

1-3) Module - 모듈 규칙

• 페이지에서 재사용 가능한 구성요소 (버튼, 위젯, 배너.. 등)
• 모듈은 레이아웃 구성요소 안에 존재하나 다른 모듈에서도 존재할 수 있음
• 각 모듈은 독립형으로 존재하도록 설계
• 재사용을 위해 CSS선택자로id 태그 사용하지 않음

<div class="box">
  <span class="box-name">...</span>
  <span class="box-items">...</span>
</div>
<!-- CSS -->
.box {...}
.box-name {...}
.box-items {...}

 

1-4) State - 상태 규칙

• 요소의 상태변화를 표현하는 스타일
• 주로 JavaScript로 조작되는 클래스 지정
• 클래스명은 접두사로 is- 등을 명시 (is-hidden, is-collapsed)
• 모듈과 레이아웃 둘 다 적용

<!-- 레이아웃 요소, 접힌 상태 -->
<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>

 

1-5) Theme - 테마 규칙

• 사용자가 테마를 선택할 수 있는 경우 사용
• 색상, 이미지를 불변하는 스타일과 분리 (background, color, border..)
• 메인 스타일 뒤에 읽어 들이게 하고 덮어쓰기를 하거나 기존 스타일을 재선언하여 사용
• theme- 등의 접두어를 명시 또는 theme/ 와 같은 디렉토리로 계층 분리
• 자주 사용되지는 않음

/* main.css */
.box { border: 1px solid; }

/* theme.css - main.css 뒤에서 읽도록 */
.box { border-color: blue; }

 

 

---

 

Reference

https://velog.io/@yesdoing/BEM-Block-Element-Modifier-Quick-start

https://github.com/hohoya33/css-methodologies

https://chlolisher.tistory.com/11