CSS 사용자 정의 속성 및 테일 윈드로 색상 테마

CSS 사용자 정의 속성은 코드 효율성을 향상시킬뿐만 아니라 CSS, 특히 테마 설계에서 더 많은 가능성을 만듭니다. Atomic Smash 팀은 Tailwind CSS (유틸리티 클래스 프레임 워크)를 사용합니다. 이 기사는 테마 설계에 맞춤 속성을 사용하는 방법과 테일 윈드와 통합하여 코드의 재사용 성을 극대화하는 방법을 살펴 봅니다. 이 기사에서는 Tailwind에 대한 소개를 설명하지 않습니다. 공식 문서를 확인하십시오. 그러나 Tailwind가 처음 사용 되더라도 유용한 팁을 찾을 수 있습니다.

주제 개요

제목, 본문 및 버튼이 포함 된 "CTA"구성 요소가 있다고 가정합니다.

이 색 구성표에 대한 정기적 인 (꼬리가 아닌) CSS를 작성하면 다음과 같습니다.

 <code>.cta { background-color: #742a2a; // 深红色 color: #ffffff; // 白色}  .cta__heading { background-color: #e53e3e; // 中等红色 color: #742a2a; } .cta__button { background-color: #e53e3e; }</code>

Tailwind를 사용하면 이러한 색상을 HTML에서 유틸리티 클래스로 적용합니다.

<code><div>
<h3 id="메일-링리스트에-가입하십시오">메일 링리스트에 가입하십시오</h3>
<div>
<p>새로운 제품을 먼저 알 수 있습니다</p>
  등록하다</div>
</div></code>

기본 색 구성표와 관련이없는 클래스를 의도적으로 생략했지만이 데모에서 전체 예제를 볼 수 있습니다.

이제 구성 요소에 다른 색 구성표를 적용하려면 원래 구성 요소의 색상 값을 무시해야합니다. Tailwind가 없으면 일반적인 접근 방식은 테마 클래스를 구성 요소 자체에 첨부하고 캐스케이드의 색상 값을 재정의하는 것입니다. 따라서 ".cta-blue"(BEM 컨벤션 사용) 수정 자 클래스가있는 구성 요소의 경우 청색 구성표의 CSS 값을 적용합니다.

 <code>.cta--blue { background-color: #2a4365; // 深蓝色} .cta--blue .cta__heading { background-color: #3182ce; // 中等蓝色 color: #2a4365; } .cta--blue .cta__button { background-color: #3182ce; }</code>

SASS 또는 기타 사전 처리기를 사용하는 경우 변수를 사용하여 작업을 단순화 할 수 있으며 .cta__heading 및 .cta__body selectors를 중첩 할 수 있습니다. 코드가 더 간결하게 만들지는 않지만 한 곳에서 이러한 값을 업데이트하면 코드를보다 관리하기 쉽게 만듭니다.

이제 프로젝트에서 경험 한 것처럼 10 가지 색 구성표가 있다고 가정 해 봅시다. 이러한 색상 값을 변경하기 전에 기본적으로 위의 예를 10 번 반복했기 때문에 코드가 길어지기 시작합니다. 이제 설계 시스템의 각 구성 요소에는 10 가지 색 구성표가 필요하며 많은 구성 요소가 간단한 CTA보다 훨씬 더 복잡하다고 상상해보십시오. 어쩌면 우리의 테마에는 다른 글꼴도 필요합니다. 갑자기 우리는 많은 CSS를 써야합니다.

테마 디자인에 Tailwind를 사용하십시오

반면에 Tailwind를 사용하면 HTML 자체에서 여러 클래스를 변경해야합니다. JavaScript 프레임 워크 (React 또는 Vue와 같은)를 사용하더라도 이것은 쉬운 일이 아닙니다. 사용하지 않는 스타일이 프로덕션 버전으로 제거되도록 Tailwind는 문자열 연결을 사용하여 클래스 이름을 작성하여 (글을 쓰는 시점에) 권장하지 않습니다. 따라서 주제를 구축한다는 것은 구성 요소에 많은 논리를 추가하는 것을 의미 할 수 있습니다.

테마 디자인에 맞춤 속성을 사용하십시오

색상 테마에 맞춤 속성을 사용하면 작성 해야하는 코드의 양을 크게 줄이고 유지 보수 부담을 줄일 수 있습니다. 먼저 일반 CSS 에서이 작업을 수행하는 방법을 살펴 보겠습니다.

사용자 정의 속성을 다음과 같이 정의합니다. 루트 선택기의 변수, 글로벌 변수입니다. (본체 선택기도 적용됩니다.) 그런 다음이 변수를 사용하여 선택기의 색상 속성 값을 대체 할 수 있습니다.

 <code>:root { --primary: #742a2a; // 深红色 --secondary: #e53e3e; // 中等红色} .cta { background-color: var(--primary); color: white; } .cta__heading { background-color: var(--secondary); color: var(--primary); } .cta__button { background-color: var(--secondary); }</code>

이것은 정말 마법의 위치입니다. 이제 각 주제에 대한 코드를 작성하려면 이러한 사용자 정의 속성 값을 업데이트하면됩니다. 테마 클래스를 어디에 적용하든 새 값은 상속됩니다.

 <code>.th-blue { --primary: #2a4365; // 深蓝色 --secondary: #3182ce; // 中等蓝色}</code>

파란색 구성표를 원한다면 .th-blue 클래스를 구성 요소에 적용 할 수 있습니다. 태그에 사용하여 페이지 전체 테마를 적용한 다음 필요에 따라 개별 구성 요소에 덮어 씁니다. 유틸리티 클래스를 사용하면 코드 기반의 어느 곳에서나 적용 할 수 있으므로 구성 요소 별 클래스 (원래 코드의 .cta-- 블루)보다 더 많은 코드 쓰기 노력을 절약 할 수 있습니다.

레거시 브라우저를 처리합니다

많은 대행사와 마찬가지로 많은 원자 스매쉬 고객은 여전히 ​​Internet Explorer에 대한 지원이 필요합니다. 11. 대부분의 경우 점진적인 향상 방법을 받아 들일 수 있지만 (예 : CSS 그리드를 지원하지 않는 브라우저에 더 간단한 폴백 레이아웃을 제공 함) 테마 디자인은 일반적으로 쉬운 타협을 허용하지 않는 영역이라는 것을 발견했습니다. 고객은 오래된 브라우저에서도 브랜드 색상과 글꼴을보고 싶어합니다. 기능 쿼리로 폴백을 제공하려면 많은 추가 작업이 필요하므로 사용자 정의 속성 사용의 이점이 상쇄됩니다. 이 문제를 극복하려면 폴리 필이 필요합니다.

IE 11의 사용자 정의 속성에 폴리 필을 제공하는 몇 가지 옵션이 있습니다.

Postcs-Custom-Properties

첫 번째는 PostCSS-Custom-Froperties라는 PostCSS 플러그인을 사용하는 것입니다. 워크 플로에서 이미 PostCS를 사용하고 있다면이 플러그인을 추가하는 것이 매우 간단합니다. CSS를 처리하고 변수 결과를 속성 값으로 출력하여 작동합니다. 다음 CSS가있는 경우 :

 <code>:root { --color: red; } h1 { color: var(--color); }</code>

처리 후 결과는 다음과 같습니다.

 <code>h1 { color: red; color: var(--color); }</code>

사용자 정의 속성을 지원하지 않는 브라우저는 두 번째 규칙을 무시하고 일반 속성 값으로 돌아갑니다. 출력에서 사용자 정의 속성이있는 규칙을 제거하는 옵션도 있으므로 파일 크기가 더 작습니다. 이는 브라우저가 사용자 정의 속성을 가져 오지 않음 을 의미합니다. 변수를 동적으로 업데이트하는 경우 문제가되지만 부작용없이 코드의 정적 값에 사용할 수 있습니다.

불행히도이 폴리 필은 몇 가지 제한 사항이 있습니다.

1. 구성에서 사용자 정의 속성을 정의하는 파일 (또는 파일)을 지정해야합니다.
2. 사용자 정의 속성은 : 루트 선택기에만 정의 될 수 있습니다 .

첫 번째 한계는 상대적으로 사소하지만 두 번째 한계는 불행히도이 폴리 필이 우리의 주제 설계 사용 사례에 대해 완전히 쓸모가 없습니다. 이것은 선택기의 변수를 재정의하여 주제를 만들 수 없다는 것을 의미합니다.

ie11customproperties

이 PolyFill 옵션에는 CSS 전처리 대신 클라이언트 스크립트를 제공하는 것이 포함됩니다. 다음 스크립트를 머리에 추가하여 PolyFill이 IE 11에서만로드되고 있는지 확인할 수 있습니다.

 <code>window.MSInputMethodContext && document.documentMode && document.write('');</code>

이를 통해 여기서 예제에서했던 것처럼 사용자 정의 속성을 활용할 수 있으므로 이것이 내가 사용하기로 결정한 솔루션입니다. 스타일 속성으로 설정된 사용자 정의 속성이 폴리 채워지지 않는다는 제한이 있습니다. 그러나 위의 주제 디자인 예제에 대해 테스트했으며 잘 작동합니다.

그러나 이것은 Tailwind와 어떤 관련이 있습니까?

우리가 보았 듯이, HTML의 어느 곳에서나 적용 할 수있는 유틸리티 클래스 (유틸리티 클래스)는 코드를 더 재사용 할 수있게 해줍니다. 이것은 Tailwind 및 기타 유틸리티 클래스 프레임 워크의 주요 판매 지점입니다. 제공하는 CSS 파일의 크기는 결과적으로 작아집니다. Tailwind는 여러 가지 색상 클래스를 제공합니다. .BG-Red-Medium은 우리에게 빨간색 배경색 속성 값을 제공합니다. .Text-Red-Medium은 색상, Box-Shadow 또는 색상 값이 필요한 곳을 생각할 수있는 모든 곳에 있습니다.

구성 파일에서 색상을 정의 할 수 있습니다.

 <code>module.exports = { theme: {  colors: {   red: {    medium: '#e53e3e',    dark: '#742a2a'   },   blue: {    medium: '#3182ce',    dark: '#2a4365'   }  } } }</code>

테일 윈드 클래스에 사용자 정의 속성 값을 사용하려면 구성에 지정할 수 있습니다.

 <code>module.exports = { theme: {  colors: {   'th-primary': 'var(--primary)',   'th-secondary': 'var(--secondary)'  } } }</code>

주제 관련 클래스 이름을 접두사로 접두어로 접두어를 접두어로 만들었으므로 주제 설계와 관련하여 특히 관련이 있지만 귀하에게 적합한 컨벤션을 자유롭게 사용할 수 있습니다.

이제 우리는 Tailwind를 통해이 클래스를 사용할 수 있습니다. .BG-TH-Primary 사용은 다음과 같습니다.

 <code>.some-element { background-color: var(--primary); }</code>

CSS에서는 이전과 같이 테마의 사용자 정의 속성을 정의 할 수 있습니다.

 <code>:root { --primary: #742a2a; --secondary: #742a2a; } .th-blue { --primary: #2a4365; --secondary: #3182ce; }</code>

이 클래스를 HTML에 적용합시다. 첫 번째 예제는 기본 테마 (변수에 정의 된 변수)가있는 구성 요소를 제공합니다. 두 번째는 파란색 테마가 있습니다. 유일한 차이점은 .th-blue 클래스가 구성 요소에 추가되었다는 것입니다. (단순성과 명확성을 위해, 나는 주제와 관련이없는 수업을 생략했다.)

<code><div class="bg-th-primary text-white">
<h3 id="메일-링리스트에-가입하십시오">메일 링리스트에 가입하십시오</h3>
<div>
<p>새로운 제품을 먼저 알 수 있습니다</p>
<button class="bg-th-secondary">등록하다</button>
</div>
</div>


<div class="th-blue bg-th-primary text-white">
<h3 id="메일-링리스트에-가입하십시오">메일 링리스트에 가입하십시오</h3>
<div>
<p>새로운 제품을 먼저 알 수 있습니다</p>
<button class="bg-th-secondary">등록하다</button>
</div>
</div></code>

스타일 가이드로 구성 사용

Tailwind는 귀하의 구성에서 모든 변수를 정의하도록 권장하며 개인적으로는 이것이 더 나은 접근 방식이라는 데 동의합니다. 이는 구성 파일이 색상 및 기타 테마 값을 정의하기 위해 여러 장소로 끝나는 것이 아니라 단일 사실의 소스가 될 수 있음을 의미합니다. 다행히도 사용자 정의 속성에 대한 Tailwind 구성 파일의 값을 사용할 수도 있습니다. 먼저 구성에서 모든 색상을 정의해야합니다 (Tailwind에 포함 된 기본 팔레트를 사용하지 않는다고 가정) :

 <code>module.exports = { theme: {  colors: {   red: {    medium: '#e53e3e',    dark: '#742a2a'   },   blue: {    medium: '#3182ce',    dark: '#2a4365'   },   'th-primary': 'var(--primary)',   'th-secondary': 'var(--secondary)'  } } }</code>

그런 다음 CSS의 테마 개체에 액세스 할 수 있습니다.

 <code>:root { --primary: theme('colors.red.dark'); --secondary: theme('colors.red.medium'); } .th-blue { --primary: theme('colors.blue.dark'); --secondary: theme('colors.blue.medium'); }</code>

요약

브라우저 지원에 대해 걱정하지 않고 사용자 정의 속성을 사용할 수있어서 너무 기쁩니다. 기존 워크 플로와 완벽하게 통합 할 수있어서 더 기쁩니다. 테마 디자인 측면에서 우리를 구할 시간을 과장하기는 어렵습니다. 테일 윈드 사용자가 아니더라도이 기사 에서이 유스 케이스에 대한 사용자 정의 속성을 시도하도록 권장 할 수 있기를 바랍니다.

위 내용은 CSS 사용자 정의 속성 및 테일 윈드로 색상 테마의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!