설계 기법 2 - SMACSS

Ye Seo Lee·2022년 12월 14일

CSS 설계 가이드

CSS 설계

목록 보기

3/5

SMACSS (스맥스)

Scalable and Modular Architecture for CSS 의 약어
= CSS를 위한 확장 가능한 모듈 아키텍처
CSS 코드를 역할에 따라 분류한 것

1. 베이스 (Base) 규칙

프로젝트의 표준 스타일 정의 (reset.css 포함)
프로젝트 내에서 각 요소가 표준으로 어떻게 동작하는지를 정의
-> 특정한 상황에서의 사용을 가정하는 id나 class, !important 사용 XX

사용 가능한 셀렉터

요소형 (body)
자녀 (>)
손자 (ul li)
의사 클래스 (:hover 등)
속성 (a[href] 등)
인접 형제 (+)
일반 형제 (~)

2. 레이아웃 (Layout) 규칙

큰 모듈(헤더, 메인 영역, 사이드 바, 푸터 등)에 관한 규칙
id, class(접두사 l- 사용) 활용한 스타일링 허용

3. 모듈 (Module) 규칙

레이아웃 모듈 안에 반복적으로 배치될 수 있는 개별 모듈(class)
다른 페이지로 이동하거나 다른 레이아웃에 삽입하더라도 그대로 사용할 수 있어야한다.
ex) 타이틀, 버튼, 카드, 네비게이션, 캐러셀 등

주의사항

가급적 요소형 셀렉터를 사용하지 않는다.
시맨틱 요소에만 요소형 셀렉터를 사용한다.

시맨틱 요소 (Semeantic)
그 자체에 의미를 가진 요소
해당 요소 이름만 봐도 사용된 의미를 명확히 알수있다. (form/table/img 등)
^관련 설명 : https://www.devkuma.com/docs/html/html5-%EC%8B%9C%EB%A9%98%ED%8B%B1-semantic-%EC%9A%94%EC%86%8C/
^SMACSS에서 시멘틱 특성 공식
범용적 요소(div, span 등) < 의미를 가진 요소(제목) < 클래스 속성이 붙은 요소
요소형 셀렉터를 사용할 때는 자녀(>) 셀렉터를 사용한다.(손자 X)
스타일을 덮어쓰기 위한 서브 클래스를 사용한다.
(특정한 콘텍스트에 대한 의존성 줄이기)
일반 클래스와 서브 클래스를 구분하기 위해서 "더블 하이폰" 같은 개별 규칙 추가해야됨

.btn // 모듈 기본 스타일
.btn-small // 모디파이어
.btn--long // 서브클래스

4. 스테이트 (State) 규칙

1) 상태 스타일은 레이아웃이나 모듈에 할당할 수 있다.
2) 상태 스타일은 자바스크립트에 의존한다는 의미를 갖는다.

접두사(is-)를 사용한다. (is-active, is-error 등)
필요한 경우 !important 사용을 허용한다.

.tabnav {display: flex}
.tabnav > li {border: 1px 1px 1px 0 solid #aaa}
.tabnav > li:first-child {border-left: 1px solid #aaa}
.tabnav > li > a {
  display: block;
  padding: 10px 30px;
  text-decoration: none;
}
.is-tabnav-active {background: #0093ff}
.is-tabnav-active a {
  pointer-events: none;
  color: #fff;
}
// 또는...
.tabnav > li.is-active
.tabnav > li.is-active a