為什麼bootstrap不再那麼受歡迎了?

banq發表於2024-06-13

近年來,人們對 bootstrap 等元件庫的興趣似乎大幅下降,而 Tailwind 則更受青睞。

  • Tailwind :對元件進行精細控制,而不是使用預用的東西,
  • bootstrap :學習曲線要​​低得多

Bootstrap 解決的最大問題之一是佈局。

  • 現在我們有了網格grid和彈性框flexbox,
  • 人們不再需要Bootstrap之類的框架來簡化佈局。

轉向基於元件的框架,以及 css、html 和 js 的改進速度加快,意味著 Bootstrap 等框架比 vanilla 框架的優勢更少。

  • Bootstrap 仍是原型和內部工具的重要資源

Bootstrap中:

  • 你不需要編譯任何東西,也不需要構建工具。因為它的元件已經設定好了。
  • 當然,如果你想定製,可以找到其他選項,但真正的原因是它非常容易上手。

Bootstrap 不再是唯一的。Ant design、foundation、bulma、眾多材料實現之一、語義 Ui 等等。它們都提供相同型別的開箱即用設計系統體驗。並不是說哪個更好。但是 bootstrap 在這個領域有競爭對手。它不再壟斷了。 

 bootstrap 太大了:

  • 我們大多數人不需要他們的整個 css 檔案
  • 需要使用 Sass 匯入所需的部分來組合,而不是匯入整個CSS檔案。
  • 除了 sass ,要麼使用帶有 CSS 模組的 webpack,要麼使用帶有 PurgeCSS 的 tailwind PostCSS。

bootstrap 解決的最大問題是團隊合作。

Web 開發包含兩個截然不同的領域,它們對工具的要求截然不同:
1、製作一般公眾訪問的網站,通常用於銷售或宣傳產品或服務。這些網站需要非常注重設計方面的細節和靈活性,並且通常力求看起來獨特或原創,並且對複雜的互動元素的要求可能相當低 - 幾個不同的按鈕、一些影像滑塊、一個下拉選單和一個文字框。

bootstrap 曾經為人們提供了一個可靠的樣板“重置”css,以便人們開始自定義這些內容。隨著大量重置功能被吸收到核心規範中,對 bootstrap 這樣臃腫的東西的需求減少了,因此出現了像 tailwind 這樣的工具,使設計師能夠做他們的事情。這些網站往往只有幾頁,因此使用一個偽庫是可行的,它提供了一定的一致性,但允許靈活性。

2、Web 開發的另一面是“管理皮膚”或“公司儀表板”。這些是基於 Web 的應用程式,通常位於登入螢幕後面,並且通常位於公司防火牆後面。它們需要複雜的表單控制元件、易於維護的設計系統,以便非設計人員應用於未知數量可重複元素的複雜佈局,並且通常有數百個不同的“頁面”,每個頁面都需要一致的外觀和感覺。這是 bootstrap 仍然有一席之地的地方。

bootstrap與tailwind比較
雖然 bootstrap 和 tailwind 之間確實存在一些交叉,但我認為它們有著根本的不同:

  • Tailwind 是 nocss,
  • 而 Bootstrap 是 css++

Bootstraps 的真正優勢在於跨瀏覽器一致性和一組不錯的可重用元件,但現在不再需要了,使用 Tailwind,您可以非常輕鬆地重新建立引導元件,而無需解決不再需要的跨瀏覽器不一致性問題。

但是你錯過了 Tailwind 的真正優勢:DOM 和樣式之間沒有脫節。

  • 當你有大型專案時,css 最終會變得一團糟,它只會變成追加,然後就會變得一團糟,
  • 而 tailwind 樣式直接應用於 html,因此即使是大型開發團隊也可以非常輕鬆地保持樣式的一致性和緊湊性。

加上這些樣式化的元件,tailwind 將會變得更加強大。
  • Bootstrap 是一個完整的設計系統和元件生態系統。
  • Tailwind 是用於 css 的 typescript。

Bootstrap也可以做成tailwind那樣元件:
看看 Bootstrap 的文件,你就會發現它的每一點都可以透過 SASS 進行自定義。很多人都沒有意識到,當你摒棄預設樣式時,Bootstrap 是多麼強大。此外,既然 Bootstrap 已經解決了一些令人驚歎的問題,比如始終確保foreground 在background 上可見,這樣如果您將background 背景顏色從淺色改為深色,前景foreground 文字就會切換為相反的顏色,那麼為什麼還要重新發明輪子呢?

我是開發人員,不是設計師,所以設計師會設計出他們想要的使用者介面。然後我使用 SASS,匯入 Bootstrap 工具和我想要的 Bootstrap 的相關部分,然後按照設計師的要求進行定製,我可以告訴你,它看起來一點也不像 Bootstrap,但仍然可以在一個地方輕鬆定義一致的樣式......

現在,當我想給某個東西設計樣式時,我只需給它一個類(而不是像 Tailwind 中的 23 個類......),它看起來就像他們想要的那樣。另外,更棒的是,當設計者改變主意時,我們只需在一個檔案中更改幾行,就能讓所有地方都發生變化,而無需更改每個元件檔案或在無數個地方新增大量內聯類。

不要這麼快就放棄它,而是要學習如何充分發揮它的威力!

相關文章