CSS 를 구조로 두기

파일이 길어지면

연습할 때는 규칙이 스무 줄입니다. 실제 사이트는 수천 줄이 됩니다. 그때부터 어디에 무엇이 있는지와 이 규칙을 고쳐도 되는지가 문제가 됩니다.

이 단원은 그것을 다스리는 방법입니다. 도구를 들이지 않고 이름과 파일 나누기 만으로 합니다.

파일을 나누고 잇기

CSS 는 다른 CSS 를 불러올 수 있습니다. 화면에는 파일 하나만 연결하고, 그 파일이 나머지를 부릅니다.

/* @import 는 파일 맨 위에 있어야 합니다 */
@import "blog.css";

/* 이 화면에서만 쓰는 규칙 */
.list-item { padding: 14px 0; }

<link rel="stylesheet" href="/css/blog/list.css">

이 사이트가 그 방식입니다. 화면마다 자기 CSS 만 연결하고, 그 파일이 공용 CSS 를 @import 합니다. 공용 파일을 화면에서 따로 연결하지 않습니다.

형제끼리 부르기 시작하면 어느 화면이 어떤 규칙을 받는지 알 수 없게 됩니다. 한 파일을 고쳤을 때 어디가 바뀌는지 예측할 수 없어지는 것이 그 시작입니다.

이름을 짓는 규칙

1.8 에서 "모양이 아니라 무엇인지로" 지으라고 했습니다. 파일이 커지면 규칙이 하나 더 필요합니다 — 어디에 속한 것인지.

.title { }
.item  { }
.red   { }
.big   { }

.card-title { }
.card-item  { }
.is-active  { }
.is-hidden  { }

• 덩어리 이름 + 부분 이름 — card·card-title·card-body.
• 상태는 is- — is-open·is-active·is-hidden.
• .title 처럼 흔한 이름은 다른 곳에서 또 쓰게 됩니다. 그때 한쪽을 고치면 다른 쪽이 깨집니다.

덩어리로 묶어 적기

<article class="card">
  <h4 class="card-title">진행 중인 일</h4>
  <p class="card-body">아직 끝나지 않았습니다.</p>
</article>

<article class="card is-done">
  <h4 class="card-title">끝난 일</h4>
  <p class="card-body">상태 클래스 하나로 달라집니다.</p>
</article>

/* ── 카드 ─────────────────────────────
   덩어리 하나를 한자리에 모아 둡니다. 찾을 때 흩어져 있지 않습니다. */
.card {
  border: 1px solid #e5e0f5;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 10px;
}

.card-title { margin: 0 0 6px; font-size: 1rem; }
.card-body  { margin: 0; color: #5b6272; }

/* 상태는 is- 로 시작합니다 */
.card.is-done {
  opacity: 0.55;
  background: #f8f9fa;
}

덩어리마다 주석으로 칸을 나누십시오. 파일이 길어져도 찾는 자리가 한 군데입니다.

적는 차례

파일 안에서 규칙을 놓는 차례를 정해 두면 충돌이 줄어듭니다. 넓게 걸리는 것부터 좁은 것 순입니다.

1. :root 의 이름들(4.4)
2. *·body 같은 바탕 규칙
3. 태그 규칙 — h1·a·img
4. 덩어리 규칙 — .card·.form
5. 상태 규칙 — .is-done
6. 미디어 쿼리(4.1)

2.8 에서 본 대로 같은 명시도면 나중 것이 이깁니다. 이 차례를 지키면 !important 를 쓸 일이 거의 없어집니다.

세 가지

• 형제 파일을 @import 합니다. 어느 화면이 어떤 규칙을 받는지 알 수 없게 됩니다. 필요하면 공통 위쪽으로 옮기십시오.
• 흔한 이름을 씁니다. .title·.box 는 반드시 다른 곳에서 또 쓰게 됩니다. 덩어리 이름을 앞에 붙이십시오.
• 같은 덩어리의 규칙이 파일 여기저기에 흩어집니다. 고칠 때마다 전부 찾아야 하고 하나를 놓치기 쉽습니다.

직접 해보기

.red { color: red; }
.card h4 { font-size: 1rem; }
body { line-height: 1.8; }
.big { font-size: 20px; }
.card { padding: 14px; }

정리

• 화면에는 자기 CSS 만 연결하고 그 파일이 공용을 @import 합니다.
• 위쪽(공용)만 부릅니다. 형제는 부르지 않습니다.
• 이름은 덩어리 이름 + 부분 이름, 상태는 is- 로 시작합니다.
• 넓게 걸리는 규칙부터 좁은 것 순으로 적습니다.