- OOCSS
Object Oriented CSS
CSS를 캡슐화하여 중복을 최소화한다.
컨테이너와 컨텐츠를 분리한다.
구조와 모양을 분리한다.
ex)
컨테이너: .header, .footer
컨텐츠: .common-width
구조: .button, .box, .widget
모양: .skin
분리한 CSS를 결합하여 다양한 결과물을 얻을 수 있다.
다중 클래스 사용으로 HTML 코드가 복잡해지고 유지보수가 어려워진다.
클래스 사용이 non-semantic 해진다.
- SMACSS
Scalable Modular Architectiure CSS
CSS를 Base, Layout, Module, State, Theme 5종류로 나눈다.
Base는 기본스타일. reset, default 등
Layout은 "l-"을 앞에 붙인다.
Module은 table, icon, box 같이 재사용성이 높은 요소를 정의한다.
State는 상태를 나타내며 active, disabled, hover, hidden 등이며 "is-"나 "s-"를 붙인다.
Theme는 전반적인 Look and feel을 정의하며 "theme-"를 붙인다.
- BEM
Block Element Modifier
Block__Element--Modifier 형태로 사용한다.
Block은 header나 footer같이 요소를 담고 있는 컨테이너
Element는 블록 안에서 특정 기능을 수행하는 컴포넌트
Modifier는 boolean이나 key-value 형태로 넣을 수 있다.
ex)
.header__logo
.form__button--disabled
- ITCSS
- Inverted Triangle CSS (역삼각형 CSS)
특정한 컴포넌트를 어떤 명시도로 접근할 것인지 정하는 구조
예를 들어 버튼 컴포넌트는 .c-button으로 작성하여 컴포넌트임을 나타내고
다른 항목으로 착각하지 않도록 한다.
다음은 ITCSS의 모든 레벨이다.
- Settings
일반적으로 CSS를 생성하지 않지만 클래스에 적용되는 변수의 모음.
베이스, 색상, 폰트, 애니메이션
- Tools
일반적으로 CSS를 생성하지 않지만 클래스의 속성을 작성/확장하는데 도움을 주는 전처리 함수.
함수, 플레이스홀더, 믹스인 등
- Vendors
프로젝트에 사용되는 서드파티 스타일.
reset.css, nomalize.css, Bootstrap 등
- Objects
레이아웃과 같이 아이템을 정렬하는 디자인 패턴. 모든 페이지에서 사용.
"o-"로 시작한다.
o-page, o-main, o-container, o-content, o-grid 등
- Elements
클래스의 이름에 따라 스타일링을 하지 않는 HTML 기본 엘리먼트.
"e-"로 시작한다.
a { text-decoration: none; } 등
- Components
웹사이트의 일부를 구성하는 작은 기능.
버튼, 아코디언 메뉴, 슬라이더, 모달 다이얼로그 등.
각 컴포넌트는 혼자 완전한 기능을 수행한다.
"c-"로 시작한다.
- Patterns
대부분 컴포넌트와 패턴을 동의어로 사용한다.
취향에 따라 패턴을 컴포넌트의 조합으로 사용할 수 있다.
패턴은 재사용할 수 없다.
"p-"로 시작한다.
- Scopes
특정한 목적을 위해 모든 스타일을 덮어쓸 수 있도록 높은 명시도를 준다.
스코프는 꼭 필요한 경우에만 사용한다.
"s-"로 사용한다.
- Utilitys
특정 장소의 특정 스타일만 변경하고 싶을 때 사용한다.
전체 CSS구조를 변경하지 않고 업데이트하는 것을 도와준다.
"u-"로 시작한다.
- 추가 네임스페이스
is- : 블록이나 엘리먼트의 상태를 나타낸다. ex) .is-active
js- : 특정 엘리먼트가 자바스크립트 이벤트에 바인딩 되어 있을 때. ex) js-menu-click
- BEMIT
BEM + ITCSS
BEM은 부모와 자식간의 관계를 잘 보여주지만 전체 페이지에서 무슨 역할을 하는지 파악하기 어려다.
그래서 BEM에 ITCSS의 역삼각형 구조와 네임스페이스를 합친 것이 BEMIT이다.
BEM구조 앞에 접두사(네임스페이스)를 붙여 어떤 역할을 하는지, 얼마나 많은 페이지에 공통적으로 사용되는지 알 수 있다.
ex)
요소가 모든 페이지에 잠재적으로 나타난다면 "o-"가 앞에 붙는다.
요소가 반복되지만 특정 페이지에서만 사용된다면 "c-"가 앞에 붙는다.
요소에 특정한 CSS를 주기 위해서 사용한다면 "u-"가 앞에 붙는다.
- ATOMIC Design
아토믹 디자인은 디자인 시스템을 만드는 하나의 방법론으로 5단계로 구분된다.
Atoms(원자), Molecules(분자), Organisms(유기체), Templates, Pages
- Atoms
원자는 물질을 이루는 기본 단위이다.
웹 인터페이스에 적용되며 폼의 텍스트 레이블, 인풋 필드, 버튼과 같은 HTML 태그이다.
컬러 팔레트, 폰트, 애니메이션과 같은 추상적 요소가 포함되기도 한다.
원자는 그 자체로 유용하지는 않지만, 패턴 라이브러리 관점에서 레퍼런스로 유용하다.
- Molecules
결합된 원자의 그룹이며 화합물의 가장 작은 기본 단위이다.
분자들은 그 자체의 특정을 갖고 있으며 디자인 시스템의 중추 역할을 한다.
예를 들어 레이블, 인풋, 버튼은 각 개별 요소 자체만으로는 유용하지 않지만
폼으로 구성되어 결합하면 실제로 역할을 가질 수 있다.
원자에서 분자를 만들 때는 "한 가지만 하고 그것 하나만 잘 하자"라는 방식으로 만드는 것을 권장한다.
- Organisms
분자들을 결합하여 유기체를 형성할 수 있다.
유기체는 비교적 복잡하며 인터페이스에서 구분된 영역을 형성한다.
예를 들어 헤더 유기체는 로고, 메인 네비게이션, 검색, 소셜 미디어 채널 리스트와 같은 컴포넌트들로 구성될 수 있다.
제품 그리드 유기체는 제품 이미지, 제품 타이틀, 제품 정보 등 반복되는 분자로 구성될 수 있다.
분자에서 유기체로 구축하기 위해서 컴포넌트가 독립적이고 기동성이 있고 재사용이 가능해야 한다.
- Templates
템플릿은 페이지를 구성하기 위해 서로 꿰매어진 유기체 그룹으로 구성된다.
이 부분에서 디자인을 확인하고 레이아웃이 실제로 구동하는지 볼 수 있다.
템플릿은 매우 구체적이며 추상적인 분자와 유기체에 대한 맥락을 제공한다.
- Pages
페이지는 템플릿의 특정 인스턴스이다.
여기서는 플레이스 홀더 콘텐츠가 실제 대표 콘텐츠로 대체되어 사용자가 보는 디자인을 정확하고 구체적으로 구현한다.
- ABEM
ATOMIC Design + BEM
아토믹 디자인의 원자, 분자, 유기체를 접두사로 사용하여 요소의 구성 단계를 나타낸다.
요소가 원자라면 앞에 "a-"
요소가 분자라면 앞에 "m-"
요소가 유기체라면 앞에 "o-"
를 붙인다.
ex)
.a-button, .a-button-primary
.m-teaser, .m-teaser__title
.m-menu, .m-menu__link
.o-teaser-list, .o-teaser-list__title, .o-teaser-list__teaser
기타 클래스 이름의 접두사는 다음과 같다.
"js-"
"u-"
