核心要點(diǎn)

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

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

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

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

Bootstrap和Foundation的局限性

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

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

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

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

UI工具包與框架

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

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

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

所以問(wèn)題是：哪些框架會(huì)避開(kāi)你的路，讓你編寫(xiě)你的代碼，而不是為你編寫(xiě)代碼？

1. Pattern Lab

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

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

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

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

2. SUIT CSS

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

   組件是此框架的核心。它旨在開(kāi)發(fā)前端系統(tǒng)，其中組件是可組合和可配置的。它提供構(gòu)建良好封裝的組件的指南，并且可以通過(guò)界面進(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ù)處理器。試一試，或者坐下來(lái)閱讀它所基于的一些原則，即使你決定不使用它，這些原則也能給你帶來(lái)很好的見(jiàn)解。

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)用程序。”

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

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

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

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

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

4. Pure CSS

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

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

結(jié)論

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

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

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

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

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

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

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

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

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

一些流行的組件驅(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)豐富的開(kāi)發(fā)人員的理想選擇。

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

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

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

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

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

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

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

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

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

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

如何確保組件的可訪問(wèn)性？

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

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