清理CSS代碼庫-css教學-PHP中文網

首頁

web前端

css教學

清理CSS代碼庫

Christopher Nolan

Feb 22, 2025 am 08:32 AM

清理CSS代碼庫

>您剛剛進入了一個現有項目以替換離職的開發人員。或者，也許您剛剛從幾年前開放了您的舊項目。查看代碼時，您會面臨恐懼和恐懼。您只能做一件事：清理這個混亂！這聽起來對您熟悉嗎？當然，我們都在某個時候或另一個時刻遇到了這一點。

您知道清理CSS代碼庫將是一項巨大的任務。有很多事情要做，但是時間卻很少 - 尤其是當客戶/老闆/同事倡導好善良的“不要修復沒有破壞的東西”的格言時。您真的不知道從哪裡開始！

>好吧，您很幸運，因為我已經完成了CSS清理工作的份額，我在這裡給您一些提示以開始。這全都是要抓住低懸掛的水果。

鑰匙要點

覆蓋CSS代碼庫是清理它的第一步，因為它確定了潛在的錯誤和不良實踐。諸如SCSS-lint之類的工具可用於檢查SASS文件夾是否錯誤。

修改代碼庫的結構至關重要。只要遵守哪種方法，選擇哪種方法都沒關係。這可能涉及重組代碼以符合所選方法，或者識別可重複使用的界面塊並將其樣式提取到自己的部分中。

刪除多餘的代碼是良好CSS的關鍵。未使用的聲明可能會堆積技術債務，因此，重要的是要定期檢查每個CSS聲明是否有影響，如果沒有影響，請將其刪除。

>定期從事工作和邏輯上的小委員會變化，如果出現問題，則更容易回到歷史上。當重構CSS代碼庫時，這一點尤其重要，因為有些事情可能會沿途破裂。

皮棉

在本節中，我將假設您的代碼庫使用SASS。不僅是因為這是當今合理的假設，而且還因為我注意到SASS的使用量較差通常是對凌亂的代碼庫的部分原因。儘管如此，即使您不使用預處理器，本文也可能與您有關，所以請忍受我。

>當我需要接管代碼庫時，我想做的第一件事就是棉布。覆蓋是運行尋找潛在錯誤和不良實踐的程序的過程。我相信使代碼清潔是使代碼良好的第一步。這是一個關於“絨毛”一詞的詞源的有見地的堆棧溢出線

SASS具有一個基於紅寶石的linter，稱為scss-lint。您可以自己配置它，或從Sass-Guidelines中獲取推薦的配置文件，以立即開始。還有一個node.js版本稱為sass-lint，儘管它們不是100％可互用的，因此您的里程可能會有所不同。

>嘗試在您的SASS文件夾上運行SCSS-lint以檢查錯誤。很可能會被錯誤牆淹沒。通常，這是您要放棄的時間。但是忍受我！在這一點上，您可以嘗試使您不在乎的規則（例如顏色格式）使您的絨布文件變得不太嚴格，也可以將其前面處理並從中地獄來解決野獸！

固定覆蓋錯誤

是時候修復需要修復的內容了。有兩種方法。第一個是一個一個一個一個，一個一個似乎是錯誤和/或奇怪的內容，例如命名差異不好的慣例，過於深度的nest-nest選擇器，格式較差的代碼等。第二個（和我最喜歡的）是啟動進行一些搜索和替換。我不認識你，但我喜歡正則表達式，所以當我必須這樣做時，總是很有趣。

> 例如，假設您要在所有浮點數的前面（即0到1之間的數字值）（即SCSS-LINT的LeadingZero規則）中添加缺失的前導零。您可以搜索s。（d）（所有數字之後的所有數字和一個點），然後用0。 $ 1（空間，零，點和找到的數字）。或者，如果您想尊重SCSS-lint的BorderZero規則，則可以替換邊框：無邊框：IDE中的0。簡單如派！

>我最近在Github上啟動了SCSS-LINT-REGEX存儲庫，以在一個地方收集這些正則表達式。如果您正在努力覆蓋大型項目，請務必看看。還要通過搜索和更換，因為它有時會產生意外的副作用。每次替換後，請確保執行git差異以檢查已更新的內容，以確保您不引入錯誤。

>完成橫向編輯後，您將不會逃脫手動文件爬行以清潔需要清潔的所有內容（凹痕不良，缺失或額外的空線，缺失空間等）。這需要大量時間，但是對於下一步會有很大幫助，因此從此開始很重要。

修改結構

當我進入現有項目時，我經常會感到不安的是缺乏適當的項目體系結構。一開始可能有一個，但是事情通常會失控，而這種方法論的簡短想法沿線迷失了方向。儘管如此，這還是非常重要的。

>只要您對它感到滿意並堅持下去，您選擇哪種方法並不重要。可能是SMACS，可能是7-1，它可以ITCSS - 選擇您的選擇！然後嘗試重組事物，使代碼符合所選方法。我主要使用SASS指南中引入的7-1模式，因此，如果您決定這樣做，我會為您提供一些提示。

>從>供應商開始，因為它是沒有問題的文件夾。將任何未包裝的第三方庫移動到那裡（即，任何未通過NPM或Bundler視為常規依賴性的庫）。 > 然後，轉到

摘要

文件夾。確保項目定義的所有變量，混合素，功能和占位符。只要您最終在代碼庫的所有文件中都沒有變量和混音，就可以隨時按照您想要的方式組織它。當時我還傾向於尋找不必要的變量（和混合物）。確實，我經常發現無數使用一次或兩次使用的變量（換句話說，不值得）。 > 完成後，就是您的電話。您可以嘗試確保

> base

文件夾中的所有內容實際上都是基本的東西，而不是相關的組件，或者您可以查看佈局文件夾，以檢查是否所有有關總體佈局居住在那裡，並正確記錄了。 > 最後，您將不得不解決>組件

，這可能是一項巨大的任務。我在這裡的建議是嘗試使組件盡可能小且可重複使用。只要您使它們使它們上下文不可知，並且易於閱讀，理解和更新。例如，擁有如此小的組件是一件不好的事情：

> 思考模塊化。小的。簡單的。獨立。

刪除多餘的

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

我相信好和壞CSS之間的最大區別是使其正常工作所需的代碼量。 CSS作為一種語言很容易掌握。任何人都可以在每個佈局中進行一些反複試驗和錯誤。但是，能夠用最少的CSS來構建一些使它起作用的CSS並保持這種方式是一個真正的挑戰。

已經超過3年了，但是尼古拉斯·加拉格爾（Nicolas Gallagher）的推文仍然是我最喜歡的有關CSS的報價：> 在“壞” CSS中，很難寫“好” CSS。在“好” CSS中，很容易固定“不好”的CSS並啟動代碼腐爛。

- 尼古拉斯（@necolas）2012年9月26日過時是CSS的真實瘟疫。當使用CSS構建某些東西時，我們經常來回嘗試一些事情 - 以至於我們通常會得到一些不需要的聲明。例如，溢出：隱藏的不必要的，或者是沒有區別的字體大小。通過離開它們，我們堆積了技術債務。那是Bad™。

寫作css時，我想在進行CSS工作之前想做的事情正在打開開發人員工具，並切換我寫的每份CSS聲明，以查看它們是否都有影響。如果他們不這樣做，我問自己為什麼他們首先在那裡。如果事實證明它們是不必要的，我將其刪除。通過做一些簡單的事情，我確保只有有用的無用的無垃圾代碼才能將其推向存儲庫。

清理 css代碼庫沒有什麼不同。找到您想清理的組件，打開DevTools，然後嘗試查找無用的聲明。有時，為了刪除某些CS，我們需要移動樹上的一些樣式，以使級聯受益。考慮以下示例減少到最低限度：

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

>一種優化的干淨方法是將顏色移動：紅色聲明向父母移動，讓級聯的其餘部分。當然，現實生活中的例子通常更為複雜，但這表明我們有時會忘記在 *c *ss。 中利用> c

css很聰明，你應該太

我經常遇到的一件事是缺乏對繼承，初始和當前顏色值的理解。假設您希望鏈接與核心文本具有相同的顏色（因為下劃線足夠）。以下是

不良的方法：>

<span><span>.parent</span> {
</span>  <span>/* ...stuff here... */
</span><span>}
</span>
<span><span>.child-A</span> {
</span>  <span>color: red;
</span><span>}
</span>
<span><span>.child-B</span> {
</span>  <span>color: red;
</span><span>}</span>

它是一個差的解決方案的原因應該很明顯：如果您更改身體副本的顏色，鏈接顏色將被脫離同步。如果您正在考慮使用變量，則使事情變得不必要地複雜。最重要的是，如果一個鏈接最終以灰色段落（例如在塊引文內部），則它將與顏色不匹配！

> CSS具有一種內置的處理方式，並具有繼承的值。

那樣簡單。因此，鏈接將始終繼承其父母的顏色。這也可能正在繼承其祖先的顏色，依此類推。

<span>a {
</span>  <span>color: black; /* Nope */
</span><span>}</span>

按照相同的行，將財產重新定位到其默認值時，對硬碼所述值是一個糟糕的想法。對於這種情況，CSS具有最初的魔術價值。雖然通常不會有所作為，但在某些情況下確實很重要，例如基於方向的屬性，例如文本對準。重置文本單位時，剩餘的設置可能會損壞RTL語言；最初是要走的路（甚至更好，開始，但是此值在IE9中沒有支持）。

>最後但並非最不重要的一點是，CSS開發人員的數量不知道CurrentColor太高了。如果您不知道，不要感到難過，但是請問自己：當不指定邊框顏色時，它如何自動匹配元素的顏色？好吧，這是因為邊界色的默認值是CurrentColor（檢查規格）。一個顯而易見的名字，你會承認。

>我的意思是，如果您希望與元素字體共享顏色，請使用CurrentColor而不是硬編碼值或SASS變量。

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

所有這些都是基本的CSS功能。它們就是使CSS的本質。儘管如此，它們的使用量很少。因此，如果您必須改進組件的代碼，則這些是您要進行的改進的種類。

讓您的git好

>重構CSS代碼庫是很多工作的

。您可能會更新數十個文件。您也很可能會沿途破壞事情。老實說，我們都會犯錯誤，在處理如此巨大的變化時，如果您成功地清理所有東西而沒有小小的失誤，那將是非常令人印象深刻的。 > 因此，我強烈建議您對自己的版本控制變得非常刻板（我認為可以在此處假設GIT公平）。這意味著要做一件事，而只有一件事才能回到包含一個錯誤的步驟，而不會像地獄一樣掙扎著衝突。

清理CSS代碼庫我知道很多人的git是艱難而晦澀的，並且挖掘如何使其變得簡單的方式超出了本文的範圍。不過，您必須相信我：如果您不想生氣，請使您的GIT歷史成為一首詩。

>將其包裹起來

>讓我們總結一下，為懶惰的讀者提供一點tl;

>清潔CSS/SASS項目很難，因為很難評估更新或刪除CSS的影響。這主要是因為CSS幾乎無法測試。因此，您必須小心。

>從覆蓋您的代碼開始，使其變得漂亮。首先，以使您的生活以後更輕鬆。這也是獲得有價值的代碼庫狀態而不會冒險的好方法（修復語法污垢不太可能造成任何麻煩）。

接下來，請確保您的項目包含結構方法。只要做得好，哪一個都沒關係。如果您的項目並沒有真正精心策劃為組件，那麼這將是一個開始這一道路的好機會。找到可重複使用的界面塊，並將其樣式提取到自己的部分中。可以隨意記錄一下它們，這樣就變得更容易了，並且您會感覺到進步。

>一旦您清理了項目並將所有內容都放在正確的位置，就該改善CSS本身了。檢查是否可以先刪除內容；我們經常編寫太多的代碼。然後嘗試優化代碼，以使其重複性降低。當心不要過度工程！您應該消除複雜性，而不是添加。還可以隨意評論您所做的所有事情，這可能乍一看似乎並不明顯。 >

>最後，定期和邏輯地提交您的工作。捆綁您在小提交中的變化，每件事都要做一件事情，因此如果出現問題，就可以簡單地回到歷史上。

最後但並非最不重要的一點是，不要忘了慶祝完成。祝你好運！

經常詢問的問題（FAQ）有關清理CSS代碼庫

清理CSS代碼庫的重要性是什麼？

>清理CSS代碼庫至關重要。首先，它提高了代碼的可讀性，使其他開發人員更容易理解和工作。其次，隨著不必要或冗餘代碼的刪除，它可以提高網站或應用程序的性能。這可以導致更快的負載時間和更好的用戶體驗。最後，乾淨的代碼庫更易於維護和調試，從長遠來看節省了時間和資源。

如何識別冗餘或不必要的CSS代碼？

>幫助確定未使用或冗餘的CSS代碼。其中包括瀏覽器開發人員工具，CSS覆蓋工具和各種在線服務。此外，手動代碼審查也可能是有益的，特別是對於確定代碼中的冗餘或不一致。 CSS代碼庫包括刪除未使用或冗餘代碼，以邏輯和一致的方式組織代碼，使用註釋來解釋代碼的複雜部分，並粘附達成一致的命名慣例。此外，使用CSS預處理器可以幫助管理和維護大型代碼庫。