核心要點(diǎn)

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

“2015年，每個(gè)人都會(huì)放棄框架。”

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

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

Bootstrap和Foundation的局限性

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

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

“你現(xiàn)在是在框架的阻礙下工作，而不是因?yàn)榭蚣芏ぷ??！?– Harry Roberts

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

UI工具包與框架

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

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

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

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

1. Pattern Lab

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

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

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

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

2. SUIT CSS

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

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

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

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

3. inuitcss

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

   “inuitcss提供了一個(gè)堅(jiān)實(shí)的基礎(chǔ)架構(gòu)，你可以在其上構(gòu)建任何大小或風(fēng)格的網(wǎng)站或應(yīng)用程序?！?/p>

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

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

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

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

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

4. Pure CSS

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

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

結(jié)論

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

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

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

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

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

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

傳統(tǒng)的開發(fā)方法通常採(cǎi)用自上而下的方法，其中整體設(shè)計(jì)被分解成更小的部分。相比之下，組件驅(qū)動(dòng)型開發(fā)採(cǎi)用自下而上的方法，其中各個(gè)組件獨(dú)立開發(fā)，然後組合成完整的設(shè)計(jì)。這種方法允許更大的靈活性和可擴(kuò)展性，因?yàn)榭梢蕴砑?、刪除或修改組件，而不會(huì)影響整個(gè)系統(tǒng)。

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

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

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

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

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

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

使用組件驅(qū)動(dòng)型CSS框架有什麼缺點(diǎn)嗎？

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

組件驅(qū)動(dòng)型開發(fā)如何改進(jìn)團(tuán)隊(duì)協(xié)作？

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

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

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

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

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

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

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

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