[CSS] 방법론

BEM (Block Element Modifier)

block(전체를 감싸고 있는 블록요소)__element(내부 요소)--modifier(기능/수정)

• B (Block)

  • 블록(block)은 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 지칭
  • header, footer, main 영역을 가지고 있다고 가정하면, 이 각각의 영역들이 블록으로 간주
  • 블록 요소는 클래스의 어근을 형성하고 항상 맨 앞에 위치
  • 일단 블록을 정의하면, 블록이 형성한 클래스의 어근을 맨 앞에 붙여 그 블록이 포함하는 요소들의 클래스명을 정함

• E (Element)

  • 요소(element)는 블록이 포함하고 있는 한 조각, 블록을 구성하는 한 요소 단위
  • 요소는 블록 요소에 대한 자식 요소 개념이기 때문에 블록 요소에 의존적인 형태
  • 요소는 두 개의 밑줄 표시(underscore)로 연결하여 블록 다음에 위치

• M (Modifiers)

  • modifier은 블록 또는 요소의 속성(속성 / 수정)
  • 이 속성은 블록 또는 요소의 외관이나 상태를 변화시키는 것
  • 특정 요소의 스타일을 수정할 필요가 있을 때, modifier만 활용
  • modifier를 구분해주기 위하여 요소 또는 블록 다음에 두 개의 하이픈(‘‐‐’)을 추가하여 modifier을 표시

👍 장점

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

👎 단점

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

🤷‍♂️ 예시

<header class="header">
  <p class="header__title">헤더 제목</p>
  <div class="header__logo">헤더 로고</div>
  <form>    
    <fieldset>
      <div class="header__search">
        <input type="text" class="header__search--insert">
        <button type="submit" class="header__search--btn">검색</button>
      </div>
      <div class="header__search--result">검색결과</div>
    </fieldset>
  <form>
</header>

OOCSS (Object Oriented CSS)

Nicole Sullivan에 의해 개발된 프레임워크로, CSS를 모듈 방식으로 코딩하여 중복을 최소화하는 기법

작성원칙 👉 구조와 외형의 분리 + 컨테이너와 내용의 분리

• 구조와 외형의 분리
  • 구조 : width, height, padding, margin, border
  • 외형 : color, border-color, font-color, background-color
• 컨테이너와 내용의 분리
  • 위치에 의존하지 않는 스타일 정의
  • 어떤 태그라도 동일한 외형 제공
  • 어디에서나 재사용이 가능한 클래스 기반 모듈 구축

👍 장점

• 코드의 재사용으로 코드 양이 줄어듬. 즉, CSS 파일 크기가 작아져 속도가 향상
• 새로운 요소를 추가할 때, 기존 모듈을 통해서 재사용이 가능하고 쉽게 확장 가능하여 유지보수에 용이

👎 단점

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

🤷‍♂️ 예시

<button type="button" class="btn-base cart">장바구니</button>
<button type="button" class="btn-base buy">바로구매</button> 

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

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

SMACSS (Scalable and Modular Architecture for CSS)

CSS에 대한 확장형 모듈식 구조의 형태로 5개의 구분된 카테고리로 CSS 코딩 기법을 제시하는 방법

• Base

  • 기본 스타일(Reset, Default .. )
  • 기본 스타일에는 !important 사용할 필요가 없다.

• Layout

  • 레이아웃과 관련된 스타일 정의
  • class명에 'l-' suffix(접미사)를 붙인다.

• Module

  • 모듈과 관련된 스타일 정의
  • 스타일 재사용을 위한 요소다
  • Block, Element, Module
  • 재사용을 위해 ID와 element 사용 금지(element를 사용해야 한다면 자식 선택자를 사용한다)

• State

  • 상태를 나타내는 스타일 정의
  • hidden, expend, active, hover 등
  • class명에 's-' suffix를 붙인다.

• Theme

  • 사이트의 전반적인 look과 feel 제어
  • 색이나 이미지를 불변하는 스타일과 분리 → 기존의 스타일을 재선언 할 수 있다.
  • 적용 점위가 넓으면 'theme-' suffix를 붙인다.

❗ 유의사항
파생된 선택자 사용 금지
ID 사용 금지
!important 사용 금지

👍 장점

• 클래스명을 통한 예측의 용이성 -> js이벤트 예측이 가능
• 재사용을 통한 코드의 간결화
• 확장의 용이성

👎 단점

• 카테고리를 나누는 기준이 작성사에 따라서 불분명해질 수 있음
• 코드를 나누어서 작성해야 하기 때문에 CSS를 사용하기 번거로움

🤷‍♂️ 예시

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