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- 명시

• 장점

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

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

  • 확장의 용이성

• 단점

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

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

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