Forge 앱의 CSS는 다음과 같은 현대적인 기법들을 통해 구조화되었습니다.
1. CSS Layers (CSS 레이어)
CSS Layers는 스타일의 캐스케이딩 방식을 명시적으로 제어하여 CSS의 예측 가능성을 크게 높이는 현대 CSS의 핵심 기능입니다. 이는 Tailwind CSS와 같은 프레임워크에서도 활용됩니다.
- 캐스케이드 문제 해결: 레이어는 로딩 순서나 특정도(specificity)와 무관하게 어떤 스타일이 우선권을 가질지 명확히 정의합니다.
- 선언 방식:
@layer reset, variables, defaults, components, utilities;와 같이 레이어 순서를 선언하고,@import url("./reset.css") layer(reset);과 같이 각 파일을 특정 레이어에 할당합니다. - 우선순위: 선언된 순서에 따라 뒤에 오는 레이어가 앞에 오는 레이어보다 높은 우선순위를 가집니다. 예를 들어
utilities레이어는components레이어보다 항상 우선합니다. - 예시:
css @layer components { .btn { padding: .5rem 1rem; } } @layer utilities { .p-0 { padding: 0; } }위 예시에서.p-0는utilities레이어에 속하므로,.btn의 스타일보다 항상 우선하여 적용됩니다.
2. CSS Custom Properties (CSS 사용자 정의 속성 - 변수)
CSS 변수는 재사용 가능한 컴포넌트를 깔끔하게 구축하는 데 필수적입니다.
- 정의:
:root셀렉터 내에서--primary-color: light-dark(...)와 같이 전역 변수를 정의합니다. - 활용:
.btn클래스에서color: var(--btn-color, --base-100, #000);와 같이 변수를 사용하여 기본 스타일을 설정합니다. - 유연성:
.btn-primary와 같이 특정 변수를 재정의하여 버튼의 변형을 쉽게 만들 수 있습니다. - 중첩 조정:
.modifications .btn { --btn-padding-x: 0; }와 같이 중첩된 컨텍스트 내에서 특정 컴포넌트의 변수를 조정할 수 있어 높은 유연성을 제공합니다.
3. CSS Nesting (CSS 중첩)
CSS Nesting은 Sass와 같은 전처리기 없이도 CSS를 더 깔끔하고 조직적으로 작성할 수 있게 하는 표준 기능입니다.
- 구조화: 부모-자식 관계의 셀렉터를 중첩하여 작성함으로써 관련 스타일을 한곳에 모을 수 있습니다.
&셀렉터:&는 Sass와 마찬가지로 부모 셀렉터를 참조하여a:any-link & :not([class])와 같은 방식으로 사용됩니다.- 가독성 및 유지보수성: 스타일의 계층 구조를 시각적으로 명확하게 보여주어 코드 가독성과 유지보수성을 향상시킵니다.
Forge 앱은 reset, variables, defaults, components, utilities와 같은 명확한 레이어 구조를 통해 CSS를 구성하며, 각 레이어는 특정 목적을 가집니다. components와 utilities 레이어는 다시 세부 파일들을 @import하여 관리됩니다.