關(guān)鍵要點

• 可維護(hù)的CSS架構(gòu)對于避免難以維護(hù)的樣式表至關(guān)重要，因為難以維護(hù)的樣式表會產(chǎn)生意想不到的副作用，并需要對應(yīng)用程序的CSS進(jìn)行徹底重寫。
• 三個基本概念或支柱構(gòu)成了CSS架構(gòu)設(shè)計的基石：構(gòu)建塊（例如Sass、高效的CSS選擇器、BEM語法等）、將這些構(gòu)建塊編排成可靠、可維護(hù)的層次化CSS，以及軟件工程原則的應(yīng)用。
• 軟件工程原則（例如關(guān)注點分離和SOLID原則）可以應(yīng)用于CSS，以確保代碼以可維護(hù)的方式建模現(xiàn)實。這包括應(yīng)用DRY（不要重復(fù)自己）和WET（我們喜歡打字）等原則來提高代碼的可維護(hù)性。
• 嘗試在CSS中進(jìn)行組合，例如使用mixin和繼承，可以提供更強(qiáng)大的結(jié)構(gòu)并減少為每種組合定義類的需要，從而實現(xiàn)更易于維護(hù)的CSS。

CSS架構(gòu)的要素

如果您曾經(jīng)繼承了糟糕的CSS并有義務(wù)維護(hù)它，您可能會對那些將來會維護(hù)您的代碼的其他人產(chǎn)生一些同情。在極端情況下，開發(fā)人員別無選擇，只能完全重寫應(yīng)用程序的CSS。當(dāng)每個補(bǔ)丁都引入多個意外副作用時，就會出現(xiàn)這些極端情況。一旦到了這一點，您的樣式表就變得難以維護(hù)了。

您現(xiàn)在只能通過做出架構(gòu)上可靠的決策來避免給未來的自己帶來困境。這就是為什么學(xué)習(xí)在實踐中構(gòu)建可維護(hù)的CSS架構(gòu)的來龍去脈非常重要的原因。

如果您不想成為傳遞不良代碼的人，您可能會想知道如何從頭開始創(chuàng)建可維護(hù)的CSS。你會從哪里開始呢？讓我們看看在構(gòu)建完美的項目時值得考慮的CSS架構(gòu)要素。

可維護(hù)CSS的三大支柱

觀看《成為辦公室的CSS英雄：CSS架構(gòu)》課程，學(xué)習(xí)創(chuàng)建結(jié)構(gòu)化、可維護(hù)和可擴(kuò)展的CSS！ 視頻播放圖標(biāo) 觀看本課程 觀看本課程

在設(shè)計軟件系統(tǒng)的CSS架構(gòu)時，值得考慮三個概念。這些概念非?；A(chǔ)，我們可以將它們視為支撐建筑物結(jié)構(gòu)的支柱。我們需要這三個支柱才能使我們的CSS經(jīng)受時間的考驗，并且不會崩潰成難以維護(hù)的混亂。

第一個支柱定義了CSS架構(gòu)的構(gòu)建塊。這些構(gòu)建塊包含各種各樣的解決方案和工具，例如使用Sass、編寫高效的CSS選擇器、塊-元素-修飾符(BEM)語法、使用類而不是ID屬性以及在適當(dāng)?shù)那闆r下使用相對單位。

雖然這種觀點可以使您的CSS代碼質(zhì)量得到顯著提高，但我們需要更高層次的組織才能使我們的工作系統(tǒng)化。因此，我們需要第二個支柱，它側(cè)重于構(gòu)建塊的編排，以建立可靠、可維護(hù)的層次化CSS。將此層視為CSS架構(gòu)的骨架。如果您對兩種現(xiàn)成的CSS架構(gòu)感興趣，可以進(jìn)一步研究ITCSS和SMACSS。

不幸的是，構(gòu)建塊和框架或CSS架構(gòu)的有條理的使用都不能讓您編寫出堅如磐石、易于維護(hù)的CSS。通過應(yīng)用軟件工程原則，我們的代碼變得可靠。這是編寫可維護(hù)CSS的第三個支柱。

將軟件工程原則應(yīng)用于CSS

有很多不同的原則用于設(shè)計持久的軟件。

這些原則通過確保您的CSS代碼以可維護(hù)的方式對現(xiàn)實進(jìn)行建模，從而為使用您選擇的CSS工具和解決方案提供了一個目的。如果沒有這些原則，使用任何CSS架構(gòu)大多只是一個儀式。如果不遵守軟件工程原則來編寫CSS，一旦代碼的大小變得難以維護(hù)，它往往會不堪重負(fù)而崩潰。

如果您是一位在某些編程語言方面經(jīng)驗豐富的軟件工程師，您可能會發(fā)現(xiàn)將這些原則應(yīng)用于像CSS這樣的聲明性語言非常令人驚訝。然而，在實踐中，CSS已經(jīng)成為一門成熟的語言，與其他語言類似，結(jié)構(gòu)是對所需代碼的深思熟慮。讓我們檢查一些主要原則的實際應(yīng)用。

關(guān)注點分離

關(guān)注點分離是一種軟件設(shè)計原則，負(fù)責(zé)在軟件解決方案中定義清晰分離的職責(zé)。對CSS最明顯的應(yīng)用是用于樣式的類和用于功能的類之間的分離。樣式類不應(yīng)出現(xiàn)在JavaScript代碼中，而與功能相關(guān)的類不應(yīng)出現(xiàn)在樣式表中。

SOLID原則

Robert C. Martin定義了五個SOLID原則。其中一些原則同樣適用于CSS和其它編程語言。

在我的CSS架構(gòu)課程中，您會發(fā)現(xiàn)許多不同的應(yīng)用程序詳細(xì)介紹了如何在CSS代碼的上下文中使用這些SOLID原則，包括單一職責(zé)原則和開閉原則。

在樣式表層次結(jié)構(gòu)中，我們應(yīng)用單一職責(zé)原則。例如，ITCSS架構(gòu)中的一層包含重置或規(guī)范化程序。標(biāo)簽樣式建立在規(guī)范化程序之上，組件樣式建立在標(biāo)簽樣式之上。每一層都有一個單一、明確定義的職責(zé)。

將軟件工程原則應(yīng)用于CSS代碼的可能是最著名的例子是DRY和WET CSS之間的對比。 DRY代表“不要重復(fù)自己”，而WET代表“我們喜歡打字”。

使代碼DRY可以提高可維護(hù)性，因為每當(dāng)您更改DRY代碼時，您只需在一個地方執(zhí)行該更改，并且可以高度確定您不必搜索其余的CSS代碼庫以查找相同代碼的其他出現(xiàn)情況。

當(dāng)您的CSS是WET時，您可以通過識別代碼的公共部分并將此公共功能抽象到基類（或如果使用預(yù)處理器則為mixin）中來將其DRY化。

在代碼中使用基類和子類稱為繼承，它在Sass中使用@extend執(zhí)行。當(dāng)我們使用mixin或使用Sass術(shù)語的@mixin指令時，我們使用組合。繼承、組合和Sass常量的使用是執(zhí)行抽象的強(qiáng)大工具。

嘗試在CSS中進(jìn)行組合

讓我們來看一個實際的例子。假設(shè)我們的代碼庫中有四種類型的矩形。一個通用的矩形、一個圓角矩形、一個綠色矩形和一個圓角綠色矩形。

我們可以使用BEM命名約定如下標(biāo)記每個矩形組件：

<code><div class="rectangle"></div>
<div class="rectangle--rounded"></div>
<div class="rectangle--green"></div>
<div class="rectangle--rounded--green"></div></code>

讓我們使用繼承在Sass中定義這四個類。我們從.rectangle的基類開始，然后創(chuàng)建修飾符類，這些類使用Sass @extend繼承基類的樣式：

<code>.rectangle {    
  width: 200px;  
  height: 100px;  
  margin: 20px;  
  padding: 20px;  
  display: inline-block;  
  border: 1px solid black;
}
.rectangle--rounded {  
  @extend .rectangle;
  border-radius: 20px;
}

.rectangle--green {  
@extend .rectangle; 
  background-color: green;
}

.rectangle--rounded--green {  
  @extend .rectangle--rounded;  
  @extend .rectangle--green;
}</code>

結(jié)構(gòu)清晰，我們在修改后的類中沒有重復(fù)自己。但是，創(chuàng)建五個修飾符的層次結(jié)構(gòu)將產(chǎn)生31個類定義，其中大多數(shù)定義的內(nèi)容只不過是@extend指令的集合。

組合為我們提供了更強(qiáng)大的結(jié)構(gòu)。為了創(chuàng)建一個完全靈活的結(jié)構(gòu)，我們只需要通用的矩形類和兩個mixin：

<code>@mixin rounded {  
  border-radius: 20px;  
}

@mixin green { 
  background-color: green;
}</code>

假設(shè)我們有一個特殊的特性框。

<code><div class="feature-box"></div></code>

如果特性框是圓角的，但不是綠色的，我們只需要擴(kuò)展矩形類，并包含使矩形變?yōu)閳A角的mixin：

<code>.my-rectangle {  
  @extend .rectangle;  
  @include rounded;  
}</code>

結(jié)構(gòu)保持靈活，無需為每種組合定義類。

邁向更好的CSS架構(gòu)

我們可以得出結(jié)論，軟件工程原則適用于CSS以及任何其他編程語言。這些原則介于兩個層次之間：CSS構(gòu)建塊的微觀層次和這些構(gòu)建塊的宏觀層次結(jié)構(gòu)。因此，在創(chuàng)建可維護(hù)的CSS時，學(xué)習(xí)如何在實踐中應(yīng)用這些原則是有益的。

為了幫助解釋和演示這些原則的實際應(yīng)用，我創(chuàng)建了一個關(guān)于堅如磐石的CSS架構(gòu)的課程；CSS架構(gòu)原則

在本課程中，我們將探討CSS架構(gòu)的三個支柱，并特別強(qiáng)調(diào)軟件工程原則。您不僅將在理論上學(xué)習(xí)這些原則，而且還將有機(jī)會在許多實際示例中使用它們。

例如，我們將收集大量博客文章，并找出提供的CSS代碼為何難以維護(hù)。我們將逐步完成重構(gòu)CSS的過程，應(yīng)用本文中簡要介紹并在課程視頻中深入介紹的原則。

我已經(jīng)專門開辟了一個部分，通過使用ITCSS架構(gòu)和Sass創(chuàng)建一個小型組件庫來將CSS架構(gòu)的三個支柱付諸實踐。如果您有興趣了解更多關(guān)于CSS架構(gòu)的信息，請注冊參加課程，并在課程中與我們見面！

關(guān)于CSS架構(gòu)和可維護(hù)CSS的常見問題

CSS架構(gòu)在Web開發(fā)中的重要性是什么？

CSS架構(gòu)在Web開發(fā)中起著至關(guān)重要的作用。它提供了一種結(jié)構(gòu)化的CSS代碼編寫方式，使代碼更易于理解、維護(hù)和擴(kuò)展。使用定義良好的CSS架構(gòu)，開發(fā)人員可以避免諸如特異性沖突、命名沖突和代碼重復(fù)等問題。它還促進(jìn)了代碼重用，減少了構(gòu)建網(wǎng)頁所需的時間和精力。

OOCSS方法如何促進(jìn)可維護(hù)的CSS？

面向?qū)ο驝SS(OOCSS)是一種促進(jìn)代碼重用以及更快、更高效的樣式表的方法。它鼓勵開發(fā)人員將CSS視為一個對象系統(tǒng)，每個對象都有其自身的屬性和行為。通過將結(jié)構(gòu)與外觀以及容器與內(nèi)容分離，OOCSS使創(chuàng)建可擴(kuò)展和可維護(hù)的CSS變得更容易。

BEM方法在CSS架構(gòu)中的作用是什么？

塊、元素、修飾符(BEM)是一種用于HTML和CSS中類的命名約定。它提供了一個清晰、嚴(yán)格的結(jié)構(gòu)，使代碼更易于閱讀和理解。BEM方法通過減少命名沖突和特異性沖突的機(jī)會，幫助創(chuàng)建健壯且可擴(kuò)展的CSS架構(gòu)。

SMACSS方法如何幫助創(chuàng)建可維護(hù)的CSS？

用于CSS的可擴(kuò)展和模塊化架構(gòu)(SMACSS)是一種鼓勵模塊化和可擴(kuò)展性的樣式指南。它將CSS規(guī)則分為五種類型：基礎(chǔ)、布局、模塊、狀態(tài)和主題，每種類型都有其特定的用途。這種分類有助于組織CSS代碼，使其更易于維護(hù)和擴(kuò)展。

ITCSS方法在CSS架構(gòu)中的意義是什么？

倒三角CSS(ITCSS)是一種幫助管理大規(guī)模CSS的方法。它將CSS組織成幾層，每一層都有其特定的作用。這種分層結(jié)構(gòu)確保首先加載最通用的樣式，然后加載更具體的樣式，從而減少特異性問題的機(jī)會。

CSS變量如何促進(jìn)可維護(hù)的CSS？

CSS變量（也稱為CSS自定義屬性）允許開發(fā)人員定義可重用的值。它們可以通過減少代碼重復(fù)并使進(jìn)行全局更改變得更容易來顯著提高可維護(hù)性。例如，將顏色定義為變量允許在整個樣式表中重用它，并在一個地方更改它。

CSS預(yù)處理器在可維護(hù)的CSS中的作用是什么？

像Sass和Less這樣的CSS預(yù)處理器提供了諸如變量、嵌套、mixin和函數(shù)等功能，這些功能在常規(guī)CSS中是不可用的。這些功能可以極大地增強(qiáng)代碼的可維護(hù)性和可讀性，使編寫復(fù)雜的CSS變得更容易。

基于組件的架構(gòu)如何促進(jìn)可維護(hù)的CSS？

基于組件的架構(gòu)促進(jìn)了可重用、獨立組件的創(chuàng)建，每個組件都有其自己的HTML、CSS和JavaScript。這種方法使代碼更具模塊化，更易于維護(hù)，因為對一個組件的更改不會影響其他組件。

樣式指南在CSS架構(gòu)中的重要性是什么？

樣式指南提供了一套CSS編寫標(biāo)準(zhǔn)。它確保代碼庫的一致性，使代碼更易于閱讀和維護(hù)。樣式指南可以包括命名約定、格式規(guī)則和最佳實踐。

CSS lint工具如何促進(jìn)可維護(hù)的CSS？

像Stylelint這樣的CSS lint工具可以幫助執(zhí)行編碼標(biāo)準(zhǔn)并在問題成為問題之前捕獲潛在問題。它們可以自動修復(fù)某些問題并為其他問題提供建議，從而提高代碼質(zhì)量和可維護(hù)性。

以上是CSS架構(gòu)和可維護(hù)CSS的三個支柱的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！