한 줄 CSS 규칙

CSS를 작성할 때는 한 선택자에 한 줄 규칙을 기본 원칙으로 합니다.
이 규칙은 스타일 표현보다 구조와 의도를 읽기 쉽게 만들기 위한 기준입니다.

---

한 줄 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); }

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

---

한 줄 규칙이 깨지는 경우

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

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

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

---

한 줄 CSS 규칙의 목적

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

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