캐스케이드의 CSS 사용자 정의 속성
게시 됨: 2022-03-10지난 달에 저는 Twitter에서 "범위 지정" 스타일(빌드 프로세스에서 생성됨)과 CSS 고유의 "중첩" 스타일 간의 차이점에 대해 대화를 나눴습니다. 일화적으로 개발자가 왜 JavaScript에서 생성된 "범위 지정 스타일"을 수용하면서 ID 선택기의 특수성을 피하는지 물었습니다. Keith Grant는 차이점이 캐스케이드*와 상속의 균형, 즉 특정성보다 근접성을 우선시하는 데 있다고 제안했습니다. 한 번 보자.
캐스케이드
CSS 캐스케이드는 세 가지 요소를 기반으로 합니다.
-
!important플래그로 정의된 중요도 및 스타일 원점(사용자 > 작성자 > 브라우저) - 사용된 선택기의 특이성 (인라인 > ID > 클래스 > 요소)
- 코드 자체의 소스 순서 (최신이 우선)
근접성 은 어디에서도 언급되지 않습니다 — 선택기 부분 간의 DOM 트리 관계. #outer p #inner p 더 가까운 관계를 설명하지만 아래 단락은 모두 빨간색입니다.
Miriam Suzanne의 펜 [Cascade: Specificity vs Proximity](https://codepen.io/smashingmag/pen/OexweJ/)를 참조하십시오.
<section> <p>This text is red</p> <div> <p>This text is also red!</p> </div> </section> #inner p { color: green; } #outer p { color: red; } 두 선택자는 모두 동일한 특이성을 가지고 있으며 둘 다 동일한 p 요소를 설명하고 어느 쪽도 !important 로 표시되지 않습니다. 따라서 결과는 소스 순서만을 기반으로 합니다.
BEM 및 범위 지정 스타일
BEM("Block__Element—Modifier")과 같은 명명 규칙은 캐스케이드를 완전히 피하면서 각 단락이 오직 하나의 부모로 "범위"가 지정되도록 하는 데 사용됩니다. 단락 "요소"에는 "블록" 컨텍스트에 고유한 고유 클래스가 부여됩니다.
Miriam Suzanne의 Pen [BEM Selectors & Proximity](https://codepen.io/smashingmag/pen/qzPyeM/)을 참조하십시오.
<section class="outer"> <p class="outer__p">This text is red</p> <div class="inner"> <p class="inner__p">This text is green!</p> </div> </section> .inner__p { color: green; } .outer__p { color: red; }이러한 선택자는 여전히 상대적 중요성, 특이성 및 소스 순서가 동일하지만 결과는 다릅니다. "범위 지정" 또는 "모듈식" CSS 도구는 해당 프로세스를 자동화하여 HTML을 기반으로 CSS를 다시 작성합니다. 아래 코드에서 각 단락의 범위는 직계 부모입니다.
Miriam Suzanne의 Pen [Scoped Style Proximity](https://codepen.io/smashingmag/pen/NZaLWN/)을 참조하십시오.
<section outer-scope> <p outer-scope>This text is red</p> <div outer-scope inner-scope> <p inner-scope>This text is green!</p> </div> </section> p[inner-scope] { color: green } p[outer-scope] { color: red; }계승
근접성은 캐스케이드의 일부가 아니지만 CSS의 일부입니다. 여기서 상속 이 중요해집니다. 선택기에서 p 를 놓으면 각 단락은 가장 가까운 조상의 색상을 상속합니다.
Miriam Suzanne의 Pen [Inheritance: Specificity vs Proximity](https://codepen.io/smashingmag/pen/mZBGyN/)를 참조하십시오.
#inner { color: green; } #outer { color: red; } #inner 와 #outer 는 각각 다른 요소인 div 와 section 을 설명하기 때문에 두 색상 속성이 충돌 없이 적용됩니다. 내포된 p 요소에는 지정된 색상이 없으므로 결과는 cascade 가 아닌 상속 (직계 부모의 색상)에 의해 결정됩니다. 근접성이 우선하며 #inner 값이 #outer 보다 우선합니다.
하지만 문제가 있습니다. 상속을 사용하기 위해 section 및 div 내부의 모든 스타일을 지정해야 합니다. 단락 색상을 구체적으로 타겟팅하고 싶습니다.
(재)사용자 정의 속성 소개
사용자 정의 속성은 새로운 브라우저 고유 솔루션을 제공합니다. 다른 속성과 마찬가지로 상속되지만 정의된 위치에서 사용할 필요는 없습니다 . 명명 규칙이나 빌드 도구 없이 일반 CSS를 사용하면 인접성이 캐스케이드보다 우선하여 대상 및 상황에 맞는 스타일을 만들 수 있습니다.
Miriam Suzanne의 Pen [Custom Props: Specificity vs Proximity](https://codepen.io/smashingmag/pen/gNGdaO/)를 참조하십시오.
p { color: var(--paragraph); } #inner { --paragraph: green; } #outer { --paragraph: red; } 사용자 지정 --paragraph 속성은 color 속성과 마찬가지로 상속되지만 이제 해당 값이 적용되는 방법과 위치를 정확히 제어할 수 있습니다. --paragraph 속성은 직접 선택(specificity-rules) 또는 컨텍스트(proximity-rules)를 통해 p 구성 요소에 전달할 수 있는 매개 변수와 유사하게 작동합니다.
이것은 우리가 종종 함수, 믹스인 또는 구성 요소와 연관시키는 사용자 정의 속성의 가능성을 드러낸다고 생각합니다.
사용자 정의 "함수" 및 매개변수
기능, 믹스인 및 구성 요소는 모두 동일한 아이디어를 기반으로 합니다. 재사용 가능한 코드, 일관되지만 구성 가능한 결과를 얻기 위해 다양한 입력 매개변수와 함께 실행할 수 있습니다. 차이점은 결과로 수행하는 작업에 있습니다. 스트라이프 그라디언트 변수로 시작하여 다른 형식으로 확장할 수 있습니다.
html { --stripes: linear-gradient( to right, powderblue 20%, pink 20% 40%, white 40% 60%, pink 60% 80%, powderblue 80% ); } 그 변수는 루트 html 요소에 정의되어 있습니다( :root 를 사용할 수도 있지만 불필요한 특수성을 추가함). 따라서 스트라이프 변수는 문서의 모든 곳에서 사용할 수 있습니다. 그라디언트가 지원되는 모든 위치에 적용할 수 있습니다.
Miriam Suzanne의 Pen [Custom Props: Variable](https://codepen.io/smashingmag/pen/NZwrrm/)을 참조하십시오.
body { background-image: var(--stripes); }매개변수 추가
함수는 변수처럼 사용되지만 출력을 변경하기 위한 매개변수를 정의합니다. --stripes 변수를 내부에 매개변수와 유사한 일부 변수를 정의하여 보다 기능적으로 유사하게 업데이트할 수 있습니다. 각도 변경 매개변수를 생성하기 to right 을 var(--stripes-angle) 로 바꾸는 것으로 시작하겠습니다.
html { --stripes: linear-gradient( var(--stripes-angle), powderblue 20%, pink 20% 40%, white 40% 60%, pink 60% 80%, powderblue 80% ); }함수가 제공하는 목적에 따라 생성할 수 있는 다른 매개변수가 있습니다. 사용자가 자신의 줄무늬 색상을 선택하도록 허용해야 합니까? 그렇다면 우리 함수는 5개의 다른 색상 매개변수를 허용합니까, 아니면 지금처럼 외부로 들어갈 3개만 허용합니까? 색상 정지에 대한 매개변수도 만들고 싶습니까? 우리가 추가하는 모든 매개변수는 단순성과 일관성을 희생하면서 더 많은 사용자 정의를 제공합니다.
그 균형에 대한 보편적인 정답은 없습니다. 일부 기능은 더 유연해야 하고 다른 기능은 더 독단적이어야 합니다. 추상화는 코드에서 일관성과 가독성을 제공하기 위해 존재하므로 한 발 물러서서 목표가 무엇인지 물어보십시오. 실제로 사용자 정의할 수 있어야 하는 것은 무엇이며 어디에서 일관성을 적용해야 합니까? 어떤 경우에는 완전히 사용자 정의할 수 있는 하나의 기능보다 두 개의 독자적인 기능을 갖는 것이 더 도움이 될 수 있습니다.
위의 기능을 사용하려면 --stripes-angle 매개변수에 대한 값을 전달하고 background-image 와 같은 CSS 출력 속성에 출력을 적용해야 합니다.
/* in addition to the code above… */ html { --stripes-angle: 75deg; background-image: var(--stripes); } Miriam Suzanne의 Pen [Custom Props: Function](https://codepen.io/smashingmag/pen/BgwOjj/)을 참조하십시오.
상속 대 유니버설
습관적으로 html 요소에 --stripes 함수를 정의했습니다. 사용자 정의 속성은 상속되며 어디에서나 내 기능을 사용할 수 있기를 원하므로 루트 요소에 넣는 것이 합리적입니다. 이는 --brand-color: blue 와 같은 상속 변수에 잘 작동하므로 "기능"에서도 작동할 것으로 기대할 수 있습니다. 그러나 중첩 선택자에서 이 함수를 다시 사용하려고 하면 작동하지 않습니다.
Miriam Suzanne의 Pen [Custom Props: Function Inheritance Fail](https://codepen.io/smashingmag/pen/RzjRrM/)을 참조하십시오.
div { --stripes-angle: 90deg; background-image: var(--stripes); } 새로운 --stripes-angle 은 완전히 무시됩니다. 다시 계산해야 하는 함수에 대해 상속에 의존할 수 없다는 것이 밝혀졌습니다. 각 속성 값이 요소(이 경우 html 루트 요소)당 한 번 계산된 다음 계산된 값이 상속되기 때문입니다. 문서 루트에서 함수를 정의함으로써 전체 함수를 자손이 사용할 수 있도록 하지 않고 함수의 계산된 결과만 사용할 수 있습니다.
계단식 --stripes-angle 매개변수의 관점에서 프레임을 구성하면 의미가 있습니다. 상속된 CSS 속성과 마찬가지로 자손은 사용할 수 있지만 조상은 사용할 수 없습니다. 중첩된 div 에 설정한 값은 html 루트 조상에 정의한 함수에서 사용할 수 없습니다. 모든 요소에서 다시 계산되는 보편적으로 사용 가능한 함수를 만들려면 모든 요소에 대해 정의해야 합니다.
Miriam Suzanne의 Pen [Custom Props: Universal Function](https://codepen.io/smashingmag/pen/agLaNj/)을 참조하십시오.
* { --stripes: linear-gradient( var(--stripes-angle), powderblue 20%, pink 20% 40%, white 40% 60%, pink 60% 80%, powderblue 80% ); }범용 선택기는 우리의 기능을 어디에서나 사용할 수 있도록 하지만 원하는 경우 더 좁게 정의할 수 있습니다. 중요한 것은 명시적으로 정의된 곳에서만 다시 계산할 수 있다는 것입니다. 다음은 몇 가지 대안입니다.
/* make the function available to elements with a given selector */ .stripes { --stripes: /* etc… */; } /* make the function available to elements nested inside a given selector */ .stripes * { --stripes: /* etc… */; } /* make the function available to siblings following a given selector */ .stripes ~ * { --stripes: /* etc… */; } Miriam Suzanne의 Pen [Custom Props: Scoped Function](https://codepen.io/smashingmag/pen/JQMvGM/)을 참조하십시오.
이것은 상속에 의존하지 않는 선택기 논리로 확장할 수 있습니다.
자유 매개변수 및 대체 값
위의 예에서 var(--stripes-angle) 에는 값과 대체가 없습니다. 호출되기 전에 정의하거나 인스턴스화해야 하는 Sass 또는 JS 변수와 달리 CSS 사용자 정의 속성은 정의되지 않고 호출될 수 있습니다. 이것은 컨텍스트에서 상속될 수 있는 함수 매개변수와 유사한 "자유" 변수를 생성합니다.
우리는 결국 상속된 값을 설정하기 위해 html 또는 :root (또는 다른 조상)에 변수를 정의할 수 있지만 먼저 값이 정의되지 않은 경우 대체를 고려해야 합니다. 정확히 우리가 원하는 행동에 따라 몇 가지 옵션이 있습니다.
- "필수" 매개변수의 경우 대체를 원하지 않습니다. 있는
--stripes-angle이 정의될 때까지 함수는 아무 작업도 수행하지 않습니다. - "선택적" 매개변수의 경우
var()함수에서 대체 값을 제공할 수 있습니다. 변수 이름 뒤에 쉼표를 추가하고 그 뒤에 기본값을 추가합니다.
var(--stripes-angle, 90deg) 각 var() 함수는 하나의 대체만 가질 수 있으므로 추가 쉼표는 해당 값의 일부가 됩니다. 이를 통해 내부 쉼표로 복잡한 기본값을 제공할 수 있습니다.
html { /* Computed: Hevetica, Ariel, sans-serif */ font-family: var(--sans-family, Hevetica, Ariel, sans-serif); /* Computed: 0 -1px 0 white, 0 1px 0 black */ test-shadow: var(--shadow, 0 -1px 0 white, 0 1px 0 black); }중첩된 변수를 사용하여 자체 캐스케이드 규칙을 생성하여 다른 값에 다른 우선순위를 부여할 수도 있습니다.
var(--stripes-angle, var(--global-default-angle, 90deg))- 먼저 명시적 매개변수(
--stripes-angle)를 사용해 보십시오. - 사용 가능한 경우 전역 "사용자 기본값"(
--user-default-angle)으로 대체합니다. - 마지막으로 "공장 기본값"
(90deg)으로 폴백합니다.
Miriam Suzanne의 Pen [Custom Props: Fallback Values](https://codepen.io/smashingmag/pen/jjGvVm/)를 참조하십시오.
사용자 정의 속성을 명시적으로 정의하는 대신 var() 에서 대체 값을 설정하여 매개변수에 특이성 또는 계단식 제한이 없는지 확인합니다. 모든 *-angle 매개변수는 모든 컨텍스트에서 "자유롭게" 상속됩니다.
브라우저 폴백 대 변수 폴백
변수를 사용할 때 염두에 두어야 할 두 가지 대체 경로가 있습니다.
- 변수 지원이 없는 브라우저에서는 어떤 값을 사용해야 합니까?
- 특정 변수가 없거나 유효하지 않을 때 변수를 지원하는 브라우저는 어떤 값을 사용해야 합니까?
p { color: blue; color: var(--paragraph); } 이전 브라우저는 변수 선언 속성을 무시하고 blue 으로 대체하지만 최신 브라우저는 둘 다 읽고 후자를 사용합니다. 우리의 var(--paragraph) 는 정의되지 않았을 수 있지만 유효하고 이전 속성을 재정의하므로 변수를 지원하는 브라우저는 마치 unset 키워드를 사용하는 것처럼 상속 또는 초기 값으로 대체됩니다.
처음에는 혼란스러워 보일 수 있지만 그럴만한 이유가 있습니다. 첫 번째는 기술적입니다. 브라우저 엔진은 "파싱 시간"(먼저 발생)에 유효하지 않거나 알 수 없는 구문 을 처리하지만 변수는 "계산된 값 시간"(나중에 발생)까지 해결되지 않습니다.
- 구문 분석 시 잘못된 구문이 있는 선언은 완전히 무시되며 이전 선언으로 대체됩니다. 이것은 이전 브라우저가 따를 경로입니다. 최신 브라우저는 변수 구문을 지원하므로 이전 선언은 대신 삭제됩니다.
- 계산된 값 시간에 변수는 유효하지 않은 것으로 컴파일되지만 너무 늦었습니다. 이전 선언은 이미 폐기되었습니다. 사양에 따르면 유효하지 않은 변수 값 은
unset과 동일하게 처리됩니다.
Miriam Suzanne의 Pen [Custom Props: Invalid/Unsupported vs Undefined](https://codepen.io/smashingmag/pen/VJMGbJ/)를 참조하십시오.
html { color: red; /* ignored as *invalid syntax* by all browsers */ /* - old browsers: red */ /* - new browsers: red */ color: not a valid color; color: var(not a valid variable name); /* ignored as *invalid syntax* by browsers without var support */ /* valid syntax, but invalid *values* in modern browsers */ /* - old browsers: red */ /* - new browsers: unset (black) */ --invalid-value: not a valid color value; color: var(--undefined-variable); color: var(--invalid-value); } 이것은 변수를 지원하는 브라우저에 대해 더 복잡한 대체를 사용할 수 있고 이전 브라우저에 대한 간단한 대체를 제공할 수 있기 때문에 작성자인 우리에게도 좋습니다. 더 좋은 점은 null / undefined 상태를 사용하여 필수 매개변수를 설정할 수 있다는 점입니다. 이것은 함수를 믹스인이나 구성 요소로 전환하려는 경우 특히 중요합니다.
사용자 정의 속성 "Mixins"
Sass에서 함수는 원시 값을 반환하는 반면 mixin은 일반적으로 속성-값 쌍으로 실제 CSS 출력을 반환합니다. 시각적 출력에 적용하지 않고 범용 --stripes 속성을 정의하면 결과는 기능과 유사합니다. 출력을 보편적으로 정의하여 믹스인처럼 동작하도록 만들 수 있습니다.
* { --stripes: linear-gradient( var(--stripes-angle), powderblue 20%, pink 20% 40%, white 40% 60%, pink 60% 80%, powderblue 80% ); background-image: var(--stripes); } --stripes-angle 이 유효하지 않거나 정의되지 않은 상태로 있는 한 믹스인은 컴파일에 실패하고 background-image 가 적용되지 않습니다. 요소에 유효한 각도를 설정하면 함수가 계산하여 배경을 제공합니다.
div { --stripes-angle: 30deg; /* generates the background */ } 불행히도 해당 매개변수 값 은 상속되므로 현재 정의는 div 및 모든 하위 항목 에 대한 배경을 만듭니다. 이 문제를 해결하려면 모든 요소에서 initial 값(또는 잘못된 값)을 유지하여 --stripes-angle 값이 상속되지 않도록 해야 합니다. 동일한 범용 선택기에서 이를 수행할 수 있습니다.
Miriam Suzanne의 Pen [Custom Props: Mixin](https://codepen.io/smashingmag/pen/ZdXMJx/)을 참조하십시오.
* { --stripes-angle: initial; --stripes: /* etc… */; background-image: var(--stripes); }안전한 인라인 스타일
어떤 경우에는 백엔드 서버 또는 프론트엔드 프레임워크의 데이터를 기반으로 외부 CSS에서 매개변수를 동적으로 설정해야 합니다. 사용자 정의 속성을 사용하면 일반적인 특수성 문제에 대해 걱정하지 않고 HTML에서 변수를 안전하게 정의할 수 있습니다.
Miriam Suzanne의 Pen [Custom Props: Mixin + Inline Style](https://codepen.io/smashingmag/pen/qzPMPv/)을 참조하십시오.
<div>...</div> 인라인 스타일은 특이성이 높고 재정의하기가 매우 어렵습니다. 하지만 사용자 정의 속성을 사용하면 무시할 수 있는 또 다른 옵션이 있습니다. div를 background-image: none (예: 없음)으로 설정하면 해당 인라인 변수는 영향을 미치지 않습니다. 더 멀리 가기 위해 중간 변수를 만들 수 있습니다.
* { --stripes-angle: var(--stripes-angle-dynamic, initial); } 이제 HTML에서 --stripes-angle-dynamic 을 정의하거나 무시하고 스타일시트에서 직접 --stripes-angle 을 설정할 수 있는 옵션이 있습니다.
Miriam Suzanne의 Pen [Custom Props: Mixin + Inline / Override](https://codepen.io/smashingmag/pen/ZdXMao/)를 참조하십시오.
사전 설정 값
더 복잡한 값이나 재사용하려는 일반적인 패턴의 경우 선택할 수 있는 몇 가지 사전 설정 변수를 제공할 수도 있습니다.
* { --tilt-down: 6deg; --tilt-up: -6deg; }값을 직접 설정하는 대신 해당 사전 설정을 사용합니다.
<div>...</div> Miriam Suzanne의 펜 [Custom Props: Mixin + Presets](https://codepen.io/smashingmag/pen/LKemZm/)를 참조하십시오.
이는 동적 데이터를 기반으로 차트 및 그래프를 생성하거나 일일 계획표를 작성하는 데 유용합니다.
Miriam Suzanne의 Pen [CSS 그리드 + 변수의 막대 차트](https://codepen.io/smashingmag/pen/wLrEyg/)를 참조하십시오.
상황별 구성요소
또한 명시적 선택기에 적용하고 매개변수를 선택 사항으로 지정하여 "믹스인"을 "구성 요소"로 재구성할 수도 있습니다. 출력을 토글하기 위해 --stripes-angle 의 유무에 의존하는 대신 구성 요소 선택기의 유무에 의존할 수 있습니다. 이를 통해 폴백 값을 안전하게 설정할 수 있습니다.
Miriam Suzanne의 Pen [Custom Props: Component](https://codepen.io/smashingmag/pen/QXqVmM/)를 참조하십시오.
[data-stripes] { --stripes: linear-gradient( var(--stripes-angle, to right), powderblue 20%, pink 20% 40%, white 40% 60%, pink 60% 80%, powderblue 80% ); background-image: var(--stripes); } var() 함수 내부에 폴백을 배치하면 --stripes-angle 을 정의하지 않고 구성 요소 외부에서 값을 상속하도록 "자유롭게" 둘 수 있습니다. 이것은 구성 요소 스타일의 특정 측면을 컨텍스트 입력에 노출하는 좋은 방법입니다. JS 프레임워크에 의해 생성된 "범위 지정" 스타일(또는 SVG 아이콘과 같은 shadow-DOM 내부 범위)도 이 접근 방식을 사용하여 외부 영향에 대한 특정 매개변수를 노출할 수 있습니다.
격리된 구성 요소
상속을 위해 매개변수를 노출하지 않으려면 기본값으로 변수를 정의할 수 있습니다.
[data-stripes] { --stripes-angle: to right; --stripes: linear-gradient( var(--stripes-angle, to right), powderblue 20%, pink 20% 40%, white 40% 60%, pink 60% 80%, powderblue 80% ); background-image: var(--stripes); } 이러한 구성 요소는 클래스 또는 다른 유효한 선택자와도 작동하지만 원하는 수정자를 위한 네임스페이스를 만들기 위해 data- 속성을 선택했습니다.
[data-stripes='vertical'] { --stripes-angle: to bottom; } [data-stripes='horizontal'] { --stripes-angle: to right; } [data-stripes='corners'] { --stripes-angle: to bottom right; } Miriam Suzanne의 Pen [Custom Props: Isolated Components](https://codepen.io/smashingmag/pen/agLaGX/)를 참조하십시오.
선택기 및 매개변수
나는 종종 데이터 속성을 사용하여 변수를 설정할 수 있기를 원합니다. CSS3 attr() 사양에서 지원하지만 아직 어떤 브라우저에서도 구현되지 않은 기능입니다(각 브라우저의 연결된 문제에 대한 리소스 탭 참조). 이렇게 하면 선택자를 특정 매개변수와 더 밀접하게 연관시킬 수 있습니다.
<div data-stripes="30deg">...</div> /* Part of the CSS3 spec, but not yet supported */ /* attr( , ) */ [data-stripes] { --stripes-angle: attr(data-stripes angle, to right); }<div data-stripes="30deg">...</div> /* Part of the CSS3 spec, but not yet supported */ /* attr( , ) */ [data-stripes] { --stripes-angle: attr(data-stripes angle, to right); }<div data-stripes="30deg">...</div> /* Part of the CSS3 spec, but not yet supported */ /* attr( , ) */ [data-stripes] { --stripes-angle: attr(data-stripes angle, to right); }
그 동안 style 속성을 사용하여 비슷한 것을 얻을 수 있습니다.
Miriam Suzanne의 Pen [Custom Props: Style Selectors](https://codepen.io/smashingmag/pen/PrJdBG/)를 참조하십시오.
<div>...</div> /* The `*=` atttribute selector will match a string anywhere in the attribute */ [style*='--stripes-angle'] { /* Only define the function where we want to call it */ --stripes: linear-gradient(…); }이 접근 방식은 설정되는 매개변수 외에 다른 속성을 포함하려는 경우에 가장 유용합니다. 예를 들어 그리드 영역을 설정하면 패딩과 배경도 추가할 수 있습니다.
[style*='--grid-area'] { background-color: white; grid-area: var(--grid-area, auto / 1 / auto / -1); padding: 1em; }결론
이 모든 부분을 함께 모으기 시작하면 사용자 정의 속성이 우리에게 익숙한 공통 변수 사용 사례를 훨씬 뛰어 넘는다는 것이 분명해집니다. 우리는 값을 저장하고 캐스케이드로 범위를 지정할 수 있을 뿐만 아니라 이를 사용하여 캐스케이드를 새로운 방식으로 조작하고 CSS에서 직접 더 똑똑한 구성 요소를 만들 수 있습니다.
이것은 우리가 SMACSS 및 BEM과 같은 명명 규칙에서 "범위가 지정된" 스타일 및 CSS-in-JS에 이르기까지 과거에 의존했던 많은 도구를 재고하도록 요구합니다. 이러한 도구 중 다수는 특수성을 해결하거나 다른 언어로 동적 스타일을 관리하는 데 도움이 됩니다. 이제 사용자 지정 속성으로 직접 해결할 수 있는 사용 사례입니다. JS에서 자주 계산했던 동적 스타일은 이제 원시 데이터를 CSS로 전달하여 처리할 수 있습니다.
처음에는 이러한 변경이 "복잡성 추가"로 보일 수 있습니다. CSS 내부의 논리를 보는 데 익숙하지 않기 때문입니다. 그리고 모든 코드와 마찬가지로 과잉 엔지니어링은 실제 위험이 될 수 있습니다. 그러나 많은 경우에 복잡성을 추가 하는 것이 아니라 복잡성을 타사 도구 및 규칙에서 웹 디자인의 핵심 언어로 다시 옮기고 (더 중요하게는) 다시 브라우저. 스타일에 계산이 필요한 경우 해당 계산은 CSS 내부에 있어야 합니다.
이 모든 아이디어는 훨씬 더 발전할 수 있습니다. 사용자 정의 속성은 이제 막 더 폭넓게 채택되기 시작했으며 우리는 가능한 것의 표면을 긁기 시작했을 뿐입니다. 나는 이것이 어디로 가고 다른 사람들이 생각해 낸 것을 보게되어 기쁩니다. 즐거운 시간 보내세요!
추가 읽기
- "CSS 사용자 정의 속성 사용을 시작할 때입니다", Serg Hospodarets
- "CSS 사용자 정의 속성에 대한 전략 가이드", Michael Riethmuller