Tailwind를 마지막 바이트까지 최적화

4682 단어 webdevcssbeginnerstailwindcss
이제 Tailwind이 CSS 대신 HTML에 바이트를 푸시하므로 HTML에서 클래스 사용량을 줄이는 데 유의해야 합니다. 좋은 예는 다음과 같습니다.

435바이트 스타일의 HTML 목록




<ul>
    <li class="text-sm text-slate-700 font-bold">Some List Item</li>
    <li class="text-sm text-slate-700 font-bold">Some List Item</li>
    <li class="text-sm text-slate-700 font-bold">Some List Item</li>
    <li class="text-sm text-slate-700 font-bold underline">Some List Item</li>
    <li class="text-sm text-slate-700 font-bold">Some List Item</li>
    <li class="text-sm text-slate-700 font-bold">Some List Item</li>
</ul>


VS – 238바이트 스타일 HTML 목록




<ul class="text-sm text-slate-700 font-bold">
    <li>Some List Item</li>
    <li>Some List Item</li>
    <li>Some List Item</li>
    <li class="underline">Some List Item</li>
    <li>Some List Item</li>
    <li>Some List Item</li>
</ul>


그리고 이것은 단지 6개 항목의 목록에 있습니다. 수십 또는 수백 개 정도의 반복 목록과 HTML을 처리할 때 그 차이를 상상해 보십시오.

Tailwind를 사용하면 스타일을 유틸리티 기반 모델로 단순화한다고 해서 CSS의 계단식 특성을 잊어버리고 활용하지 말아야 한다는 의미는 아닙니다. 예, Tailwind는 계단식 스타일의 복잡성과 문제를 단순화하지만 올바르게 사용하는 경우 반복과 복잡성을 줄이는 데 여전히 이점이 있습니다.

이것은 10년 전에 CSS를 손으로 직접 만들 때 좋은 경험 법칙이었지만 오늘날 Tailwind와 같은 도구를 마음대로 사용하더라도 반복할 가치가 있습니다. 가장 바깥쪽 요소에서 가능한 한 일반적으로 스타일을 시작하고 내부 요소의 특수성을 해결해야 하는 경우에만 더 구체적으로 지정하십시오.

추상화는 시간이 지남에 따라 프로그래머로서 익숙해지는 훌륭한 기술입니다. 공통점을 모두 살펴본 다음 보다 효과적으로 사용할 수 있도록 하나의 항목으로 그룹화합니다. 이것은 CSS를 다룰 때와 마찬가지로 프로그램에서도 작동합니다. 웹사이트 텍스트의 90%가 #334155 인 경우 html 또는 본문 요소( <body class="text-black"> )의 기본 텍스트 색상은 검은색이 아니어야 합니다. 내가 그렇게 말할 때 이것은 명백하게 들리지만, 나는 이것을 하지 않고 대신 5페이지 웹사이트의 289개 요소에 대해 클래스text-slate-700를 반복한다고 주장하는 얼마나 많은 웹사이트를 검사하는지에 계속해서 놀랐습니다.

많은 사람들이 reset 또는 normalize 스타일시트의 개념에 익숙할 것입니다. 그것이 실제로 CSS 추상화의 모습이며 "추상화"척도의 맨 끝에 있습니다. 브라우저에는 기본 요소의 스타일을 지정하는 통일된 방법이 없기 때문에 모든 요소에 대해 일관된 표시를 얻기 위해 스타일을 정규화하는 것부터 시작했습니다. 그런 다음 캐스케이드를 따라 계속 진행하면 기본 요소 스타일을 처리할 수 있습니다. 여기에서 <h1> 제목 및 <input> '와 같이 사용할 모든 기본 요소의 모양과 느낌을 좀 더 독단적으로 지정하고 스타일을 지정할 수 있습니다. 에스. 여기에서 우리는 일반적으로 구성 요소 수준으로 이동하지만 마찬가지입니다. 우리는 구성 요소에 대해 BEM과 같은 방법론을 구현하여 블록 수준에서만 이름을 지정하고 쉽게 추상화할 수 있으며 필요에 따라 신중하게 modifying 합니다. 이렇게 하면 너무 일찍 구체적으로 설명할 필요 없이 재사용 및 구성이 가능해집니다.

최근 몇 년 동안 캐스케이딩 스타일과 CSS가 작업하기 어렵다는 말을 많이 들었지만 실제로는 그렇게 느끼지 못했습니다. 아마도 웹이 조금 더 단순했을 때 더 나은 경험을 했기 때문일 것입니다. 실제로는 매우 다양한 웹 페이지에서 매우 적은 바이트로 일관된 시각적 인터페이스를 생성하기 위한 우아하고 강력한 도구였습니다. 계단식 특성을 수용하고 lay eggs and die of exhaustion으로 집으로 돌아가는 필사적인 연어처럼 상류로 가지 않은 경우입니다. 스타일은 이유 때문에 한 방향으로 계단식으로 배열됩니다.
NextJS + TailwindCSS + TS + RadixUI의 변형으로 다형성 버튼을 만드는 방법
캔버스가 있는 맞춤형 경품 휠

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage