組件驅動的CSS框架

核心要點

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

“2015年，每個人都會放棄框架。”

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

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

Bootstrap和Foundation的局限性

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

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

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

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

UI工具包與框架

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

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

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

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

1. Pattern Lab

   Pattern Lab由Brad Frost和Dave Olsen創建，基於原子設計理念。這是一種靈活的方法，從基礎開始設計網站，然後逐步向上構建。與其說它是一個框架，不如說它是一種構建網站和應用程序的方法。

   Pattern Lab鼓勵專注於組件的設計網站。從基本的標記開始，逐步構建更複雜的組件。此框架對樣式沒有任何假設。它不會妨礙你，並允許你處理你的CSS。

   它還提供CSS創作結構指南以及一套有助於整個創作過程的工具。例如，一個隨機調整屏幕大小以查看你的設計在不同屏幕尺寸上的工作方式的工具，以及一個用於快速協作的註釋工具。

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

2. SUIT CSS

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

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

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

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

3. inuitcss

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

   “inuitcss提供了一個堅實的基礎架構，你可以在其上構建任何大小或風格的網站或應用程序。”

   再次強調，inuitcss最重要的方面是它可以快速避開你的路。它旨在與樣式無關，並構成一個很好的基礎，你可以在其上構建你的CSS。

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

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

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

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

4. Pure CSS

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

   “Pure具有最少的樣式，並鼓勵你在其之上編寫應用程序樣式。它旨在避開你的路，並使覆蓋樣式變得容易。”

結論

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

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

關於組件驅動型CSS框架的常見問題解答（FAQ）

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

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

組件驅動型開發與傳統的開發方法有何不同？

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

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

組件驅動型CSS框架主要設計用於基於JavaScript的技術，例如React、Vue和Angular。但是，組件驅動型開發的原則可以應用於任何支持模塊化編程的編程語言。需要注意的是，具體的實現細節可能因使用的語言和框架而異。

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

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

如何開始組件驅動型開發？

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

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

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

組件驅動型開發如何改進團隊協作？

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

組件驅動型CSS框架可以用於移動應用程序開發嗎？

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

組件驅動型開發如何支持測試和調試？

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

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

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

以上是組件驅動的CSS框架的詳細內容。更多資訊請關注PHP中文網其他相關文章！