[CSS] CSS방법론

CSS방법론: 유지보수가 용이한 CSS 작성 방법

OOCSS

CSS를 모듈 방식으로 코딩하여 중복을 최소화
구조와 스킨(모양) 분리

/* 구조 */
.btn { … }

/* 스킨 */
.accept { … }
.cancel { … }

구조속성: width,height,padding,margin 등
스킨속성: color,font,background,box-shadow 등

컨테이너, 컨텐츠 분리

/* .main .btn (x) */
.main { … }
.btn { … }

SMACSS

Scalable and Modular Architecture for CSS
CSS에 대한 확장형 모듈식 구조
CSS코드를 그 역할에 따라 분류

파생된 CSS 셀렉터 사용금지
ID 셀렉터 사용금지
!important 사용 금지

Base

기본 스타일(Reset, Default, Variables, Mixins)
기본 스타일에는 !important 사용할 필요가 없다

Layout

레이아웃 관련 스타일
클래스명에 접두사 l- 명시
주요 컴포넌트 id셀렉터(header,footer 등)
하위 컴포넌트 class셀렉터(nav,form 등)

#content { … }
.l-fixed #content { … }

Module

모듈 관련 스타일
스타일 재사용을 위한 요소
Block, Element, Module
재사용을 위해 ID와 element 사용 금지(element를 사용해야 한다면 자식 선택자(>) 사용)

State

요소의 상태변화를 표현하는 스타일(ex, 툴팁,아코디언)
주로 JavaScript로 조작되는 클래스
클래스명에 접두사 is- 명시
!important사용 가능

is-hidden { … }
is-error { … }
is-hover { … }

Theme

사이트의 전반적인 look과 feel 제어
사용자가 선택 가능하도록 스타일을 재선언하여 사용
클래스명에 접두사 theme- 명시

BEM

Block Element Modifier

• OOP(Object Oriented Programming)와 유사
• 오직 class명만 사용(id 사용x)

장점: 직관적인 클래스 명으로 구조 파익이 쉽다.
단점: 클래스명이 상대적으로 길어진다.

Blcok

element를 담고 있는 컨테이너
(ex, logo, login, form, menu, search, from, content, footer)

.header { … }
.menu { … }
.search { … }

Block들은 서로 중첩될 수 있다

Element

Blcok 안에서 특정 기능을 수행하는 컴포넌트
두 개의 Underscore(Lodash)기호로 연결하여 block 다음에 작성

.header__logo { … }
.header__menu { … }
.header__search { … }
.header__login { … }

이름이 길 경우 -사용

.block-name__element-name

Element들은 서로 중첩될 수 없다
block__element1__element2는 잘못된 구조다

Modifiers

block 또는 element의 속성으로 외관이나 상태를 변화시킴
두 개의 Hyphen(Dash)기호로 연결하여 사용

.block--modifier {…}
.block__element--modifier {…}

Boolean 유형
Modifier 유무만 중요하고 그 값이 무관할 때 사용: disabled, focused
수식어가 있으면 값이 true라고 가정

.form__button--disabled {…}

key-value 유형

.form__button--color-red {…}
.form__button--theme-ocean {…}

Utility-First CSS / Functional CSS

예시: Tailwind CSS, Tachyons, Atomic CSS

• 시멘틱하고 컨텍스트에 의존하지 않은 CSS 작성
• 클래스명으로 바로 유추할 수 있도록 단 하나의 속성과 값을 나타내는 CSS를 사전에 정의
• 미리 정의된 클래스를 HTML에서 조합해서 사용

<button class="w-1/2 rounded-md border border-gray-300">Button</button>

inline style과 다른점

• 의사 클래스 셀렉터 사용 가능
• media query 사용 가능