核心要點

• Web Components日益流行，對能夠處理這種開發(fā)類型的CSS框架的需求也日益增長。傳統(tǒng)的CSS框架（如Bootstrap或Foundation）由於其廣泛的內(nèi)置樣式和代碼，可能會限制開發(fā)人員使用Web Components。
• 組件驅(qū)動型CSS框架（如Pattern Lab、SUIT CSS、inuitcss和Pure CSS）旨在作為設(shè)計的起點，並提供一個開發(fā)Web Components的框架，而不會強加限製或不必要的樣式。它們允許開發(fā)人員專注於自己的樣式和代碼，從而提高可重用性、一致性和協(xié)作性。
• 雖然組件驅(qū)動型CSS框架提供了許多好處，但它們可能會增加項目的複雜性，並且需要很好地理解框架的語法和約定。它們主要設(shè)計用於基於JavaScript的技術(shù)，但可以應(yīng)用於任何支持模塊化編程的編程語言。

“2015年，每個人都會放棄框架?！?/p>

我不太確定。我只是想吸引你們的眼球。說笑歸說笑，你們有沒有註意到前端領(lǐng)域的一個微妙變化，那就是每個人都在逐漸放棄框架？例如，Sass網(wǎng)格框架Susy放棄了對Compass的依賴，開發(fā)人員也一直被鼓勵去思考是否需要jQuery。

如今，Web Components非常流行。隨著我們進入一個組件成為Web應(yīng)用程序一等公民的世界，我們迫切需要能夠處理這種新型開發(fā)的框架。

Bootstrap和Foundation的局限性

如果您是前端開發(fā)人員，您很可能對Bootstrap或Foundation瞭如指掌。像這樣的流行CSS框架在使用Web Components進行開發(fā)時可能會限制我們。並不是說它們不好。它們只是帶有太多的內(nèi)置樣式。鑑於shadow DOM的功能，這可能不是您想要的。這些框架以試圖滿足所有人的需求而聞名。另一方面，組件驅(qū)動型CSS框架充當設(shè)計的起點，並提供一個開發(fā)Web Components的框架。它們的目標僅此而已。

Bootstrap在某種程度上徹底改變了我們編寫前端代碼的方式。它為我們提供了優(yōu)秀的UI組件以及用於可擴展和可維護樣式表的結(jié)構(gòu)。它非常適合大型團隊使用已接受的CSS格式進行協(xié)作。問題是，它包含大量代碼。如果您不想從頭開始構(gòu)建任何內(nèi)容，它就非常完美。但是，自定義它並不那麼有效。您可以自定義它嗎？當然可以。容易嗎？值得懷疑。

“你現(xiàn)在是在框架的阻礙下工作，而不是因為框架而工作。” – Harry Roberts

Foundation有效地解決了這個問題。它旨在從頭開始進行自定義。事實上，該團隊一心想要使默認主題非?；A(chǔ)，以確保使用它構(gòu)建的所有網(wǎng)站最終看起來都不一樣。但是Foundation的一些組件與標記緊密耦合，這限制了您可以使用的標記，因此不僅僅是一個CSS框架。他們正在積極努力改進這方面。

UI工具包與框架

Harry Roberts在今年早些時候做了一個演講（參見幻燈片），討論了UI工具包和CSS框架之間的細微差別。在這個演講中，他說，CSS框架不會妨礙你。它不包含任何樣式。它對標記、HTML結(jié)構(gòu)或類沒有任何限制。

另一方面，UI工具包是一個完整的產(chǎn)品，它提供了開箱即用的完整包：設(shè)計、結(jié)構(gòu)、標準、模式和JavaScript插件都包含在一個整齊的包裝盒中。這些工具用於快速原型設(shè)計和快速啟動。大多數(shù)情況下，如果您想讓它們看起來與構(gòu)建方式有所不同，您最終會覆蓋規(guī)則並規(guī)避框架的定義。

從這個角度來看，正如Addy Osmani最近討論的那樣，使用Bootstrap構(gòu)建的示例項目中的單個頁面可能有多達91%的未使用CSS。

所以問題是：哪些框架會避開你的路，讓你編寫你的代碼，而不是為你編寫代碼？

1. Pattern Lab

   Pattern Lab由Brad Frost和Dave Olsen創(chuàng)建，基於原子設(shè)計理念。這是一種靈活的方法，從基礎(chǔ)開始設(shè)計網(wǎng)站，然後逐步向上構(gòu)建。與其說它是一個框架，不如說它是一種構(gòu)建網(wǎng)站和應(yīng)用程序的方法。

   Pattern Lab鼓勵專注於組件的設(shè)計網(wǎng)站。從基本的標記開始，逐步構(gòu)建更複雜的組件。此框架對樣式?jīng)]有任何假設(shè)。它不會妨礙你，並允許你處理你的CSS。

   它還提供CSS創(chuàng)作結(jié)構(gòu)指南以及一套有助於整個創(chuàng)作過程的工具。例如，一個隨機調(diào)整屏幕大小以查看你的設(shè)計在不同屏幕尺寸上的工作方式的工具，以及一個用於快速協(xié)作的註釋工具。

   但最好的部分是，它是預(yù)處理器無關(guān)的。與許多其他解決方案不同，它對使用什麼預(yù)處理器沒有發(fā)言權(quán)；使用你喜歡的任何預(yù)處理器，只需遵循原則即可。它還帶有零樣式，並允許你構(gòu)建樣式指南，而不是強加一個樣式指南給你。

2. SUIT CSS

   Nicolas Gallagher的SUIT CSS，根據(jù)定義，是一種基於組件的UI開發(fā)方法。它提供了一套指南，允許實現(xiàn)和組合鬆散耦合的獨立單元。

   組件是此框架的核心。它旨在開發(fā)前端系統(tǒng)，其中組件是可組合和可配置的。它提供構(gòu)建良好封裝的組件的指南，並且可以通過界面進行更改。

   SUIT CSS是一個成熟的框架，建立在堅實的基礎(chǔ)之上。文檔是學習更多關(guān)於它的好地方，同時也學習更多關(guān)於前端原則的知識。

   它還帶有一套可以添加到工作流程中的包。它與npm（節(jié)點包管理器）配合良好，並包括自動前綴功能、封裝測試以及可自定義和可擴展的預(yù)處理器。試一試，或者坐下來閱讀它所基於的一些原則，即使你決定不使用它，這些原則也能給你帶來很好的見解。

3. inuitcss

   inuit CSS不是UI工具包。它不強加任何設(shè)計，也不包含數(shù)千個組件或CSS代碼行。它是一個考慮到可擴展性的框架，作為一個小型包提供，你可以根據(jù)需要進行擴展。

   “inuitcss提供了一個堅實的基礎(chǔ)架構(gòu)，你可以在其上構(gòu)建任何大小或風格的網(wǎng)站或應(yīng)用程序。”

   再次強調(diào)，inuitcss最重要的方面是它可以快速避開你的路。它旨在與樣式無關(guān)，並構(gòu)成一個很好的基礎(chǔ)，你可以在其上構(gòu)建你的CSS。

   例如，inuitcss中的分頁只包含邊距和填充，而不是完全設(shè)計的組件。它允許你定義自己的樣式，而無需自定義框架，或者更糟糕的是覆蓋它。

   inuitcss目前正在進行大修，下一版本的預(yù)Alpha模塊可用。

   我喜歡inuitcss的另一個方面是它允許你方便地命名空間組件。很容易將框架放入現(xiàn)有項目中，並開始重構(gòu)你的現(xiàn)有代碼。

   這對於任何現(xiàn)有的框架來說都是一個巨大的勝利。相比之下，打開Bootstrap或Foundation，最有可能的第一行代碼會影響所有內(nèi)容（我在看你，box-sizing?。＿@些框架無法與現(xiàn)有樣式一起使用，或者，將其中一個框架放入項目中並期望一切保持不變可能是一件痛苦的事情。 inuitcss也這樣做，但它是可選的，並且易於禁用。

4. Pure CSS

   在我看來，Pure CSS介於UI工具包和框架之間。它提供了一組基本樣式，但允許你從那裡接管。根據(jù)設(shè)計，它旨在避開你的路，並允許你創(chuàng)建CSS，而無需覆蓋現(xiàn)有規(guī)則。

   “Pure具有最少的樣式，並鼓勵你在其之上編寫應(yīng)用程序樣式。它旨在避開你的路，並使覆蓋樣式變得容易?！?/p>

結(jié)論

Web Components正在徹底改變前端領(lǐng)域。當使用這些較新的功能時，我們當前最喜歡的工具可能不是最好的。也許是時候超越你最喜歡的框架，嘗試一些新的東西了。我希望這篇文章已經(jīng)給了你足夠的選項來考慮。

需要有足夠的清晰度才能為任何給定的問題選擇正確的工具。明智地選擇。與往常一樣，不要迴避自己動手。

關(guān)於組件驅(qū)動型CSS框架的常見問題解答（FAQ）

使用組件驅(qū)動型CSS框架的主要好處是什麼？

組件驅(qū)動型CSS框架提供了許多好處。首先，它們提高了可重用性。組件可以在項目的不同部分重複使用，從而減少編寫的代碼量，並使代碼庫更易於管理。其次，它們增強了一致性。通過在整個項目中使用相同的組件，用戶界面保持一致，從而提供更好的用戶體驗。第三，它們促進了協(xié)作。不同的團隊成員可以同時處理不同的組件，從而加快開發(fā)過程。最後，它們使維護更容易。由於組件是獨立的，對一個組件的更改不會影響其他組件，從而使錯誤修復(fù)和更新變得不那麼複雜。

組件驅(qū)動型開發(fā)與傳統(tǒng)的開發(fā)方法有何不同？

傳統(tǒng)的開發(fā)方法通常採用自上而下的方法，其中整體設(shè)計被分解成更小的部分。相比之下，組件驅(qū)動型開發(fā)採用自下而上的方法，其中各個組件獨立開發(fā)，然後組合成完整的設(shè)計。這種方法允許更大的靈活性和可擴展性，因為可以添加、刪除或修改組件，而不會影響整個系統(tǒng)。

組件驅(qū)動型CSS框架可以與任何編程語言一起使用嗎？

組件驅(qū)動型CSS框架主要設(shè)計用於基於JavaScript的技術(shù)，例如React、Vue和Angular。但是，組件驅(qū)動型開發(fā)的原則可以應(yīng)用於任何支持模塊化編程的編程語言。需要注意的是，具體的實現(xiàn)細節(jié)可能因使用的語言和框架而異。

一些流行的組件驅(qū)動型CSS框架是什麼？

一些流行的組件驅(qū)動型CSS框架包括Bootstrap、Foundation、Bulma和Semantic UI。這些框架提供了預(yù)先設(shè)計好的組件，可以根據(jù)項目的具體需求進行自定義。它們還提供了大量的文檔和社區(qū)支持，使它們成為初學者和經(jīng)驗豐富的開發(fā)人員的理想選擇。

如何開始組件驅(qū)動型開發(fā)？

要開始組件驅(qū)動型開發(fā)，首先需要了解模塊化編程和基於組件的體系結(jié)構(gòu)的基本原則。接下來，選擇一個適合項目需求的組件驅(qū)動型CSS框架。熟悉框架的文檔，並開始嘗試創(chuàng)建和使用組件。在線教程和課程也可以幫助你學習這些知識。

使用組件驅(qū)動型CSS框架有什麼缺點嗎？

雖然組件驅(qū)動型CSS框架提供了許多好處，但它們也有一些潛在的缺點。例如，它們可能會增加項目的複雜性，特別是對於初學者而言。它們還需要很好地理解框架的語法和約定。此外，過度依賴預(yù)先設(shè)計的組件可能會限制創(chuàng)造力，並導(dǎo)致設(shè)計看起來很普通。

組件驅(qū)動型開發(fā)如何改進團隊協(xié)作？

組件驅(qū)動型開發(fā)通過允許不同的團隊成員同時處理不同的組件來改進團隊協(xié)作。這種並行開發(fā)過程可以顯著加快開發(fā)時間表。此外，由於組件是獨立的，一個開發(fā)人員所做的更改不會影響其他開發(fā)人員的工作，從而降低了衝突和錯誤的風險。

組件驅(qū)動型CSS框架可以用於移動應(yīng)用程序開發(fā)嗎？

是的，組件驅(qū)動型CSS框架可以用於移動應(yīng)用程序開發(fā)。許多框架，例如React Native和Ionic，提供了專門為移動界面設(shè)計的組件。這些組件可以用來創(chuàng)建響應(yīng)式設(shè)計，這些設(shè)計可以在各種屏幕尺寸和設(shè)備上良好運行。

組件驅(qū)動型開發(fā)如何支持測試和調(diào)試？

組件驅(qū)動型開發(fā)通過允許獨立測試和調(diào)試每個組件來支持測試和調(diào)試。這種模塊化方法使隔離和修復(fù)錯誤以及為各個組件編寫單元測試變得更容易。它還促進了回歸測試，因為對一個組件的更改不會影響其他組件。

如何確保組件的可訪問性？

確保組件的可訪問性包括遵循無障礙網(wǎng)頁設(shè)計的最佳實踐。這包括使用語義HTML進行結(jié)構(gòu)化，為圖像提供替代文本，確保足夠的顏色對比度，並使所有功能都可通過鍵盤訪問。許多組件驅(qū)動型CSS框架開箱即用地提供了可訪問性功能，但仍然需要使用各種輔助技術(shù)測試你的組件，以確保它們確實是可訪問的。

以上是組件驅(qū)動的CSS框架的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！