CSS 방법론[SMACSS, BEM, OOCSS]

표정민·2020년 7월 2일
2
post-thumbnail

🥠 공통 지향점

  1. 코드의 재사용성 높이기
  2. 쉽게 유지보수 할 수 있도록 하기
  3. 확장 가능하게 하기
  4. 클래스명으로 무슨 의미인지 예측 가능하도록 하기

🥠 SMACSS(Scalable & Modular Architecture for CSS)

  • Class명을 통한 예측
  • 재사용
  • 쉬운 유지보수
  • 확장
  1. Base

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

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

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

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

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

    • 파생된 선택자 사용 금지
    • ID 사용 금지
    • !important 사용 금지
    • class명은 의미있게
    • class명은 다른이가 이해할 수 있도록 선언

🥠 BEM(Block Element Modifier)

  • Block, Element, Module 약자
  • ID는 사용할 수 없다.
  • 오직 Class명만 사용한다.
  • ex) .header_navigation-secondary
  1. Block

    • 문단 전체에 적용된 element 또는 element를 담고 있는 컨테이너
    • head block > menu block, logo block, search block, auth block...
  2. Element

    • block 안에서 특정 기능을 수행하는 컴포넌트
    • element는 상황에 따라 달라진다.
    • 각 element는 두 개의 밑줄표시로 연결하여 block다음에 작성한다.
    • ex) .headerlogo, .headersearch, .headermenu, .headerlogin 등
    • block과 element명이 길면 '-'으로 연결한다.
    • ex) .block-name__element-name
  3. Modifiers(수식어, 접미사)

    • block, element의 속성이다.
    • 이 속성은 block, element의 외관과 상태를 변화시킨다.
    • class명은 '-' 추가하여 modifier 추가
    • class명은 구체적이고 명료해야 한다.
    • class명은 HTML 안에서도 읽기 쉬워야 한다.
    • class명은 무엇을 나타내는지 분명해야 한다.

🥠 OOCSS(Object Oriented CSS)

  • Object Oriented Css 약자
  • css를 모듈화하여 중복을 최소화 한다
  • 구조와 외양을 분리한다.
  • 결합하면 다양한 결과물을 얻을 수 있다.
  • 외양 : .button, .box, .widget, .skin...
  • 컨테이너와 컨텐츠 분리
  • ex) .globalwidth + .header-inside / .main / .footer-inside
  • ex) .btnbase + .twitter / .facebook
  • 단점) 다중 클래스 사용으로 HTML코드가 복잡해 진다.
  • 단점 ) non-semantic한 클래스 사용

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

0개의 댓글