전역 스타일

#개요

앱이 모든 페이지에 필요한 스타일을 한곳에서 불러오게 하세요. 진입점은 여러 소스 파일을 가져올 수 있습니다. 공유 값, 문서 기본값, 컴포넌트 규칙을 각 소유 소스에 유지하고 같은 앱 스타일시트로 조합합니다.

먼저 프레임워크 설치를 완료하세요. 아래 예제는 기존 CSS 진입점을 확장하며 Master CSS를 두 번째로 설치할 필요는 없습니다.

#하나의 앱 진입점에서 시작하기

앱이 이미 불러오는 스타일시트 시작 부분에 기본 가져오기를 유지하세요:

@import '@master/css';

이 가져오기는 theme, base, defaults, components, utilities 순서를 포함한 프리셋 정의와 기본 스타일을 불러옵니다. 통합은 이 진입점으로 프로젝트의 생성 CSS를 전달합니다. 프레임워크 설치 가이드에 따라 앱 루트, 루트 레이아웃 또는 빌드 진입점에서 가져오세요.

소스 파일을 나누어도 또 다른 전체 진입점은 필요하지 않습니다. 자신의 파일을 app.css에서 가져오세요:

@import '@master/css';@import './theme.css';@import './defaults.css';@import './components.css';

애플리케이션 루트에서 진입점을 불러오세요. 소유 관계에 따라 소스를 나누며 각 가져온 파일에서 @master/css를 다시 @import할 필요는 없습니다.

텍스트 설명

1. 한 번 불러오기. 애플리케이션 루트는 기본 @master/css 가져오기로 시작하는 app.css를 불러옵니다.
2. 소유 관계에 따라 분리. app.css는 공유 값을 위한 theme.css, 네이티브 문서 기본값을 위한 defaults.css, 공유 컴포넌트 규칙을 위한 components.css를 가져옵니다.
3. 하나의 그래프 유지. 이 가져오기는 하나의 진입점 그래프를 구성합니다. 세 소스 파일이 각각 전체 Master CSS 진입점을 가져올 필요는 없습니다.

이 파일들은 하나의 진입점 그래프를 구성합니다. 공유 정의는 app.css에 직접 작성하든 가져온 파일에 작성하든 사용할 수 있습니다. 각 라우트 스타일시트에서 전체 Master CSS 진입점을 다시 가져오지 마세요. 각 파일이 진입점이 되어 전역 네이티브 CSS가 중복될 수 있습니다.

#문서 기본 스타일 설정하기

프리셋 초기화 스타일은 base에 유지하세요. 제품의 문서 기본값은 일반 컴포넌트와 유틸리티 선언이 덮어쓸 수 있도록 defaults에 둡니다:

@layer defaults {  body {    background-color: var(--color-surface-base);    color: var(--color-text-body);  }}

추가 클래스 없이 기본값을 받아야 하는 요소에는 네이티브 선택자를 사용하세요. 선택자의 범위를 의도적으로 정해야 합니다. 전역 button 규칙은 모든 기능 내부의 버튼에도 적용됩니다. 규칙이 특정 제품 역할에 속한다면 컴포넌트 클래스를 사용하세요.

프리셋 기본 스타일은 이미 문서에 글꼴 토큰을 적용합니다. 글꼴을 선택하려면 타이포그래피에 따라 토큰을 바꾸세요. 선언이 경쟁하면 캐스케이드 레이어를 참고하세요. 규칙을 나중에 불러온다고 더 강한 레이어로 이동하지는 않습니다.

상속은 문서 트리를 따릅니다. 로컬 선언은 자신이 설정하는 속성만 바꿉니다.

텍스트 설명

body 기본값이 두 자손에 텍스트 설정을 제공하며 로컬 code 글꼴은 code 요소 안에서만 글꼴 계열을 덮어씁니다.

#공유 그래프에 포함할 내용 결정하기

가져오는 theme.css에서는 프로젝트에 필요한 값부터 시작하세요:

@theme {  --spacing-card: 1.5rem;}

이 토큰은 p-card, gap-card와 해당 키를 받는 다른 간격 계열을 등록합니다. 선언은 프로젝트에서 필요할 때 출력됩니다. 진입점 그래프에 둔다고 일반 토큰이 정적으로 바뀌지는 않습니다.

의미가 공유되기 때문에 정의를 공유하세요. 두 기능이 지금 같은 수치를 사용해도 별도 토큰이 필요할 수 있습니다. 한 요소가 여러 클래스를 사용한다는 사실만으로 컴포넌트 추상화가 필요한 것은 아닙니다.

#컴포넌트 소유 관계 명확히 하기

예를 들어 공유 알림은 components.css에 둘 수 있습니다:

@layer components {  .notice {    padding: var(--spacing-md);    border: 1px solid var(--color-line-divider);    border-radius: var(--radius-md);    background-color: var(--color-surface-raised);    color: var(--color-text-body);  }}

<aside class="notice">Your changes are saved locally.</aside>

이 네이티브 선택자는 .notice에 스타일을 적용하며 notice라는 유틸리티를 등록하지는 않습니다. 공유 상태와 조건을 컴포넌트 규칙 안에 작성하세요. Master CSS 수정자를 받는 클래스 레시피가 필요하면 @utility를 사용합니다. 스타일 재사용에서 작동하는 예제로 비교합니다.

진입점 그래프의 네이티브 CSS는 사용하지 않는 컴포넌트 규칙을 포함해 기본적으로 출력됩니다. 네이티브 가지치기는 명시적으로 선택해야 합니다. 네이티브 가지치기를 참고하세요. 정의를 보이게 하려는 이유만으로 큰 라우트 전용 스타일시트를 전역 그래프로 옮기지 마세요.

#공유 헬퍼 추가하기

전역 정의는 가능한 모든 클래스의 규칙을 생성하지 않고 여러 기능에 필요한 동작을 표현할 수 있습니다. 다음 헬퍼는 관련 링크를 배치하고 화면 밖 내용의 렌더링 작업을 생략하며 인쇄에서 그룹을 제외합니다:

@utility flow {  display: grid;  gap: var(--spacing-md);}@utility content-auto {  content-visibility: auto;  contain-intrinsic-size: auto 32rem;}@utility print-hidden {  @media print {    display: none;  }}

<section class="content-auto flow print-hidden p-md b-solid b(1) b-line-divider r-md bg-surface-raised">  <h2 class="m(0) text-lg font-regular">Related guides</h2>  <a class="text-sm fg-text-body underline" href="/guide/theme" target="_top">Choose shared theme values</a>  <a class="text-sm fg-text-body underline" href="/guide/responsive-design" target="_top">Adapt a layout to its available space</a></section>

@layer theme {  :root,  :host {    --color-zinc-30: oklch(78% .0025 265);    --color-zinc-70: oklch(39.8% .0028 265);    --color-zinc-90: oklch(24.6% .0022 265)  }  :root,  :host {    --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90));    --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));    --color-text-body: light-dark(var(--color-zinc-70), var(--color-zinc-30))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --font-weight-regular: 400;    --font-size-sm: .875rem;    --font-size-lg: 1.125rem;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --text-lg: var(--font-size-lg);    --text-lg--line-height: 1.5;    --text-lg--letter-spacing: 0;    --radius-md: .375rem;    --spacing-md: 1rem  }}@layer utilities {  .text-lg {    font-size: var(--text-lg);    line-height: var(--text-lg--line-height, normal);    letter-spacing: var(--text-lg--letter-spacing, normal)  }  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .content-auto {    content-visibility: auto;    contain-intrinsic-size: auto 32rem  }  .flow {    display: grid;    gap: var(--spacing-md)  }  @media print {    .print-hidden {      display: none    }  }  .bg-surface-raised {    background-color: var(--color-surface-raised)  }  .b-line-divider {    border-color: var(--color-line-divider)  }  .r-md {    border-radius: var(--radius-md)  }  .b-solid {    border-style: solid  }  .b\(1\) {    border-width: calc(1 * 1px)  }  .fg-text-body {    color: var(--color-text-body)  }  .font-regular {    font-weight: var(--font-weight-regular)  }  .m\(0\) {    margin: calc(0 * 1px)  }  .p-md {    padding: var(--spacing-md)  }  .underline {    text-decoration-line: underline  }}

기존 Master CSS 가져오기 뒤에 정의를 두거나 앱 진입점에서 utilities.css를 가져오세요. 클래스는 마크업에서 발견될 때 CSS를 생성합니다. 앱에서 인쇄 미리보기를 열어 print-hidden을 확인하고 인쇄에도 링크가 필요하면 해당 클래스를 제거하세요. 자신의 레이아웃 내용에 맞는 고유 크기 추정치를 선택합니다.

페이지 전반 점검과 출력에 따른 최적화 순서는 CSS 전달 최적화를 참고하세요.

#로컬 전달은 로컬에 유지하기

앱 진입점은 페이지 간 공유 스타일에 집중하게 하세요. 통합이 라우트 스타일시트에 프로젝트 정의를 제공하므로 전체 Master CSS를 다시 가져올 필요가 없습니다. 그래프 밖의 추가 정의에는 @reference를 사용하지만 참조한 네이티브 CSS를 전달하지는 않습니다. 로컬 규칙 전달은 여전히 라우트 로더가 담당합니다.

설정 방법은 라우트 수준 스타일을, 독립 앱에 별도 진입점 그래프가 필요하다면 모노레포를 참고하세요. 전역 파일을 나눈 뒤 정의를 사용하는 페이지와 사용하지 않는 페이지를 확인합니다. 공유 스타일은 여전히 앱 진입점으로 전달되어야 하며 라우트 전용 규칙은 로컬 소유 관계를 유지해야 합니다.