Building complex components from a constrained set of primitive utilities.

Overview - 일반 CSS와 비교

• 기존 방식으로 웹에 스타일을 적용하는 방법은, classname을 정하고, 각 classname에 custom CSS를 작성하는 것이다.

  

  • 만약 이런 화면을 만들고자 한다면, 기존 방식으로는 아래와 같이 긴 코드를 작성해야 한다.

    <div class="chat-notification">
      <div class="chat-notification-logo-wrapper">
        <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
      </div>
      <div class="chat-notification-content">
        <h4 class="chat-notification-title">ChitChat</h4>
        <p class="chat-notification-message">You have a new message!</p>
      </div>
    </div>
    
    <style>
      .chat-notification {
        display: flex;
        align-items: center;
        max-width: 24rem;
        margin: 0 auto;
        padding: 1.5rem;
        border-radius: 0.5rem;
        background-color: #fff;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }
      .chat-notification-logo-wrapper {
        flex-shrink: 0;
      }
      .chat-notification-logo {
        height: 3rem;
        width: 3rem;
      }
      .chat-notification-content {
        margin-left: 1.5rem;
      }
      .chat-notification-title {
        color: #1a202c;
        font-size: 1.25rem;
        line-height: 1.25;
      }
      .chat-notification-message {
        color: #718096;
        font-size: 1rem;
        line-height: 1.5;
      }
    </style>
    

• 하지만, Tailwind에서는 미리 만들어져 있는(pre-existing) 유틸리티 클래스(utility classes)를 사용하여 HTML에 직접적으로 스타일을 작성할 수 있다. 동일한 화면을 Tailwincss를 사용하여 작성하면 아래 코드처럼 작성할 수 있다:

  • *여기서 유틸리티 클래스란 별게 아니다. 우리도 직접 스타일링 목적을 가진 특정 클래스 이름(e.g. bg-white, h-12, etc.)에 특정 CSS 스타일을 지정하기만 하면 유틸리티 클래스를 만들 수 있다. Tailwincss는 이런 유용한 유틸리티 클래스들을 굉장히 많이 미리 만들어놓고 제공하는 CSS framework인 것이다.

  <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
    <div class="shrink-0">
      <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
    </div>
    <div>
      <div class="text-xl font-medium text-black">ChitChat</div>
      <p class="text-slate-500">You have a new message!</p>
    </div>
  </div>
  

  • 훨씬 코드가 짧아졌다. 별도의 CSS 코드 작성이 필요하지 않다.
  • In the example above, we’ve used:
    • Tailwind’s flexbox and padding utilities (flex, shrink-0, and p-6) to control the overall card layout
    • The max-width and margin utilities (max-w-sm and mx-auto) to constrain the card width and center it horizontally
    • The background color, border radius, and box-shadow utilities (bg-white, rounded-xl, and shadow-lg) to style the card’s appearance
    • The width and height utilities (w-12 and h-12) to size the logo image
    • The space-between utilities (space-x-4) to handle the spacing between the logo and the text
    • The font size, text color, and font-weight utilities (text-xl, text-black, font-medium, etc.) to style the card text

• 재밌게도, 공식문서는 이런 방식이 나쁘게 보일 수 있다는 것을 알고 있다는 식으로 설명한다. 하지만, 그럼에도 한번 시도해본다면, 분명한 장점들이 있음을 느낄 수 있을것이라고 주장한다.

  Now I know what you’re thinking, “this is an atrocity, what a horrible mess!” and you’re right, it’s kind of ugly. In fact it’s just about impossible to think this is a good idea the first time you see it — you have to actually try it.

• 장점들은 다음과 같다고 한다:

  • You aren’t wasting energy inventing class names. No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that’s really just a flex container.
    • 아주 공감되는 부분이다. 또한 class name이라는 연결고리를 가지고 HTML 작성 부분과 CSS 작성 부분을 번갈아 왔다갔다, 스위칭하지 않아도 된다는 장점도 있을 듯 하다.
  • Your CSS stops growing. Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS.
  • Making changes feels safer. CSS is global and you never know what you’re breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking.

• HTML에서 predefined된 utility classes를 통해 작업하는 것은 생산성 측면에서 큰 장점이 있다고 한다.

Why not just use inline styles?

• utility class를 사용하는 것은 그냥 inline style 방식에 비해 몇가지 중요한 이점이 있다:
  • Designing with constraints. Using inline styles, every value is a magic number. With utilities, you’re choosing styles from a predefined **design system(related topic: Customization - Theme)**, which makes it much easier to build visually consistent UIs.
  • Responsive design. You can’t use media queries in inline styles, but you can use Tailwind’s responsive utilities to build fully responsive interfaces easily.
  • Hover, focus, and other states. Inline styles can’t target states like hover or focus, but Tailwind’s state variants make it easy to style those states with utility classes.

Maintainability concerns

• uitility-first 접근을 사용할때 유지보수maintainability 측면에서 가장 큰 우려는 ‘공통적으로 반복되는 유틸리티 조합’을 어떻게 관리하느냐일 것이다. 이것은 다음과 같은 방법들로 해결할 수 있다고 한다:

  • 컴포넌트나 partials로 추출하기(React, Vue 등)

  • 그리고 에디터의 멀티 커서(vs code의 cmd+d)

  • 언어의 loop

    구체적은 방법은 Core Concepts - Reusing Styles에서 다룬다 - Reusing Styles

• 거대한 CSS codebase를 유지하는 것보다는 utility-first CSS project를 관리하는 것이 더 쉽다. 왜냐하면 단순하게 HTML을 관리하는 것이 CSS를 관리하는 것보다 쉽기 때문이다. GitHub, Netflix, Heroku, Kickstarter, Twitch, Segment와 같은 큰 기업들도 이러한 방식을 성공적으로 사용하고 있다고 한다.

• 참고자료:

  • By The Numbers: A Year and a Half with Atomic CSS by John Polacek
  • No, Utility Classes Aren’t the Same As Inline Styles by Sarah Dayan of Algolia
  • Diana Mounter on using utility classes at GitHub, a podcast interview

  For even more, check out The Case for Atomic/Utility-First CSS, curated by John Polacek.