CSS 방법론

[CSS 방법론] BEM 방식 - 나나님 CSS방법론 : OOCSS, BEM, SMACSS - limewhale님

CSS 방법론의 필요성

  • 협업 시 사람마다 다른 코드 구조 및 스타일 정의

  • 네이밍 규칙

  • 유지보수, 재사용성

OOCSS(Object Oriented CSS)

  1. 구조와 외형의 분리(공통 스타일 추상화)

    • 구조 : width, border, padding, margin ... (공통적인 구조지정)

    • 외형 : color, border-color, background-color ...

  2. 컨테이너와 내용의 분리

    • 위치에 의존하지 않는 스타일 정의

    • 클래스 명을 부여하고 스타일을 지정(태그 선택X)

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

  • 장점

    • 공통된 부분을 정의해서 재사용 용이

    • 동일한 클래스라면 동일한 스타일 기대

    • 코드 양이 줄어듬

  • 단점

    • 공통 클래스가 많아 수정 발생 시 멀티 클래스 사용(+Sass와 사용하기도함)

    • 멀티 클래스가 많아짐에 따라 유지보수 어려움

    • 가독성이 떨어짐

BEM(Block Element Modifier)

  • ID 사용X. Class만 사용. 목적에 따라 네이밍(케밥 케이스)

    1. .block : 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트(중첩 가능)

    2. __element : 블럭을 구성하는 단위(중첩 가능)

    3. --modifier : 블럭이나 엘리먼트의 속성

  • 장점

    • 클래스 네임만으로 마크업 구조를 알 수 있음

  • 단점

    • 클래스 네임이 길어질 수 있음

    • 기존 마크업에서 새 기능 추가 시 클래스명 재수정이 불편

SMACSS(Scalable and Modular Architecture for CSS)

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

  1. Base - 기본규칙

    • 각 브라우저의 기본스타일, elemnet 스타일의 기본 정의 값

  2. Layout - 레이아웃 규칙

    • 큰 틀의 레이아웃, 요소를 배치, 구별하는데 적용

    • header, footer, aside, content 등

    • 하위 : list, item, form 등

    • 클래스 명은 l-, layout- 명시

  3. Module - 모듈 규칙

    • 페이지에서 재사용 가능한 요소 : 버튼, 배너, 아이콘, 박스 요소 등

    • 각 모듈은 독립성을 가지게 스타일 선언 : id,태그선택자X

  4. State - 상태 규칙

    • 요소의 상태변화를 표현하는 요소 : 툴팁, 아코디언 등

    • active나 disable 등. is-, s- 명시

    • 모듈과 레이아웃 모두 적용 가능

  5. Theme - 테마 규칙

    • 사용자가 선택 가능하도록 스타일을 재선언하여 사용

    • 전반적으로 look and fell을 정의. theme- 명시

  • 장점

    • 클래스명을 통한 예측의 용이성

    • 재사용을 통한 코드의 간결과

    • 확장의 용이성

  • 단점

    • 카테고리를 나누는 기준이 작성자에 따라 불분명

    • 코드를 나누어서 작성해야 하기 때문에 번거로움

    • 잘못 사용하면 오히려 더 복잡하고 번거로워짐

PreviousHTML&CSSNextCSS 기초

Last updated