由Tailwind CSS舉例說明的公用事業(yè)領(lǐng)先的CSS正在通過通過單用途類促進一致性和速度來改變Web樣式。 1。開發(fā)人員直接在HTML中使用實用程序類，例如“ Flex”或“ P-6”，從而實現(xiàn)快速開發(fā)而無需切換文件，而不是語義類名稱。 2。由於設(shè)計令牌的穩(wěn)定間距和顏色，通過tailwind.config.js的定制，較小的CSS捆綁包的JIT模式以及出色的開發(fā)人員工具，Tailwind脫穎而出。 3。它在原型，基於組件的框架和團隊環(huán)境中表現(xiàn)出色，但可以混亂HTML，具有學習曲線，並且不是高度動態(tài)風格的理想選擇。 4。這種方法反映了從傳統(tǒng)的CSS向共同建立的可擴展策略的轉(zhuǎn)變，而不是替換CSS，而是重新考慮其應用程序，提供了一個基於約束的，可組合的系統(tǒng)，可提高效率並在項目中保持設(shè)計一致性。

您可能會注意到更多的網(wǎng)站，具有乾淨，一致的設(shè)計，開發(fā)人員正在談論更少的CSS。一個很大的原因？公用事業(yè)領(lǐng)先的CSS框架的興起，尤其是尾風CSS。這不僅僅是一種趨勢 - 它正在改變我們對造型Web界面的看法。

開發(fā)人員沒有編寫自定義CSS規(guī)則或用命名約定（看著您，BEM）來搏鬥，而是轉(zhuǎn)向?qū)嵱谜n程，這些課程可以做一件事情並做得很好。 Tailwind採用這個想法並使用它，提供了一個高度可定制的低級工具包，用於直接在標記中建造設(shè)計。

什麼是公用事業(yè)第一的CSS？

公用事業(yè)第一CSS翻轉(zhuǎn)傳統(tǒng)方法。與其創(chuàng)建語義類名稱，例如.card或.navbar ，而是直接在HTML中應用小型單用途類：

 <div class =“ flex p-6 bg-gray-100圓形lg shadow-md”>
  在
</div>

這裡的每個課程 - flex ， p-6 ， bg-gray-100 - 有一份工作。一開始這看起來可能會混亂，但好處是一致性和速度。您不是在文件之間切換以檢查或編寫CSS。一切就在那裡。

關(guān)鍵原則：

• 普通樣式不需要新的CSS
• 一致的設(shè)計令牌（間距，顏色，字體）
• 快速UI開發(fā)而無需離開模板

這就像在課堂上烘烤的設(shè)計系統(tǒng)一樣。

為什麼尾風脫穎而出

尾風不是第一個公用事業(yè)領(lǐng)先的框架，但這是一個獲得巨大關(guān)注的框架，出於充分的理由。

1。設(shè)計令牌，而不是任意值
從一開始就使用了設(shè)計系統(tǒng)。間距，顏色，字體 - 它們都以倍數(shù)或一致的比例定義。您不寫margin: 17px ;您使用my-4 （將其映射到1REM）。這可以在您的應用程序上執(zhí)行視覺一致性。

2。通過配置自定義
tailwind.config.js文件使您可以調(diào)整所有內(nèi)容：顏色，斷點，字體，甚至是生成的實用程序。您可以在不打架框架的情況下匹配品牌。

3。及時（JIT）模式
在JIT之前，Tailwind在所有可能的實用程序中生成了一個巨大的CSS文件?，F(xiàn)在，它僅構(gòu)建您使用的類 - 戲劇性地減小文件大小並啟用動態(tài)樣式（例如top-[127px] ）。

4。偉大的開發(fā)人員經(jīng)驗
借助良好的編輯器支持（自動完成，覆蓋），寫下逆風的感覺很快。諸如Headesesking格式課程和VS代碼擴展名之類的工具使您可以輕鬆預覽顏色和導航樣式。

當公用事業(yè)第一閃耀時（何時沒有）

尾雨在：

• 快速原型製作- 快速構(gòu)建屏幕而無需上下文切換
• 基於組件的UIS - 與React，Vue和Fect。
• 需要一致性的團隊- 不再需要“ 10種灰色陰影”或不一致的填充

但這不是魔術(shù)：

• html可能會變得嘈雜- 長上課的字符串很難掃描
• 學習曲線- 您需要知道類命名系統(tǒng)
• 對於高度動態(tài)風格而言並不理想- 有時內(nèi)聯(lián)CSS或CSS-IN-JS更好

有些人擔心使用樣式“污染” HTML。但是在組件驅(qū)動的應用程序中，您的標記和樣式已經(jīng)緊密耦合。尾風只是明確的。

更大的前景：CSS策略的轉(zhuǎn)變

尾風反映了更廣泛的轉(zhuǎn)變。我們正在從2010年的“分開文件，深嵌套，複雜的選擇器）一起編寫CSS的方式轉(zhuǎn)變?yōu)楣餐脫Q，約束和可擴展的樣式策略。

它不是替代CSS。它正在重新思考我們的應用。

而且，由於tailwind會生成真實的CSS，因此您可以隨時在需要時落到自定義樣式。這是一個基金會，而不是監(jiān)獄。

那麼公用事業(yè)是未來嗎？也許不是每個人。但是，對於建立現(xiàn)代網(wǎng)絡應用程序的團隊，Tailwind提供了一種更快，更一致的造型UI的方法，而沒有CSS蔓延。

基本上，它將設(shè)計變成了您可以實時組成的基於約束的系統(tǒng)。一旦您習慣了，回頭就會變得慢。

以上是公用事業(yè)領(lǐng)先的CSS和逆風的興起的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！