CSS Cascading 잘하기

커스텀 프로퍼티 소개

브라우저가 -webkit- 또는 -moz-와 같은 공급 업체 접두사를 사용하여 새 속성을 정의한 것과 같은 방식으로 -- 접두사를 사용하여 자체 사용자 지정 속성을 정의 할 수 있습니다.

Sass 또는 JavaScript의 변수와 마찬가지로 값의 이름을 지정하고 저장하고 검색하는 데 사용할 수 있지만 CSS의 다른 속성과 마찬가지로 DOM과 함께 계단식으로 상속되고 상속됩니다.

 

html {
  --brand-color: rebeccapurple;
}

 

캡처 된 값에 액세스하기 위해 var () 함수를 사용합니다.

두 부분으로 구성되어 있습니다.

먼저 사용자 지정 속성의 이름과 속성이 정의되지 않은 경우 대체 항목입니다.

 

button {
  background: var(--brand-color, deeppink);
}

 

이것은 이전 브라우저에 대한 지원 대체가 아닙니다.

브라우저가 사용자 정의 속성을 이해하지 못하는 경우 전체 var () 선언을 무시합니다.

대신 이것은 대체 글꼴 패밀리를 사용할 수 없을 때 정의하는 글꼴 스택과 유사하게 정의되지 않은 변수를 처리하는 기본 제공 방법입니다. 대체를 제공하지 않으면 기본값이 설정되지 않습니다.

 

"Stack" 소개

button {
  /* try Consolas, then Menlo, then Monaco, and finally monospace */
  font-family: Consolas, Menlo, Monaco, monospace;

  /* try --state, then --button-color, then --brand-color, and finally deeppink */
  background: var(--state, var(--button-color, var(--brand-color, deeppink)));
}

스택 속성에 대한 중첩 구문이 부피가 커 보인다면 Sass와 같은 전처리기를 사용하여 더 간결하게 만들 수 있습니다.

html {
  /* The fallback value is "Helvetica, Arial, sans-serif" */
  font-family: var(--my-font, Helvetica, Arial, sans-serif);
}

 

"Scope" 정의

/* all links */
a { color: slateblue; }

/* only links inside a section */
section a { color: rebeccapurple; }

/* only links inside an article */
article a { color: deeppink; }

light 테마와 .dark 테마가 있다고 가정 해 보겠습니다.

루트 요소에서 이러한 클래스를 사용하여 페이지 전체 기본값을 정의 할 수 있지만 다양한 방식으로 중첩 된 특정 구성 요소에 적용 할 수도 있습니다. 이를 근접성이라고 합니다.

.dark {
  background: black;
  color: white;
}

.light {
  background: white;
  color: black;
}

.dark button {
  background: plum;
  color: black;
}

.light button {
  background: rebeccapurple;
  color: white;
}

 

일부 버튼은 .light 및 .dark 조상과 함께 두 컨텍스트 모두에 있습니다.

이 경우에 우리가 원하는 것은 가장 가까운 테마가 (상속 근접 동작)을 대신하는 것이지만 대신 우리가 얻는 것은 첫 번째 (캐스케이드 동작)를 재정의하는 두 번째 선택기입니다.

두 선택자의 특이성이 동일하므로 소스 순서가 승자를 결정합니다.

 

사용자 지정속성 및 근접성

button {
  background: var(--btn-color, rebeccapurple);
  color: var(--btn-contrast, white);
}

이제 컨텍스트를 기반으로 이러한 값을 설정할 수 있으며 근접성과 상속을 기반으로 적절한 조상으로 범위를 지정할 것입니다.

.dark {
  --btn-color: plum;
  --btn-contrast: black;
}

.light {
  --btn-color: rebeccapurple;
  --btn-contrast: white;
}

 

See the Pen 3 - Scope: Child Elements by Miriam Suzanne (@mirisuzanne) on CodePen.

 

 

 

컴포넌트 소유권

때로는 근접성이 범위를 정의하기에 충분하지 않습니다. JavaScript 프레임 워크가 "범위가 지정된 스타일"을 생성 할 때 특정 개체 요소 소유권을 설정합니다. "탭 레이아웃"구성 요소는 탭 자체를 소유하지만 각 탭 뒤에있는 콘텐츠는 소유하지 않습니다.

이것은 BEM 규칙이 복잡한 .block__element 클래스 이름에서 캡처하려고 시도하는 것이기도합니다.

html {
  --background--global: white;
  --color--global: black;
  --btn-color--global: rebeccapurple;
  --btn-contrast--global: white;
}

이 기본 글로벌 테마는 이제 우리가 참조하려는 모든 곳에서 사용할 수 있습니다. 전경색과 배경색을 적용하는 데이터 테마 속성으로이를 수행합니다. 전역 값이 기본 폴백을 제공하기를 원하지만 특정 테마로 재정의하는 옵션도 원합니다. 이것이 바로 "스택"이 들어오는 곳입니다.

[data-theme] {
  /* If there's no component value, use the global value */
  background: var(--background--component, var(--background--global));
  color: var(--color--component, var(--color--global));
}

이제 *-component 속성을 전역 속성의 역으로 ​​설정하여 반전된 구성 요소를 정의 할 수 있습니다.

[data-theme='invert'] {
  --background--component: var(--color--global);
  --color--component: var(--background--global);
}

html {
  --background--global: white;
  --color--global: black;
  --btn-color--global: rebeccapurple;
  --btn-contrast--global: white;
}

[data-theme] {
  --background--component: initial;
  --color--component: initial;
  --btn-color: initial;
  --btn-contrast: initial;
  background: var(--background--component, var(--background--global));
  color: var(--color--component, var(--color--global));  
}

[data-theme='invert'] {
  --background--component: var(--color--global);
  --color--component: var(--background--global);
  --btn-color: plum;
  --btn-contrast: var(--color--global);
}

button {
  background: var(--btn-color, var(--btn-color--global));
  color: var(--btn-contrast, var(--btn-contrast--global));
}

전역속성을 사용하여 각각 초기화 후에 스타일을 입혀보았습니다.

 

 

origins 정의

사용자 정의 속성 "스택"을 만들 때 매우 유사한 동작을 구축합니다.

기존 오리진을 사용자 지정 속성 스택으로 나타내려면 다음과 같습니다.

.origins-as-custom-properties {
  color: var(--browser-important, var(--user-important, var(--author-important, var(--author, var(--user, var(--browser))))));
}

button {
  background: var(--btn-state, var(--btn-type, var(--btn-default)));
}

button {
  --btn-default: rebeccapurple;
  background: var(--btn-state, var(--btn-type, var(--btn-default)));
  color: white;
}

:disabled {
  --btn-state: dimgray;
}

.danger {
  --btn-type: maroon;
}

 

 

 

출처 : css-tricks.com/using-custom-property-stacks-to-tame-the-cascade/