Tailwind CSS 功能類優(yōu)先

功能類優(yōu)先

在一組受約束的原始功能類的基礎(chǔ)上構(gòu)建復(fù)雜的組件。

傳統(tǒng)情況下，當(dāng)您需要在網(wǎng)頁(yè)上設(shè)置樣式時(shí)，都需要編寫 CSS。

使用傳統(tǒng)方式時(shí)，定制的設(shè)計(jì)需要定制的 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;
    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;
    padding-top: 0.25rem;
  }
  .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，您可以通過(guò)直接在 HTML 中應(yīng)用預(yù)先存在的類來(lái)設(shè)置元素的樣式。

使用功能類構(gòu)建自定義設(shè)計(jì)而無(wú)需編寫 CSS

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-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-gray-500">You have a new message!</p>
  </div>
</div>

在上面的示例中，我們使用了：

• 使用 Tailwind 的 ?flexbox ?和 ?padding ?功能類 (?flex?, ?flex-shrink-0?, 和 ?p-6?) 來(lái)控制整體的卡片布局
• 使用 ?max-width? 和 ?margin ?功能類 (?max-w-sm? 和 ?mx-auto?) 來(lái)設(shè)置卡片的寬度和水平居中
• 使用 ?background color?, ?border radius?, 和 ?box-shadow? 功能類 (?bg-white?, ?rounded-xl?, 和 ?shadow-md?) 設(shè)置卡片的外觀樣式
• 使用 ?width ?和 ?height ?功能類 (?w-12? and ?h-12?) 來(lái)設(shè)置 logo 圖片的大小
• 使用 ?space-between? 功能類 (?space-x-4?) 來(lái)處理 logo 和文本之間的間距
• 使用 ?font size?，?text color?，和 ?font-weight? 功能類 (?text-xl?，?text-black?，?font-medium? 等等) 給卡片文字設(shè)置樣式

這種方法使我們無(wú)需編寫一行自定義的 CSS 即可實(shí)現(xiàn)一個(gè)完全定制的組件設(shè)計(jì)。

我知道您在想：“這太繁瑣了，真是一團(tuán)糟！” 您是對(duì)的，這有點(diǎn)丑陋。實(shí)際上，當(dāng)您第一次看到它時(shí)，幾乎不可能認(rèn)為這是一個(gè)好主意—您必須實(shí)際嘗試一下。

但是，一旦您以這種方式實(shí)際構(gòu)建了一些東西，您就會(huì)很快注意到一些真正重要的優(yōu)點(diǎn)：

• 您沒(méi)有為了給類命名而浪費(fèi)精力。 不需要僅僅為了設(shè)置一些樣式而額外添加一些像 ?sidebar-inner-wrapper? 這樣愚蠢的類名，不必再為了一個(gè) flex 容器的完美抽象命名而倍受折磨。
• 您的 CSS 停止增長(zhǎng)。 使用傳統(tǒng)方法，每次添加新功能時(shí) CSS 文件都會(huì)變大。使用功能類，所有內(nèi)容都是可重用的，因此您幾乎不需要編寫新的CSS。
• 更改會(huì)更安全。 CSS 是全局性的，您永遠(yuǎn)不知道當(dāng)您進(jìn)行更改時(shí)會(huì)破壞掉什么。您 HTML 中的類是本地的，因此您可以更改它們而不必?fù)?dān)心其他問(wèn)題。

當(dāng)您意識(shí)到在 HTML 中使用預(yù)定義的功能類是多么的富有成效時(shí)，以任何其他方式工作都感覺(jué)像是折磨。

為什么不使用內(nèi)聯(lián)樣式？

對(duì)這種方式的一個(gè)普遍反應(yīng)是, “這不就是內(nèi)聯(lián)樣式嗎？” 在某些方面是 — 您是將樣式直接應(yīng)用于元素，而不是為元素分配一個(gè)類，然后在這個(gè)類中設(shè)置樣式。

但是使用功能類比內(nèi)聯(lián)樣式具有一些重要的優(yōu)點(diǎn)：

• 基于約束的設(shè)計(jì). 使用內(nèi)聯(lián)樣式, 每個(gè)值都是一個(gè)魔術(shù)數(shù)字。 使用功能類, 您是從預(yù)定義的設(shè)計(jì)系統(tǒng)中選擇樣式，這使得構(gòu)建統(tǒng)一的UI變得更加容易。
• 響應(yīng)式的設(shè)計(jì). 在內(nèi)聯(lián)樣式中您不能使用媒體查詢, 但您可以使用 Tailwind 的響應(yīng)式功能類非常容易的構(gòu)建完全響應(yīng)式的界面。
• Hover, focus, 以及其它狀態(tài). 內(nèi)聯(lián)樣式無(wú)法設(shè)置 hover 或者 focus 這樣的狀態(tài), 但 Tailwind 的狀態(tài)變體使用功能類可以非常容易的為這些狀態(tài)設(shè)置樣式。

該組件完全響應(yīng)，并包括具有 hover 和 focus 樣式的按鈕，完全由功能類構(gòu)建：

<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
  <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src="/img/erin-lindford.jpg" alt="Woman's Face">
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">
        Erin Lindford
      </p>
      <p class="text-gray-500 font-medium">
        Product Engineer
      </p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
  </div>
</div>

可維護(hù)性問(wèn)題

在使用功能優(yōu)先的方式時(shí)，最大的可維護(hù)性問(wèn)題是管理通用的可重復(fù)使用的功能類組合。

通過(guò)提取組件（通常做為模板片斷或者組件），可以輕松解決此問(wèn)題。

<!-- PrimaryButton.vue -->
<template>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    <slot/>
  </button>
</template>

您也可以使用 Tailwind 的 ?@apply? 功能創(chuàng)建抽象的 CSS 類。

<!-- Using utilities -->
<button class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700">
  Click me
</button>

<!-- Extracting classes using @apply -->
<button class="btn btn-green">
  Button
</button>

<style>
  .btn {
    @apply py-2 px-4 font-semibold rounded-lg shadow-md;
  }
  .btn-green {
    @apply text-white bg-green-500 hover:bg-green-700;
  }
</style>

除此之外，維護(hù)功能優(yōu)先的 CSS 項(xiàng)目比維護(hù)大型 CSS 代碼庫(kù)要容易得多，因?yàn)?nbsp;HTML 比 CSS 維護(hù)容易得多。諸如 GitHub，Heroku，Kickstarter，Twitch，Segment 等大型公司都在使用這種方法，且取得巨大成功。

如果您想了解其他人使用此方法的經(jīng)驗(yàn)，請(qǐng)查看以下資源：

• By The Numbers: A Year and a Half with Atomic CSS by John Polacek
• Building a Scalable CSS Architecture by Sarah Dayan of Algolia
• Diana Mounter on using utility classes at GitHub, a podcast interview

查看 John Polacek 策劃的 The Case for Atomic/Utility-First CSS 了解更多信息。