CSS架構和可維護CSS的三個支柱

關鍵要點

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

CSS架構的要素

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

您現在只能通過做出架構上可靠的決策來避免給未來的自己帶來困境。這就是為什麼學習在實踐中構建可維護的CSS架構的來龍去脈非常重要的原因。

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

可維護CSS的三大支柱

觀看《成為辦公室的CSS英雄：CSS架構》課程，學習創建結構化、可維護和可擴展的CSS！ 視頻播放圖標 觀看本課程 觀看本課程

在設計軟件系統的CSS架構時，值得考慮三個概念。這些概念非常基礎，我們可以將它們視為支撐建築物結構的支柱。我們需要這三個支柱才能使我們的CSS經受時間的考驗，並且不會崩潰成難以維護的混亂。

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

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

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

將軟件工程原則應用於CSS

有很多不同的原則用於設計持久的軟件。

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

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

關注點分離

關注點分離是一種軟件設計原則，負責在軟件解決方案中定義清晰分離的職責。對CSS最明顯的應用是用於樣式的類和用於功能的類之間的分離。樣式類不應出現在JavaScript代碼中，而與功能相關的類不應出現在樣式表中。

SOLID原則

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

在我的CSS架構課程中，您會發現許多不同的應用程序詳細介紹瞭如何在CSS代碼的上下文中使用這些SOLID原則，包括單一職責原則和開閉原則。

在樣式表層次結構中，我們應用單一職責原則。例如，ITCSS架構中的一層包含重置或規範化程序。標籤樣式建立在規範化程序之上，組件樣式建立在標籤樣式之上。每一層都有一個單一、明確定義的職責。

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

使代碼DRY可以提高可維護性，因為每當您更改DRY代碼時，您只需在一個地方執行該更改，並且可以高度確定您不必搜索其餘的CSS代碼庫以查找相同代碼的其他出現情況。

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

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

嘗試在CSS中進行組合

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

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

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

讓我們使用繼承在Sass中定義這四個類。我們從.rectangle的基類開始，然後創建修飾符類，這些類使用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>

結構清晰，我們在修改後的類中沒有重複自己。但是，創建五個修飾符的層次結構將產生31個類定義，其中大多數定義的內容只不過是@extend指令的集合。

組合為我們提供了更強大的結構。為了創建一個完全靈活的結構，我們只需要通用的矩形類和兩個mixin：

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

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

假設我們有一個特殊的特性框。

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

如果特性框是圓角的，但不是綠色的，我們只需要擴展矩形類，並包含使矩形變為圓角的mixin：

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

結構保持靈活，無需為每種組合定義類。

邁向更好的CSS架構

我們可以得出結論，軟件工程原則適用於CSS以及任何其他編程語言。這些原則介於兩個層次之間：CSS構建塊的微觀層次和這些構建塊的宏觀層次結構。因此，在創建可維護的CSS時，學習如何在實踐中應用這些原則是有益的。

為了幫助解釋和演示這些原則的實際應用，我創建了一個關於堅如磐石的CSS架構的課程；CSS架構原則

在本課程中，我們將探討CSS架構的三個支柱，並特別強調軟件工程原則。您不僅將在理論上學習這些原則，而且還將有機會在許多實際示例中使用它們。

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

我已經專門開闢了一個部分，通過使用ITCSS架構和Sass創建一個小型組件庫來將CSS架構的三個支柱付諸實踐。如果您有興趣了解更多關於CSS架構的信息，請註冊參加課程，並在課程中與我們見面！

關於CSS架構和可維護CSS的常見問題

CSS架構在Web開發中的重要性是什麼？

CSS架構在Web開發中起著至關重要的作用。它提供了一種結構化的CSS代碼編寫方式，使代碼更易於理解、維護和擴展。使用定義良好的CSS架構，開發人員可以避免諸如特異性衝突、命名衝突和代碼重複等問題。它還促進了代碼重用，減少了構建網頁所需的時間和精力。

OOCSS方法如何促進可維護的CSS？

面向對象CSS(OOCSS)是一種促進代碼重用以及更快、更高效的樣式表的方法。它鼓勵開發人員將CSS視為一個對象系統，每個對像都有其自身的屬性和行為。通過將結構與外觀以及容器與內容分離，OOCSS使創建可擴展和可維護的CSS變得更容易。

BEM方法在CSS架構中的作用是什麼？

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

SMACSS方法如何幫助創建可維護的CSS？

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

ITCSS方法在CSS架構中的意義是什麼？

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

CSS變量如何促進可維護的CSS？

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

CSS預處理器在可維護的CSS中的作用是什麼？

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

基於組件的架構如何促進可維護的CSS？

基於組件的架構促進了可重用、獨立組件的創建，每個組件都有其自己的HTML、CSS和JavaScript。這種方法使代碼更具模塊化，更易於維護，因為對一個組件的更改不會影響其他組件。

樣式指南在CSS架構中的重要性是什麼？

樣式指南提供了一套CSS編寫標準。它確保代碼庫的一致性，使代碼更易於閱讀和維護。樣式指南可以包括命名約定、格式規則和最佳實踐。

CSS lint工具如何促進可維護的CSS？

像Stylelint這樣的CSS lint工具可以幫助執行編碼標準並在問題成為問題之前捕獲潛在問題。它們可以自動修復某些問題並為其他問題提供建議，從而提高代碼質量和可維護性。

以上是CSS架構和可維護CSS的三個支柱的詳細內容。更多資訊請關注PHP中文網其他相關文章！