學習資源

我們為什麼需要 Tailwind?它解決了什麼問題?

通常我們在撰寫 HTML 及 CSS 時有兩種不同的方式進行開發:

  1. HTML 為主體,CSS 依賴它
  2. CSS 為主體,HTML 依賴它

這兩種不同的開發方式有什麼區別呢?以下將根據此兩種狀況分別敘述,最後告訴你我們為什麼需要 Tailwind!


一、HTML 為主體,CSS 依賴它

上圖的 HTML 檔案透過履歷化的方式,去定義每個 Class 的名稱,可以看見:上半部為 Article,下半部為 Header。

對於 CSS 來說,根據 HTML 定義上的每個 Class 名稱,去寫什麼樣的 CSS,這樣的好處是:在寫 HTML 的時候可以很明白每個區塊的作用,且排版不會去變動,一但定義好規則,CSS 檔案照著跑每個 CLASS 的樣式即可。


壞處則是,在寫 Class 檔案的時候即使有幾乎一模一樣的樣式,卻不能重複使用,要遵循語意化規則,在寫 CSS 的時候一樣的東西必須分別寫在不同的 Class 裡頭。

然而,因為不需要動到 HTML,在改變網站時,可以只去更動 CSS 檔案就可以快速切換。
這樣的網站比較適合有主題性,版面沒有太大變動的網站,排版一樣、樣式多樣,例如:購物商城、拍賣平台⋯⋯等。


二、CSS 為主體,HTML 依賴它

與前一種方式不同,不在以語意化方式定義 Class 名稱,然而 CSS 檔案卻是重複使用各種需要的項目,會在CSS定義。


在這種情況裡,先寫好常常需要共用的 CSS 樣式,在撰寫 HTML 的時候,再根據CSS 拼湊出想要的樣子,在這種情況下CSS 檔案的重用性非常高。如上圖所示,只需要寫四種不一樣的 CSS,卻可以利用 HTML 寫出各種不同的樣子。

這種方式的好處是 CSS 因為只提供樣式,檔案容量大幅精簡;缺點則是需要不斷更動 HTML 檔案。

這種方式適合希望 CSS 打包之後的檔案較小、或者需要最大程度共用各種樣式的開發情形。


兩種方式該怎麼選

個人開發應該選擇怎麼樣的方式,可以依照個人使用習慣去做選擇;然而若是團隊一起開發,則不只是技術層面,也需要考慮團隊各種效益:現實問題、執行成本,以及專案本身的類型⋯⋯等。


為什麼我們需要 Tailwind?

最後來談談,為什麼我們需要 Taiwind 呢?
因為 Tailwind 是根據上述第二種 「CSS 為主體,HTML 依賴 CSS」 的寫法,所開發出的一套框架,Tailwind 已經幫我們寫好各種常見的 CSS utilities,可以幫助我們節省寫 CSS、建立 utilities 的時間,節省開發成本,只需要專注在開發內容上。

掌握 Tailwind 就是現在

你決定好要用 Bootstrap 5 還是 Tailwind CSS 作為 CSS 的框架了嗎?小孩子才做選擇!小編兩個都要學!
現任 Tiktok 前端工程師帶你掌握 2021 前端工程師必學的 CSS 最新框架技術,用正確的姿勢提早完成專案

▍你的痛我們都懂!
近來我們觀察到許多前端工程師不熟悉 Bootstrap 5,導致想調整組件樣式,但不知道該從何切入,又或是想使用近期崛起的 Tailwind CSS,卻不知道如何導入專案

因此,我們準備了「Bootstrap 5」+「Tailwind CSS」系列課程,帶你告別跟一大堆 CSS 奮鬥的苦日子!

▍疑難雜症一次解決

  • 從零開始教核心概念,例如:組件、layout、自訂義等
  • 了解兩種框架適合的使用情境 & 區別
  • Bootstrap 4、5 的比較
  • 網頁排版規劃撇步
  • 實作出業界常見的排版「電商網站、仿 FB」UI

一起去看看 布魯斯框架雙刀流


Hi 找我嗎?追蹤訂閱HiSKIO

  • HiSKIO 嗨程式技能: 科技資訊文章、實用工具分享、新課程優惠領取
  • Codefree:喝一杯咖啡,輕鬆學程式!
  • HiSKIO LINE:叮咚!掌握最新資訊與優惠,現在就到 LINE 領200抵用券!
  • HiSKIO YouTube:免費實用課程、工程師經驗分享
  • 程式丼起來:不想一個人孤單寫 code ? 立即加入話題圈吧 !
Facebook Comments