雖然我每天都在深入研究技術,但我沒有太多時間來分享我公司為客戶實施的複雜集成和自動化。 同樣,我沒有太多的探索時間。 我寫的大部分技術都是尋求 Martech Zone 涵蓋它們,但每隔一段時間 - 特別是通過 Twitter - 我看到一些關於我需要分享的新技術的嗡嗡聲。
如果您從事網頁設計、移動應用程序開發,甚至只是建立一個內容管理系統,您可能已經與跨多個樣式表的競爭樣式的挫折作鬥爭。 即使在每個瀏覽器中內置了驚人的開發工具,跟踪和清理 CSS 也需要太多的時間和精力。
CSS框架
近年來,設計師在發布已準備就緒並可供使用的款式系列方面做得非常出色。 這些 CSS 樣式表更廣為人知的是 CSS 框架,它試圖容納所有不同的樣式和響應能力,以便開發人員可以只引用一個框架,而不是從頭開始構建 CSS 文件。 一些流行的框架是:
- 引導 – 一個發展了十多年的框架,首先由 Twitter 推出。 它提供了無數的功能。 它確實有缺點,需要 SASS,難以過度使用,依賴於 JQquery,並且加載起來非常繁重。
- 布爾瑪 – 一個對開發人員友好且不依賴於 JavaScript 的干淨框架。
- 粉底 – 一個更通用和可用的 CSS 框架,它擁有大量易於定制的組件。 此外,還有 電子郵件基礎 及 運動UI 用於動畫。
- UI套件 – HTML、JavaScript 和 CSS 的組合,可讓您快速輕鬆地開發前端。
Tailwind CSS 框架
雖然其他框架在適應流行的用戶界面元素方面做得很好,但 Tailwind 使用了一種稱為 原子 CSS. 簡而言之,Tailwind 使用自然語言巧妙地組織了類名,以實現他們所說的。 因此,雖然 Tailwind 沒有組件庫,但僅通過引用 CSS 類名即可輕鬆構建強大的響應式界面的能力是優雅、快速且無與倫比的。
這裡有一些非常棒的例子:
CSS網格
CSS 漸變
用於暗模式支持的 CSS
Tailwind 也有很棒的 擴展可用 用於 VS Code,以便您可以輕鬆地從 Microsoft 的代碼編輯器中識別和插入類。
更巧妙的是,Tailwind 在為生產構建時會自動刪除所有未使用的 CSS,這意味著您的最終 CSS 包可能是最小的。 事實上,大多數 Tailwind 項目向客戶端交付的 CSS 都不到 10kB。