다른 사용자 지정 속성 사용 정도

반응형

사용자 지정 속성을 사용하는 한 가지 방법은 이러한 속성을 설계 토큰으로 간주하는 것입니다. 색상, 공백, 글꼴 등입니다. 페이지 루트에 설정하고 CSS 전체에서 사용합니다. 매우 유용하며, 사용자 지정 속성뿐만 아니라 지난 백만 년 동안의 전처리기 변수에 대한 고전적인 사용 사례입니다.

디자인 토큰 접근 방식 외에도 사용자 지정 속성을 사용하는 또 다른 방법은 훨씬 더 열심히 작업하여 주어진 요소에서 모든 주요 고유 스타일링 선택에 사용하는 것입니다.

다음과 같은 카드를 가지고 있다고 가정해 보십시오(물론 시연용으로 단순화되었습니다).

.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);
}

.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);
}

 

좋아요.

하지만 여러분이 불가피하게 카드를 변형시킬 때, 여러분은 이 규칙들을 무시해야 합니다. CSS 사용자 지정 속성 접근 방식은 다음과 같을 수 있습니다.

.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);
}

.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);
}

지금은 좀 더 장황하지만, 우리가 변화를 원할 때 어떤 일이 일어나는지 보세요.

 

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

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

다음은 즉시 사용할 수 있는 세 가지 장점입니다.

• 저는 제가 분명히 바꾸려고 설정한 값만 바꾸고 있습니다. 내 메인 카드 프로토타입은 내가 유지하기를 원하는 무결성을 유지한다.
• 선택기를 올바르게 다시 작성할 필요 없이 변형된 아이들을 스타일링할 수 있습니다.
• 이제 HTML의 style 속성에서 스타일 오버라이드를 전달하여 빠른 일회성 변형을 할 수 있습니다.

 

 

폴백으로 장황하게 표현하지 않음

맨 위에 사용자 지정 속성을 선언하고 바로 아래에 있는 속성을 사용하는 대신 다음과 같이 두 가지 작업을 동시에 수행할 수 있습니다.

.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));
}

.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));
}

Now if something like `--card-background` does happen to get set, it will override the fallback value here. I don’t completely love this, because it means elements above `.card` can override it. That might be what you want, but it’s not exactly the same as declaring the values at the `.card` level to begin with. No strong opinions here.

 

더 깨는 것

예를 들어 패딩을 개별적으로 제어할 수 있습니다.

.card {
    --card-padding-block: 2rem;
    --card-padding-inline: 2rem;
    --card-padding: var(--card-padding-block) var(--card-padding-inline);

    padding: var(--card-padding);
}

.card {
    --card-padding-block: 2rem;
    --card-padding-inline: 2rem;
    --card-padding: var(--card-padding-block) var(--card-padding-inline);

    padding: var(--card-padding);
}

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

 

.card-variation {
    --card-padding-inline: 3rem;
}

.card-variation {
    --card-padding-inline: 3rem;
}

You gotta be careful of the big gotcha though. Meaning if you declare all these at the root, this isn’t going to work, because those nested properties have already been resolved. But so long as it’s first declared on `.card`, you’ll be fine here.

너무 멀어요?

가치의 모든 부분에 대한 최고의 제어를 원한다고 가정해 보십시오. 예를 들어:

 

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));
}

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));
}

That’s kinda neat, but it’s likely too far. Colors are almost certainly going to be declared at the root and left alone, so the great gotcha is going to make overriding the low-level child properties impossible. Besides, if you have a `--color-1`, you probably have a 2-9 (or more) as well, which is all well and good because there is far more delicate design magic to a color system than simple mathematical manipulations of color parts.

제공 가능한 설계 시스템?

테일윈드가 많은 인기를 누렸다는 것에는 의심의 여지가 없다. 많은 HTML 클래스가 각각 하나의 속성을 제어하는 원자적 접근 방식을 사용합니다. 저는 이러한 인기의 일부가 이러한 사전 구성된 수업에서 선택한다면, 디자인이 상당히 좋게 끝나게 된다는 사실에 기인한다고 생각합니다. 탈선하면 안 돼요. 보기 좋게 설계된 제한된 값 중에서 선택하는 것입니다.

 

I wouldn’t go as far as to say that a Custom Properties heavy-based approach to styling is exactly the same. For example, you’ll still need to think of a class name abstraction rather than apply styling directly to the HTML element. But, it might enjoy some of the same constraints/limitations that make Tailwind and other atomic class approaches desirable. If you can only pick from a pre-defined set of `--spacing-x` values, `--color-x` values, and `--font-x` values, you might achieve a more cohesive design than you would have otherwise.

개인적으로, 저는 사용자 지정 속성에 더 많이 기반을 둔 디자인 시스템을 지향하는 경향이 있다는 것을 알았습니다. 달리 변형하거나 관리하기에 더 현명할 수는 없겠지만요.

제3자 설계 시스템에서 제공하는 것은 어떠십니까? 한가할 때 사용할 수 있는 대규모 사용자 지정 속성 세트일 뿐입니다.

타사 제품은 이렇게 부엌 싱크대 전체일 필요도 없습니다. 예를 들어 Adam Argyle의 transition.style은 전환 애니메이션 도우미의 사용자 지정 속성에 불과한 "Hackpack"을 제공합니다.

 

이해비

사용자 지정 속성에 대한 이러한 올인 접근 방식에 대해 제가 들은 한 가지 푸시백은 새로운 이해 능력입니다. 만약 당신이 이 시스템을 썼다면, 그것은 당신에게 완벽한 이치에 맞을 것이다. 하지만 CSS 위에 있는 추가적인 추상화입니다. CSS 지식은 모두가 공유합니다. 맞춤형 시스템 지식은 이를 위해 일하는 사람들만이 공유합니다.

사용자 지정 속성을 많이 사용하는 시스템에 새로 도입하면 학습 곡선이 상당히 복잡해집니다.

비디오