한 줄 CSS 규칙
SLUR UI System에서는
CSS를 작성할 때 한 선택자에 한 줄 규칙을 기본 원칙으로 합니다.
이 규칙은 스타일 표현보다 구조와 의도를 읽기 쉽게 만들기 위한 기준입니다.
한 줄 CSS 규칙의 정의
Section titled “한 줄 CSS 규칙의 정의”한 줄 CSS 규칙은
하나의 선택자에 대해 하나의 선언 블록을
한 줄로 작성하는 방식을 의미합니다.
이 규칙은 CSS의 동작 방식이 아닌,
가독성과 유지보수성을 위한 작성 규칙입니다.
한 줄 CSS 규칙을 사용하는 이유
Section titled “한 줄 CSS 규칙을 사용하는 이유”한 줄 CSS 규칙은 다음과 같은 목적을 가집니다.
- CSS 파일의 전체 구조를 빠르게 파악할 수 있습니다.
- 선택자와 스타일의 관계가 즉시 드러납니다.
- 불필요한 중첩과 장황한 스타일 작성을 줄입니다.
- 코드 리뷰와 수정 범위를 명확히 합니다.
SLUR UI System에서는
CSS를 “작성하는 코드”가 아니라
“읽히는 코드”로 취급합니다.
한 줄 CSS 규칙은 다음 기준을 따릅니다.
- 선택자 하나당 하나의 선언 블록을 사용합니다.
- 선언이 많아져도 줄을 나누지 않습니다.
- 구조적 구분은 클래스 분리로 해결합니다.
- 스타일 복잡성은 토큰과 구조로 분산합니다.
스타일이 길어질수록
구조 설계를 다시 검토해야 합니다.
한 줄 규칙이 깨지는 경우
Section titled “한 줄 규칙이 깨지는 경우”다음과 같은 경우는 한 줄 규칙 위반으로 판단합니다.
- 가독성을 이유로 임의 줄바꿈을 사용하는 경우
- 하나의 클래스가 여러 역할을 동시에 수행하는 경우
- 구조 문제를 스타일로 해결하려는 경우
한 줄 규칙이 불편해지는 시점은
대부분 구조가 잘못 설계된 신호입니다.
한 줄 CSS 규칙의 목적
Section titled “한 줄 CSS 규칙의 목적”한 줄 CSS 규칙은
CSS를 단순화하기 위한 규칙이 아니라,
UI 구조를 명확하게 드러내기 위한 기준입니다.
이 규칙을 통해 SLUR UI System은
CSS를 구조 중심 사고의 결과물로 유지합니다.