유틸리티 우선 CSS로 신속한 프로토타이핑

저는 Flexiple and Remote Tools의 공동 설립자입니다. 이 게시물에서는 빠르고 강력하며 유지 관리가 적은 방식으로 웹 사이트의 UI를 구축하기 위해 유틸리티 우선 CSS 프레임워크를 사용하기로 선택한 이유를 설명합니다.

다음은 짧은 데모 및 트위터 스레드입니다(빠른 읽기를 선호하는 경우).

















흐리시케시 파르데시


@hrishiptweets






7일 만에 커뮤니티 플랫폼인 V1을 구축했습니다.- lobste.rs 위에 맞춤 구축 - 기술 스택: Ruby on Rails( ), Tailwind, JawsDB, Heroku- 출시 시간: 7일, 비용: $17/모내가 만든 방법은 다음과 같습니다 👇


오후 14:11 - 2020년 9월 16일

왜 유틸리티 우선 CSS인가

1. 추상화에 대해 미리 걱정하지 않고 신속한 프로토타이핑

특히 앱 개발의 초기 단계에서 신속한 프로토타이핑을 수행할 때 유틸리티 클래스가 매우 편리하다고 생각했습니다.

저의 첫 번째 우선 순위는 항상 처음부터 CSS 구성 요소를 빌드하는 것에 대해 걱정할 필요 없이 페이지에서 사용자 지정 UI 요소를 빠르게 빌드하는 것입니다. 후자의 접근 방식은 종종 조기 추상화로 이어집니다. 즉, 특정 사용 사례에 대한 구성 요소를 구축하고 결국 사용하지 않게 됩니다.

2. 필요할 때 구성 요소 추출

이러한 유틸리티 클래스를 여러 페이지의 여러 요소에 추가하고 공통 유틸리티 세트가 사용되는 것을 확인하면 언제든지 내 웹사이트의 이 기본 버튼처럼 추출할 수 있습니다.

.btn-primary {
    @apply font-bold py-2 px-4 border rounded border-azure-radiance-500 hover:border-silver-500 bg-azure-radiance-500 hover:bg-silver-500 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105;
}

3. 핵심에 대한 사용자 정의

웹 사이트를 구축한 지 며칠이 되었을 때 페이지 전체의 회색 음영이 너무 어둡다는 것을 깨달았습니다.

완전히 새로운 회색 팔레트가 있고 Tailwind에서 회색 기본값을 재정의하기만 하면 됩니다.

theme: {
 extend: {
  colors: {
   'gray': {
     100: '#F9F9F9',
     200: '#F0F0F0',
     300: '#E7E7E7',
     400: '#D6D6D6',
     500: '#C4C4C4',
     600: '#B0B0B0',
     700: '#767676',
     800: '#585858',
     900: '#3B3B3B',
    }
   }
 }
}

단순한 색상이 아닙니다. 여백, 패딩, 글꼴 등 Tailwind의 모든 기본값을 실질적으로 재정의하거나 확장할 수 있습니다.

4. 쉽게 반응

Tailwind는 4개의 중단점(sm, md, lg, xl)을 제공하며 중단점이 기본적으로 모바일 우선이라는 사실이 마음에 듭니다. 따라서 접두어가 붙지 않은 유틸리티 클래스는 모든 화면에 적용되는 반면 접두어가 붙은 유틸리티 클래스는 지정된 중단점 이상에서만 적용됩니다.

예를 들어, 이 코드는 오른쪽 사이드바가 있는 페이지용입니다.

<div class="w-full sm:w-1/4 sm:order-2">
  <div class="sm:mt-16 mt-4">
    <%= render "shared/right_sidebar" %>
  </div>
</div>
<div class="w-full sm:w-3/4 sm:order-1">
..
</div>

따라서 각 div는 사이드바가 25%를 차지하고 메인 콘텐츠가 나머지를 차지하는 640px 이상(sm)을 제외한 모든 화면에서 전체 너비를 차지합니다.

5. 추출된 구성요소를 제외하고는 클래스 이름을 지정할 필요가 없습니다.

Flexiple의 코드를 다시 볼 때마다 항상 나를 짜증나게 하는 한 가지는 클래스의 이름 지정입니다. 'dont-take-our-word_text-content' 및 'u-margin-bottom-big'과 같은 이름은 발명품으로 간주되어야 합니다.

Tailwind의 명명 규칙은 직관적입니다. 게다가 수많은 새 이름을 떠올리기 위해 머리를 긁적일 필요가 없습니다.

이것이 인라인 스타일과 어떻게 다릅니까?

이것은 처음에 나를 괴롭힌 것입니다. 인라인 스타일을 사용하는 것은 금기이며 여기서도 같은 일을 하게 될지 걱정이 되었습니다.

하지만 둘 사이에는 극명한 차이가 있습니다. 인라인 스타일을 사용하면 원하는 거의 모든 작업을 수행할 수 있습니다. 반면에 Tailwind는 제약이 있는 디자인 시스템을 제공하며 사용자는 제약이 있는 디자인 시스템에서 스타일을 선택하기만 하면 됩니다.

원자 클래스는 아무리 원자적이라도 항상 유한한 목록으로 유지됩니다.

읽어 주셔서 감사합니다! 당신이 그것을 좋아한다면 - 나는 기술, 제품 및 신생 기업에 대해 정기적으로 글을 씁니다.