>您剛剛進(jìn)入了一個(gè)現(xiàn)有項(xiàng)目以替換離職的開(kāi)發(fā)人員?；蛘?，也許您剛剛從幾年前開(kāi)放了您的舊項(xiàng)目。查看代碼時(shí)，您會(huì)面臨恐懼和恐懼。您只能做一件事：清理這個(gè)混亂！這聽(tīng)起來(lái)對(duì)您熟悉嗎？當(dāng)然，我們都在某個(gè)時(shí)候或另一個(gè)時(shí)刻遇到了這一點(diǎn)。

您知道清理CSS代碼庫(kù)將是一項(xiàng)巨大的任務(wù)。有很多事情要做，但是時(shí)間卻很少 - 尤其是當(dāng)客戶(hù)/老板/同事倡導(dǎo)好善良的“不要修復(fù)沒(méi)有破壞的東西”的格言時(shí)。您真的不知道從哪里開(kāi)始！

>好吧，您很幸運(yùn)，因?yàn)槲乙呀?jīng)完成了CSS清理工作的份額，我在這里給您一些提示以開(kāi)始。這全都是要抓住低懸掛的水果。

鑰匙要點(diǎn)

• 覆蓋CSS代碼庫(kù)是清理它的第一步，因?yàn)樗_定了潛在的錯(cuò)誤和不良實(shí)踐。諸如SCSS-lint之類(lèi)的工具可用于檢查SASS文件夾是否錯(cuò)誤。
>修復(fù)覆蓋錯(cuò)誤可以通過(guò)一個(gè)一個(gè)一個(gè)一個(gè)一個(gè)，更新似乎錯(cuò)誤的文件或使用搜索和替換功能來(lái)糾正常見(jiàn)問(wèn)題來(lái)完成。>
• 修改代碼庫(kù)的結(jié)構(gòu)至關(guān)重要。只要遵守哪種方法，選擇哪種方法都沒(méi)關(guān)系。這可能涉及重組代碼以符合所選方法，或者識(shí)別可重復(fù)使用的界面塊并將其樣式提取到自己的部分中。
刪除多余的代碼是良好CSS的關(guān)鍵。未使用的聲明可能會(huì)堆積技術(shù)債務(wù)，因此，重要的是要定期檢查每個(gè)CSS聲明是否有影響，如果沒(méi)有影響，請(qǐng)將其刪除。
• >
>定期從事工作和邏輯上的小委員會(huì)變化，如果出現(xiàn)問(wèn)題，則更容易回到歷史上。當(dāng)重構(gòu)CSS代碼庫(kù)時(shí)，這一點(diǎn)尤其重要，因?yàn)橛行┦虑榭赡軙?huì)沿途破裂。
皮棉
• 在本節(jié)中，我將假設(shè)您的代碼庫(kù)使用SASS。不僅是因?yàn)檫@是當(dāng)今合理的假設(shè)，而且還因?yàn)槲易⒁獾絊ASS的使用量較差通常是對(duì)凌亂的代碼庫(kù)的部分原因。盡管如此，即使您不使用預(yù)處理器，本文也可能與您有關(guān)，所以請(qǐng)忍受我。

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

>嘗試在您的SASS文件夾上運(yùn)行SCSS-lint以檢查錯(cuò)誤。很可能會(huì)被錯(cuò)誤墻淹沒(méi)。通常，這是您要放棄的時(shí)間。但是忍受我！在這一點(diǎn)上，您可以嘗試使您不在乎的規(guī)則（例如顏色格式）使您的絨布文件變得不太嚴(yán)格，也可以將其前面處理并從中地獄來(lái)解決野獸！

固定覆蓋錯(cuò)誤

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

>

>

當(dāng)我進(jìn)入現(xiàn)有項(xiàng)目時(shí)，我經(jīng)常會(huì)感到不安的是缺乏適當(dāng)?shù)捻?xiàng)目體系結(jié)構(gòu)。一開(kāi)始可能有一個(gè)，但是事情通常會(huì)失控，而這種方法論的簡(jiǎn)短想法沿線迷失了方向。盡管如此，這還是非常重要的。

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

>從>供應(yīng)商開(kāi)始，因?yàn)樗菦](méi)有問(wèn)題的文件夾。將任何未包裝的第三方庫(kù)移動(dòng)到那里（即，任何未通過(guò)NPM或Bundler視為常規(guī)依賴(lài)性的庫(kù)）。> 然后，轉(zhuǎn)到

文件夾。確保項(xiàng)目定義的所有變量，混合素，功能和占位符。只要您最終在代碼庫(kù)的所有文件中都沒(méi)有變量和混音，就可以隨時(shí)按照您想要的方式組織它。當(dāng)時(shí)我還傾向于尋找不必要的變量（和混合物）。確實(shí)，我經(jīng)常發(fā)現(xiàn)無(wú)數(shù)使用一次或兩次使用的變量（換句話說(shuō)，不值得）。> 完成后，就是您的電話。您可以嘗試確保

文件夾中的所有內(nèi)容實(shí)際上都是基本的東西，而不是相關(guān)的組件，或者您可以查看布局文件夾，以檢查是否所有有關(guān)總體布局居住在那里，并正確記錄了。> 最后，您將不得不解決>組件

> 思考模塊化。小的。簡(jiǎn)單的。獨(dú)立。

刪除多余的

<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>

已經(jīng)超過(guò)3年了，但是尼古拉斯·加拉格爾（Nicolas Gallagher）的推文仍然是我最喜歡的有關(guān)CSS的報(bào)價(jià)：> 在“壞” CSS中，很難寫(xiě)“好” CSS。在“好” CSS中，很容易固定“不好”的CSS并啟動(dòng)代碼腐爛。

<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>

<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>

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

<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代碼庫(kù)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！