마크업 작성 시 고려할 점에 대한 정리(1)
1. 마크업 방법론에 대해서 …
먼저, 몇가지 마크업과 관련된 대표적인 방법론에 대해 알아보자.
A. BEM(Block Element Modifier)
기본 원칙
- Block을 독립적이고 재사용가능하게!
- 네임스페이스 개념 적용
형태
form : block__element–modifier (영역__요소–상태)
e.g. className : .header__navigation–hover
구성
- Block : 화면을 구성하는 섹션영역을 블록으로 그룹핑하여 Block으로 지정한다. Header, Content, Footer, Sidebar …
- Element : Block을 구성하는 조각이다.(the piece of block)
- Modifier : 선택되는 element의 style 변화(수정:modification)를 위한 네이밍이다.
특징
pros
- 모듈 별 독립성 확보하여 화면 안에서 영역별 블록 단위로 구분하는 방식이기 때문에 이해하기 편하다.
- modifier를 명시하여 가독성을 높인다.
cons
- 화면 내 영역별 블록 단위로 구분해 이해하기 편하나 자칫 영역별로 내부에 용도가 겹치는 요소 간의 중복 style 코드가 발생할 수 있다.
- 클래스 명이 길어질 수 있다.(누군가에겐 생김새가 마음에 들지 않을 지도…)
B. OOCSS 방법론(Object Oriented CSS)
기본 원칙
- 구조(structure)와 모양(skin)의 분리 : 반복적인 시각적 스타일(배경, 테두리 …)을 분리하여(이 방법론은 반복적 시각적 스타일을 ‘skin’으로 정의함) 다른 요소와 혼합하여 시각적 다양성 및 독립서을 추구한다.
- 컨테이너와 콘텐츠의 분리 : 스타일 정의 시, 위치에 의존적인 스타일을 사용하지 않는다.(BEM이 화면 섹션 어디에 위치하느냐로 네이밍 하는 것과 상충되는 면이 있다.)
형태
- 화면을 구성하는 작은 단위 요소(객체)에 네이밍한다.(e.g. .btn, .nav, .input)
- 간결하고 짧게!
- 기능(목적)을 기준으로 작성한다.
- 특정적이기 보다는 일반적인 형태로 사용가능 하도록 작성한다.
특징
pros
- 재사용성
- 유지보수성 유리
cons
- 태그 내 클래스 부가 지저분해지기 때문에 코드 가독성이 떨어 질 수 있다.
- 위 단점으로 인해 유지 보수성에 오히려 불리해질 수 있다.
참고
- Airbnb CSS Styleguide : BEM과 OOCSS을 혼용해 서로의 한계를 보완하여 사용한다.
C. SMACSS 방법론
기본 원칙
- 스타일을 5가지로 분류하여 작성한다. → Base, Layout, Module, State, Theme
- 재사용성, 가독성, 유지 보수성을 고려한다.
- 선택자로 id 셀렉터, element를 사용하지 않는다.(element는 자식선택자 ‘>’와 사용가능한 것으로 제한)
형태
- Base: 요소의 기본(default) 스타일 네이밍(e.g. 요소 선택자, 부모 형재 선택자)
- Layout: 페이지를 구획하는 요소(header, footer, section, div)에 대한 클래스 네이밍이다. prefix를 정해서 구분해 사용하여 재사용성을 높인다.(e.g. ‘l-‘를 prefix로 사용한다면 class=”l-div”, class=”l-footer”)
- Module: Layout 하위에 들어가는 요소들에 대한 선택을 어떻게 할지에 대한 것이다. 자식 선택자 ‘>’를 이용하여 접근한다.
- State: 상태를 나타내는 클래스 네이밍이다. prefix를 이용한다. Hidden, Expand, Active, Hover 등의 상태를 나타내기 위해 사용 (e.g. ‘is-‘, ‘s-‘ 등의 prefix를 이용한다면 ‘is-hover’, ‘s-hidden’ )
- Theme: 페이지 전반의 Look&Feel을 제어하는 용도의 클래스 네이밍이다.
특징
pros
- 재사용 가능
- 네이밍을 통해 예측이 가능하다.
- 확장 유리
cons
- 5가지 형태 및 여러 제한적인 규칙에 대한 적응이 필요할지도…
D. 결론
세가지 방법론 모두 공통적으로 재사용성, 유지보수성을 각자 컨셉에 맞게 제안하고 있다. 화면의 복잡도와 요소 간의 관계에 따라 적합한 방법론을 적용하고 필요에 따라서 방법론을 부분 차용하여 혼합해 사용할 수 있다. 적용하고자 하는 프로젝트에 참여하는 팀원 간의 협의를 통해 가장 효율적인 작성 룰을 정하면 되겠다.
- 재사용성, 유지 보수성을 높이는 방법에 대해 고민해야한다.(CSS Preprocessor가 고려될 수 있다.)
- 나만의 노하우, 우리 팀만의 룰을 정하자.(방법론은 방법론일 뿐!)
Leave a comment