한 줄 CSS 규칙

일반 스타일 규칙은 한 선택자에 한 줄 규칙을 기본 원칙으로 합니다. 전역 토큰을 선언하는 :root는 한 줄에 토큰 하나씩 펼치는 예외입니다. 이 규칙은 스타일 표현보다 구조와 의도를 읽기 쉽게 만들기 위한 기준입니다.

---

한 줄 CSS 규칙의 정의

한 줄 CSS 규칙은 하나의 선택자에 대해 하나의 선언 블록을 한 줄로 작성하는 방식을 의미합니다.

이 규칙은 CSS의 동작 방식이 아닌, 가독성과 유지보수성을 위한 작성 규칙입니다.

---

한 줄 CSS 규칙을 사용하는 이유

한 줄 CSS 규칙은 다음과 같은 목적을 가집니다.

• CSS 파일의 전체 구조를 빠르게 파악할 수 있습니다.
• 선택자와 스타일의 관계가 즉시 드러납니다.
• 불필요한 중첩과 장황한 스타일 작성을 줄입니다.
• 코드 리뷰와 수정 범위를 명확히 합니다.

CSS는 “작성하는 코드”가 아니라 “읽히는 코드”로 취급합니다.

---

적용 기준

한 줄 CSS 규칙은 다음 기준을 따릅니다.

• 선택자 하나당 하나의 선언 블록을 사용합니다.
• 선언이 많아져도 줄을 나누지 않습니다.
• 구조적 구분은 클래스 분리로 해결합니다.
• 스타일 복잡성은 토큰과 구조로 분산합니다.

일반 스타일 선택자를 여러 줄로 펼치면 규칙 위반입니다. 전역 토큰 블록은 아래 예외 기준을 따릅니다.

❌ 나쁜 예 — 선택자를 여러 줄로 펼침

.btn {
  display: inline-flex;
  padding: 8px 16px;
  border-radius: 6px;
}

✅ 좋은 예 — 같은 선택자를 한 줄로

.btn { display: inline-flex; padding: 8px 16px; border-radius: 6px; }

선언이 많아져도 줄을 나누지 않습니다. 속성이 많은 .card도 한 줄로 유지합니다.

.card { display: flex; width: 320px; margin: 0; padding: 16px; border: 1px solid var(--color_border); border-radius: 12px; background: var(--color_surface); color: var(--color_text); }

스타일이 길어질수록 구조 설계를 다시 검토해야 합니다.

---

전역 토큰 블록의 예외

조건 없는 전역 토큰은 global.css 상단의 :root 하나에 모으고, 공백 4칸으로 들여써 한 줄에 토큰 하나씩 펼칩니다. 일반 스타일 규칙의 한 줄 작성과 구분합니다. 다크 테마·미디어쿼리처럼 적용 조건이 다른 재정의와 블록 전용 변수는 합치지 않습니다. 저작 원본을 파일별로 유지하는 경우에도 브라우저용 생성본의 기본 토큰은 하나로 모읍니다.

토큰은 선택자 구조보다 이름과 값을 개별적으로 찾고 수정하는 일이 많으므로 세로로 읽을 수 있게 작성합니다. 토큰 종류별 구분은 같은 블록 안의 빈 줄과 주석으로 표현합니다. 자세한 예제는 토큰 및 변수 전략을 따릅니다.

---

한 줄 규칙이 깨지는 경우

다음과 같은 경우는 한 줄 규칙 위반으로 판단합니다.

• 가독성을 이유로 임의 줄바꿈을 사용하는 경우
• 하나의 클래스가 여러 역할을 동시에 수행하는 경우
• 구조 문제를 스타일로 해결하려는 경우

한 줄 규칙이 불편해지는 시점은 대부분 구조가 잘못 설계된 신호입니다.

---

한 줄 CSS 규칙의 목적

한 줄 CSS 규칙은 CSS를 단순화하기 위한 규칙이 아니라, UI 구조를 명확하게 드러내기 위한 기준입니다.

이 규칙을 통해 SLUR UX/UI System은 CSS를 구조 중심 사고의 결과물로 유지합니다.