유틸리티 우선 CSS - 먼저 시도해야 합니다!

Originally posted at michaelzanggl.com. Subscribe to my newsletter to never miss out on new content.

수년 전에 부트스트랩은 이미 유틸리티 클래스 세트를 제공했습니다. 예를 들어 text-center의 경우 text-align: center;입니다. 수년에 걸쳐 이러한 프레임워크는 이와 같이 점점 더 많이 출시되기 시작했습니다.

아마도 내가 가장 좋아하는 것은 간격 유틸리티일 것입니다. mt-1 for margin-top: 2px; , px-3 for padding-left: 8px; padding-right: 8px; , m-auto for margin: auto 등. 패딩을 추가할 수 있도록 추상적인 클래스 이름을 발명해야 하는 시대는 지났습니다.

그래서 최근에 Tailwind CSS의 버전 1.0이 출시되었습니다. 접근 방식은 기존 CSS 프레임워크와 크게 다릅니다. 높은 수준의 스타일과 구성 요소를 제공하는 대신 모든 것을 낮은 수준으로 유지하고 유틸리티 클래스에만 집중합니다.

<div class="md:flex bg-white hover:bg-gray-200 rounded-lg p-6">
    <img class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="avatar.jpg">
    <div class="text-center md:text-left">
      <h2 class="text-lg">Erin Lindford</h2>
      <div class="text-purple-500">Customer Support</div>
      <div class="text-gray-600">[email protected]</div>
      <div class="text-gray-600">(555) 765-4321</div>
    </div>
</div>

이것은 끔찍해 보인다! 내 HTML은 영원히 망가질거야!!

이것은 아마 대부분의 사람들이 이것을 보았을 때의 첫 반응일 것입니다. 결국 이것은 의미론에 대한 다양한 모범 사례를 위반하고 있습니다.

느낌이 이상해요... 직접 해보기 전까지는요!

반복합니다. 이해하려면 시도해야 합니다!

codepen을 열고 here에서 무언가를 다시 만들어 보십시오.

적어도 나에게는 이상할 정도로 자연스럽고 생산적으로 느껴진다. 더 이상 HTML과 CSS 사이를 전환할 필요가 없다는 것은 행복한 일입니다. 생각해 보면 스타일을 동시에 변경하지 않고 HTML을 마지막으로 편집한 것이 언제입니까?

가장 일반적인 질문을 해결해 봅시다!

인라인 스타일을 작성하지 않는 이유는 무엇입니까?

인라인 스타일을 사용하면 매우 제한적입니다. 미디어 쿼리 또는 의사 클래스가 없습니다.

tailwind CSS를 사용하면 클래스 집합에서 선택하므로 스타일을 추가할 때마다 새로운 글꼴 크기, 색상, 여백, 여백 등을 생각하지 않고 기존 집합에서 선택하기만 하면 됩니다. Adam Wathan이 말했듯이Designing with constraints . 여기에는 두 가지 주요 이점이 있습니다.

항상 새로운 크기와 색상을 생각하지 않아도 되므로 많은 시간을 절약할 수 있습니다

.

동일한 크기 등을 재사용하면 자연스럽게 UI도 많이 개선됩니다.

더 많은 혜택을 살펴보겠습니다.

더 이상 this-wrapper , that-body 와 같은 나쁜 클래스 이름을 발명하는 데 시간을 낭비하지 않아도 됩니다.

중단점 접두사! 다시 한 번 말하지만 중단점 접두사!! 즉, 미디어 쿼리를 99.999% 제거합니다. xs:p-3 , md:text-center ...

핵심에 맞게 사용자 정의할 수 있습니다. 특정 속성이 마음에 들지 않습니까? 구성에서 기본값을 재정의하십시오! 중단점, 의사 클래스 등을 계속 사용하면서 자체 유틸리티 클래스를 추가할 수도 있습니다.

JS 프레임워크 불가지론. vue, react, angular, blade, traditional sites 등과 함께 즉시 작동합니다. 즉, 다른 JS 프레임워크를 사용하기로 결정했다고 해서 새로운 CSS 프레임워크를 배울 필요가 없습니다.

일련의 수업을 반복하고 있습니까? 문제 없습니다. "유틸리티 전용"이 아니라 "유틸리티 우선"이라고 합니다. TailwindCSS는 기존 유틸리티를 사용하여 새 클래스를 만드는 데도 도움이 됩니다.

.btn {
  @apply rounded-full text-sm text-white bg-blue-400 shadow-lg;
}

더 이상 거대한 CSS/SCSS 파일을 유지 관리할 필요가 없습니다. CSS는 결국 매우 빠르게 성장합니다.

이전 혜택과 함께 제공됩니다. 유틸리티 우선 접근 방식을 사용하면 훨씬 더 자신 있게 변경할 수 있습니다.

버튼 등의 모양과 느낌을 결정하는 프레임워크 잠금이 없습니다. 이것은 당신의 디자인을 독특하게 만들 것입니다.

그래도 의심이 든다면 .

TailwindCSS는 The State of CSS 2019에서도 매우 높은 순위를 기록했습니다.

결론

Did you know GitHub is following this approach as well?

너무 상쾌해서 정말 좋아하는 것일 수도 있습니다. 어쩌면 나는 단점을 간과하고 그것이 제공하는 이점에만 집중하고 있는지도 모릅니다. 그것은 확실히 가능합니다. 그럼 지금부터 1년 후에 제가 이것에 대해 어떻게 느끼는지 봅시다. 하지만 당분간은 정말 즐기고 있습니다!

모든 것을 말하면서 it을 직접 사용해 보고 나만큼 즐길 수 있기를 바랍니다!


이 기사가 도움이 되었다면 작성 소프트웨어 단순화에 대한 더 많은 팁이 있습니다here.