📂 CSS 파일 구조 설계 – reset, base, layout, components 분리하기

📂 CSS 파일 구조 설계 – reset, base, layout, components 분리하기

작은 프로젝트에서는 한 파일로도 충분하지만, 규모가 커질수록 CSS를 모듈화하고 체계적으로 분리하는 것이 매우 중요해집니다. 이 글에서는 실무에서 널리 사용하는 CSS 파일 구조 전략을 소개합니다.

---

1️⃣ CSS 구조를 나누는 기준

• **reset**: 브라우저 기본 스타일 초기화
• **base**: HTML 태그 기본 스타일 정의
• **layout**: 전체 레이아웃 구성 (그리드, 헤더, 푸터 등)
• **components**: 버튼, 카드, 모달 등 UI 단위
• **utilities**: margin, padding 등 유틸리티 클래스

---

2️⃣ 디렉토리 예시 구조

/css
  ├── reset.css
  ├── base.css
  ├── layout/
  │    ├── header.css
  │    ├── footer.css
  │    └── grid.css
  ├── components/
  │    ├── button.css
  │    ├── modal.css
  │    └── card.css
  ├── utilities.css
  └── main.css

main.css에서 나머지 파일들을 @import 또는 @layer로 불러옵니다.

---

3️⃣ 각 파일 역할 설명

✔️ reset.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

✔️ base.css

body {
  font-family: 'Noto Sans KR', sans-serif;
  line-height: 1.6;
  color: #333;
}

a {
  text-decoration: none;
  color: inherit;
}

✔️ layout/header.css

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

✔️ components/button.css

.button {
  padding: 10px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
}

---

4️⃣ 유지보수를 위한 팁

• 파일이 커지면 쪼개라! – 한 파일에 너무 많은 스타일을 담지 말 것
• 의미 단위로 분리 – 기능, 위치, 역할 기준으로
• 컴포넌트 중심 – 재사용 가능한 UI 단위로 작성

---

5️⃣ SCSS 사용 시의 구조 예시

/scss
  ├── _reset.scss
  ├── _base.scss
  ├── _variables.scss
  ├── layout/
  ├── components/
  └── main.scss

// main.scss
@import 'reset', 'base', 'variables', 'layout/header', 'components/button';

SCSS에서는 _underscore 파일로 분리하고 main에서 import로 구성합니다.

---

📌 정리 요약

• reset → base → layout → components 순으로 스타일 정의
• 재사용성을 높이고 유지보수를 쉽게 하기 위해 분리
• SCSS 사용 시에는 @import 또는 @use 방식으로 더 효율적 구조 가능

---

📌 다음 글 예고

다음 글: BEM(Block Element Modifier) 방식의 네이밍 전략에서는 CSS 클래스 명명 규칙을 체계적으로 관리하는 BEM 패턴을 소개합니다.