다른 수준의 사용자 정의 속성 사용

사용자 정의 속성을 사용하는 한 가지 방법은 색상, 간격, 글꼴 등 디자인 토큰으로 생각하는 것입니다. 페이지의 루트에 설정하여 CSS 전체에 사용할 수 있습니다. 매우 유용하고 지난 백만 년 동안 사용자 정의 속성뿐만 아니라 전처리 변수에 대한 고전적인 사용 사례.

사용하는 또 다른 방법 (설계 토큰 방법과 함께 사용할 수 있음)은 특정 요소의 각 주요 고유 한 스타일 선택에 대해 더 철저하게 사용하는 것입니다.

이와 같은 카드가 있다고 가정합니다 (데모 목적으로 단순화 됨).

 <code>.card { background: hsl(200deg 15% 73%); border: 4px solid rgb(255 255 255 / 0.5); padding: 2rem; border-radius: 8px; } .card > h2 { margin: 0 0 1rem 0; border-bottom: 3px solid rgba(0 0 0 / 0.2); }</code>

매우 좋은.

그러나 필연적으로 카드의 변형을 할 때 이러한 규칙을 직접 무시해야합니다. CSS 사용자 정의 속성 메소드는 다음과 같습니다.

 <code>.card { --card-background: hsl(200deg 15% 73%); --card-border: 4px solid rgb(255 255 255 / 0.5); --card-padding: 2rem; --card-border-radius: 8px; --card-title-margin: 0 0 1rem 0; --card-title-border: 3px solid rgba(0 0 0 / 0.2); background: var(--card-background); border: var(--card-border); padding: var(--card-padding); border-radius: var(--card-border-radius); } .card > h2 { margin: var(--card-title-margin); border-bottom: var(--card-title-border); }</code>

현재 조금 더 길지만 변형을 원할 때 어떤 일이 발생하는지 살펴 봅니다.

 <code>.card-variation { --card-background: purple; --card-padding-block: 2.5rem; --card-title-margin: 0 0 2rem 0; }</code>

다음은 세 가지 명백한 장점입니다.

• 명시 적으로 설정된 값 만 변경 가능한 값 만 변경했습니다. 내 메인 카드 프로토 타입은 내가 유지하고 싶은 무결성을 유지합니다.
• 이 선택기를 올바르게 다시 작성하지 않고 변형의 어린이 요소를 스타일링 할 수 있습니다.
• 이제 빠른 일회성 변형을 위해 HTML의 스타일 속성에서 스타일을 통과 할 수 있습니다.

폴백을 사용하여 중복성을 줄입니다

상단에서 사용자 정의 속성을 선언 한 다음 아래를 사용하는 대신 이런 방식으로 동시에 수행 할 수 있습니다.

 <code>.card { background: var(--card-background, hsl(200deg 15% 73%)); border: var(--card-border, 4px solid rgb(255 255 255 / 0.5)); padding: var(--card-padding, 2rem); border-radius: var(--card-border-radius, 8px); } .card > h2 { margin: var(--card-title-margin, 0 0 1rem 0); border-bottom: var(--card-title-border, 3px solid rgba(0 0 0 / 0.2)); }</code>

이제-카드백 그라운드와 같은 속성이 설정되면 여기에서 폴백 값을 무시합니다. 나는 이것을 좋아하지 않습니다. 이것은 당신이 원하는 것일 수 있지만, 이것은 처음에 .card 레벨에서 값을 선언하는 것과 정확히 동일하지 않습니다. 여기에는 강한 의견이 없습니다.

추가 분해

예를 들어, 패딩을 별도로 제어 할 수 있다는 것입니다.

 <code>.card { --card-padding-block: 2rem; --card-padding-inline: 2rem; --card-padding: var(--card-padding-block) var(--card-padding-inline); padding: var(--card-padding); }</code>

이제 원하는 경우 변형은 패딩의 일부만 제어 할 수 있습니다.

 <code>.card-variation { --card-padding-inline: 3rem; }</code>

그러나 당신은 큰 문제를 알고 있어야합니다. 즉,이 모든 것을 루트에서 선언하면 중첩 된 속성이 구문 분석 되었기 때문에 작동하지 않습니다. 그러나 그것이 .card에서 먼저 선언 된 한, 당신은 여기에서 괜찮을 것입니다.

과도하게?

값의 각 부분을 초소형 제어하고 싶다고 가정 해 봅시다. 예를 들어:

 <code>html { --color-1-h: 200deg; --color-1-s: 15%; --color-1-l: 73%; --color-1-hsl: var(--color-1-h) var(--color-1-s) var(--color-1-l); --color-1: hsl(var(--color-1-hsl)); }</code>

조금 영리하지만 너무 많을 수도 있습니다. 색상은 거의 확실하게 루트에서 선언되고 변경되지 않은 상태로 유지 되므로이 큰 문제로 인해 저수준 하위 장점을 덮어 쓰는 것이 불가능합니다. 또한-콜로 -1을 가지고 있다면 아마도 2-9 (또는 그 이상)가있을 수 있습니다. 이는 색상 시스템이 간단한 색상 부품의 수학보다 훨씬 더 세련되기 때문에 좋습니다.

전달 가능한 디자인 시스템?

Tailwind가 매우 인기가 있다는 것은 의심의 여지가 없습니다. 많은 수의 HTML 클래스가 속성을 별도로 제어하는 ​​원자 방법을 사용합니다. 인기있는 이유 중 일부는 이러한 미리 구성된 수업 중에서 선택하면 디자인이 꽤 좋기 때문입니다. 당신은 트랙을 벗어날 수 없습니다. 당신은보기 좋게 만들기 위해 설계된 다양한 유한 값 중에서 선택합니다.

사용자 정의 속성을 기반으로 한 스타일 방법이 정확히 동일하다고 말하지 않습니다. 예를 들어, HTML 요소에 직접 스타일을 적용하는 대신 클래스 이름 추상화를 고려해야합니다. 그러나 테일 윈드 및 기타 원자 클래스 방법과 동일한 제약/제한을 누릴 수 있습니다. 사전 정의 된 -spacing-x 값,--color-x 값 및 -font-x 값 중에서 만 선택할 수 있다면 그 어느 때보 다 더 응집력있는 디자인을 달성 할 수 있습니다.

개인적으로, 나는 사용자 정의 속성에 더 의존하는 설계 시스템으로 이동하는 것이 기분이 좋다.

제 3 자 설계 시스템은 그들이 제공하는 기능을 어떻게 받아들이 는가?

타사 결과물은 이와 같은 모든 것을 포함 할 필요조차 없습니다. 예를 들어, Adam Argyle의 Transition.Style은 단순히 변환 애니메이션 도우미의 사용자 정의 속성 인 "HackPack"을 제공합니다.

이해력 비용

사용자 정의 속성에 대한이 포괄적 인 접근 방식에 대해 내가 들었던 한 가지 주장은 초보자 이해 성입니다. 당신이 시스템을 작성했다면, 당신에게 많은 의미가있을 수 있습니다. 그러나 CSS 위에는 추가 추상화입니다. 모든 사람들은 CSS 지식을 공유하는 반면, 맞춤형 시스템 지식은 시스템에 적극적으로 관여하는 사람들 만 공유합니다.

사용자 정의 속성을 사용하기 시작한 시스템은 매우 가파른 학습 곡선을 갖습니다.

동영상

위 내용은 다른 수준의 사용자 정의 속성 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!