소품 개방 (및 시스템으로 맞춤 속성)

CSS Custom Properties는 색상, 글꼴, 간격 및 타이밍과 같은 재사용 가능한 장치와 같은 디자인 토큰에 대한 간단한 접근 방식을 제공합니다. 이러한 토큰에 주로 의존하면 깨끗하고 일관된 설계, 즉 웹 개발의 주요 목표입니다. 이 접근법은 유틸리티 클래스 프레임 워크의 매력을 반영합니다.

유틸리티 클래스 프레임 워크의 인기는 사전 구성된 클래스에서 비롯되어 미적으로 유쾌한 디자인으로 이어집니다. 제한된 값 선택은 일관되고 전문적인 모양을 보장합니다.

다음과 같은 예를 고려하십시오 : 사전 정의 된 클래스 사용 :

<h1 id="헤더"> 헤더</h1>

... CSS 사용자 정의 속성을 활용하는 것과 비슷합니다.

 html {
  -콜로 프라이 사항 : 녹색;
  -크기-크기 : 3REM;
  / * ... 더 많은 토큰 */
}

H1 {
  색상 : var (-컬러 프라이드);
  글꼴 크기 : var (-size-large);
}

둘 다 건물 제로 옵션을 제공합니다. Tachyons와 같은 프레임 워크는 즉시 사용 가능한 유틸리티 클래스를 제공하는 반면 Windi는 정시 컴파일러를 사용합니다. 마찬가지로 Pollen은 사전 구축 된 사용자 정의 속성 라이브러리를 제공하며 혁신적인 오픈 소품은 정시 컴파일러를 사용하여 중고 특성 만 포함합니다.

열린 소개 소개 :

Open Props는 본질적으로 스타일링을위한 강력한 기초 역할을하는 CSS 사용자 정의 속성의 포괄적 인 컬렉션입니다. "사용자 정의 속성 우선"접근 방식을 강조하여 설계 토큰의 확립 된 관행을 사전 정의 된 옵션 세트로 반영합니다.

유사점은 분명합니다.

오픈 소품의 매력적인 기본값이 주요 추첨 일 수 있습니다.

그러나 오픈 소품은 명명 요소의 필요성을 제거하지 않습니다. 여전히 표준 CSS 선택기 (명명 된 클래스와 유사)를 사용하여 타겟 및 스타일 요소를 사용합니다. 주요 차이점은 수동으로 값을 생성하는 대신 사전 정의 된 사용자 정의 속성을 활용하는 것입니다.

Core Open Props 라이브러리 (소스 사용 가능한)의 무게는 4.4kb (DevTools 측정 기반)입니다. 이것은 최소한의 오버 헤드를 나타내는 사용자 정의 CS를 제외합니다. 추가 프로팩은 크기를 증가 시키지만 크게 유지되며 정시 편집은 크기 문제를 해결합니다. Stackblitz에서 이것을 실험 할 수 있습니다.

Open Props는 매력적인 솔루션을 제공합니다. 표준 CSS에 대한 의존은 미래의 호환성과 유연성을 보장합니다.

위 내용은 소품 개방 (및 시스템으로 맞춤 속성)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!