關(guān)鍵要點(diǎn)

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

CSS架構(gòu)的要素

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

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

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

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

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

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

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

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

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

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

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

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

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

關(guān)注點(diǎn)分離

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

SOLID原則

Robert C. Martin定義了五個(gè)SOLID原則。其中一些原則同樣適用於CSS和其它編程語(yǔ)言。

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

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

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

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

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

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

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

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

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

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

讓我們使用繼承在Sass中定義這四個(gè)類。我們從.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)清晰，我們?cè)谛薷尼岬念愔袥]有重複自己。但是，創(chuàng)建五個(gè)修飾符的層次結(jié)構(gòu)將產(chǎn)生31個(gè)類定義，其中大多數(shù)定義的內(nèi)容只不過是@extend指令的集合。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

關(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ā)人員可以避免諸如特異性衝突、命名衝突和代碼重複等問題。它還促進(jìn)了代碼重用，減少了構(gòu)建網(wǎng)頁(yè)所需的時(shí)間和精力。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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