許多開發(fā)者撰寫關(guān)於如何維護(hù)CSS 代碼庫(kù)的文章，但很少有人寫到他們?nèi)绾?em>衡量代碼庫(kù)的質(zhì)量。當(dāng)然，我們有優(yōu)秀的代碼檢查工具，如StyleLint 和CSSLint，但它們只能在微觀層面防止錯(cuò)誤。使用錯(cuò)誤的顏色表示法、在已經(jīng)使用Autoprefixer 的情況下添加供應(yīng)商前綴、以不一致的方式編寫選擇器……諸如此類。

我們一直在尋找改進(jìn)CSS 編寫方式的方法：OOCSS、BEM、SMACSS、ITCSS、實(shí)用優(yōu)先等等。但其他開發(fā)社區(qū)似乎已經(jīng)從單純的代碼檢查工具發(fā)展到像SonarQube 和PHP Mess Detector 這樣的工具，而CSS 社區(qū)仍然缺乏比淺層lint 規(guī)則更深入的檢查工具。為此，我創(chuàng)建了Project Wallace，一套用於檢查和強(qiáng)制執(zhí)行CSS 質(zhì)量的工具。

Project Wallace 是什麼？

Project Wallace 的核心是一組工具，包括命令行界面、代碼檢查器、分析器和報(bào)告器。

以下是這些工具的簡(jiǎn)要概述。

命令行界面

這允許您在命令行上運(yùn)行CSS 分析，並獲取您提供給它的任何CSS 的統(tǒng)計(jì)信息。

Constyble 代碼檢查器

這是一個(gè)專門為CSS 設(shè)計(jì)的代碼檢查器?；禬allace 生成的分析結(jié)果，您可以設(shè)置不應(yīng)超過(guò)的閾值。例如，單個(gè)CSS 規(guī)則不應(yīng)包含超過(guò)10 個(gè)選擇器，或者平均選擇器複雜度不應(yīng)高於3。

分析器

Extract-CSS 正如其名：從網(wǎng)頁(yè)中提取所有CSS，以便我們可以將其發(fā)送到projectwallace.com 進(jìn)行分析。

報(bào)告器

Extract CSS 的所有分析結(jié)果都發(fā)送到projectwallace.com，儀表板包含所有數(shù)據(jù)的報(bào)告。它類似於CSS Stats，但它跟蹤更多指標(biāo)，並隨時(shí)間推移存儲(chǔ)結(jié)果並在儀表板中顯示它們。它還顯示了兩個(gè)時(shí)間點(diǎn)之間的差異，以及許多其他功能。

分析CSS 複雜度

關(guān)於CSS 複雜度的文章不多，但Harry Roberts (csswizardry) 寫的那一篇讓我印象深刻。其要點(diǎn)是每個(gè)CSS 選擇器基本上是一堆if 語(yǔ)句，這讓我想起了上計(jì)算機(jī)科學(xué)課程時(shí)，我必須手動(dòng)計(jì)算方法的循環(huán)複雜度。 Harry 的文章對(duì)我來(lái)說(shuō)非常有意義，因?yàn)樗梢跃帉懸粋€(gè)模塊來(lái)計(jì)算CSS 選擇器的複雜度——當(dāng)然，不要與特異性混淆，因?yàn)樵趶?fù)雜度方面，這是一個(gè)完全不同的問(wèn)題。

基本上，CSS 中的複雜性可以以多種形式出現(xiàn)，但以下是我在審核代碼庫(kù)時(shí)最關(guān)注的幾種：

CSS 選擇器的循環(huán)複雜度

選擇器的每個(gè)部分都意味著瀏覽器需要執(zhí)行另一個(gè)if 語(yǔ)句。較長(zhǎng)的選擇器比較短的選擇器更複雜。它們更難調(diào)試，瀏覽器解析速度更慢，也更難覆蓋。

 <code>.my-selector {} /* 1 個(gè)標(biāo)識(shí)符*/ .my #super [complex^="selector"] > with ~ many :identifiers {} /* 6 個(gè)標(biāo)識(shí)符*/</code>

每條規(guī)則集的聲明數(shù)（內(nèi)聚性）

包含許多聲明的規(guī)則集比包含少量聲明的規(guī)則集更複雜。 Tailwind 和Tachyons 等函數(shù)式CSS 框架的流行，可能歸因於CSS 本身的相對(duì)“簡(jiǎn)單性”。

 <code>/* 1 條規(guī)則，1 個(gè)聲明=> 內(nèi)聚性= 1 */ .text-center { text-align: center; } /* 1 條規(guī)則，8 個(gè)聲明=> 內(nèi)聚性= (1 / 8) = 0.125 */ .button { background-color: blue; color: white; padding: 1em; border: 1px solid; display: inline-block; font-size: normal; font-weight: bold; text-decoration: none; }</code>

源代碼行數(shù)

代碼越多，複雜度越高。每一行編寫的代碼都需要維護(hù)，因此包含在報(bào)告中。

每條規(guī)則的平均選擇器數(shù)

一條規(guī)則通常包含1 個(gè)選擇器，但有時(shí)會(huì)更多。這使得很難刪除CSS 的某些部分，從而使其更複雜。

所有這些指標(biāo)都可以使用Constyble 進(jìn)行代碼檢查，Constyble 是Project Wallace 在其工具集中使用的CSS 複雜度代碼檢查器。在為指標(biāo)定義基線後，只需安裝Constyble 並設(shè)置配置文件即可。以下是我直接從Constyble 自述文件中提取的配置文件示例：

 <code>{ // 不要超過(guò)4095 個(gè)選擇器，否則IE9 將刪除任何后續(xù)規(guī)則"selectors.total": 4095, // 我們不需要ID 選擇器"selectors.id.total": 0, // 如果出現(xiàn)除這些顏色之外的任何其他顏色，則報(bào)告錯(cuò)誤！ "values.colors.unique": ["#fff", "#000"] }</code>

最棒的是，Constyble 在您的最終CSS 上運(yùn)行，因此它只在您來(lái)自Sass、Less、PostCSS 或您使用的任何其他預(yù)處理器的所有預(yù)處理工作之後才執(zhí)行其操作。這樣，我們可以對(duì)選擇器的總數(shù)或平均選擇器複雜度進(jìn)行智能檢查——就像任何代碼檢查器一樣，您可以將其作為構(gòu)建步驟的一部分，如果出現(xiàn)任何問(wèn)題，您的構(gòu)建將失敗。

使用Project Wallace 的收穫

在使用Project Wallace 一段時(shí)間後，我發(fā)現(xiàn)它非常適合跟蹤複雜度。雖然它主要用於此目的，但它也是一種查找CSS 中代碼檢查器可能找不到的細(xì)微錯(cuò)誤的好方法，因?yàn)樗鼈冋跈z查預(yù)處理的代碼。以下是我發(fā)現(xiàn)的一些有趣的事情：

• 我已經(jīng)停止計(jì)算衝刺中需要修復(fù)網(wǎng)站上顏色不一致的用戶故事數(shù)量。已經(jīng)有幾年的項(xiàng)目，以及人員進(jìn)出公司：這是一個(gè)讓網(wǎng)站上每個(gè)品牌顏色都出錯(cuò)的秘訣。幸運(yùn)的是，我們實(shí)施了Constyble 和Project Wallace 以獲得利益相關(guān)者的認(rèn)可，因?yàn)槲覀兡軌蜃C明客戶的品牌在新項(xiàng)目中非常準(zhǔn)確。 Constyble 阻止我們添加不在樣式指南中的顏色。
• 我已經(jīng)在我的前雇主工作的項(xiàng)目中安裝了Project Wallace webhooks。任何時(shí)候向項(xiàng)目添加新的CSS，它都會(huì)將CSS 發(fā)送到projectwallace.com，並且會(huì)在項(xiàng)目的儀表板中立即顯示。這使得很容易發(fā)現(xiàn)何時(shí)向CSS 添加了特定的選擇器或媒體查詢。
• 今年早些時(shí)候的CSS-Tricks 重設(shè)計(jì)意味著複雜性和文件大小的大幅下降。重設(shè)計(jì)非常棒，可以進(jìn)行分析。它使您有機(jī)會(huì)仔細(xì)查看幕後情況，並弄清楚作者如何更改了他們的CSS。了解哪些部分不適用於站點(diǎn)以及哪些新部分適用，可能會(huì)讓您了解CSS 的發(fā)展速度。
• 一家位於荷蘭的大型國(guó)際公司曾經(jīng)在一個(gè)CSS 文件中擁有超過(guò)4095 個(gè)選擇器。我知道他們正在積極發(fā)展新興市場(chǎng)，並且他們必須支持Internet Explorer 8 。 IE9 在4095 個(gè)選擇器後停止讀取所有CSS，因此他們的大部分CSS 並未在舊版IE 瀏覽器中應(yīng)用。我給他們發(fā)了一封電子郵件，他們驗(yàn)證了這個(gè)問(wèn)題並立即通過(guò)將CSS 分成兩個(gè)文件來(lái)修復(fù)它。
• GitLab 目前使用超過(guò)70 種獨(dú)特的字體大小。我很確定他們的排版系統(tǒng)很複雜，但這似乎有點(diǎn)過(guò)於雄心勃勃。也許是因?yàn)橐恍┑谌紺SS，但這很難判斷。
• 在繼承其他開發(fā)人員的項(xiàng)目時(shí)，我會(huì)查看CSS 分析結(jié)果，以便了解項(xiàng)目的難點(diǎn)。他們是否大量使用了!important？平均規(guī)則集大小是否易於理解，或者他們是否在每個(gè)規(guī)則集中添加了20 多個(gè)聲明？平均選擇器長(zhǎng)度是多少，它們是否難以覆蓋？不必訴諸.complex-selector-override\[class\][class][class]...[class] 將是很好的。
• 檢查縮小是否有效的巧妙技巧是讓Constyble 檢查代碼行數(shù)指標(biāo)是否不大於1。 CSS 縮小意味著所有CSS 都放在一行上，因此代碼行數(shù)應(yīng)等於1！
• 我的另一個(gè)項(xiàng)目中一直發(fā)生的事情是縮小失敗了。我不知道，直到Project Wallace 的差異顯示給我許多顏色突然像#aaaaaa 而不是#aaa 一樣被編寫出來(lái)。這本身並不是一件壞事，但它同時(shí)發(fā)生在如此多的顏色上，以至於肯定有什麼地方出了問(wèn)題?？焖僬{(diào)查顯示我在縮小中犯了一個(gè)錯(cuò)誤。
• StackOverflow 有四種獨(dú)特的編寫白色顏色方式。這不一定是壞事，但這可能是CSS 縮小程序損壞或設(shè)計(jì)系統(tǒng)不一致的跡象。
• Facebook.com 在他們的CSS 中有超過(guò)650 種獨(dú)特的顏色。損壞的設(shè)計(jì)系統(tǒng)也開始聽起來(lái)像是一種可能性。
• 我前雇主的一個(gè)項(xiàng)目顯示input[type=checkbox]:checked .label input[type=radio] label:focus:after 是最複雜的選擇器。仔細(xì)檢查後，我們發(fā)現(xiàn)此選擇器定位嵌套在另一個(gè)輸入中的輸入。這在HTML 中是不可能的，我們認(rèn)為我們一定忘記了CSS 中的逗號(hào)。沒有代碼檢查器警告我們這一點(diǎn)。
• CSS 預(yù)處理器中的嵌套很酷，但可能會(huì)導(dǎo)致錯(cuò)誤的事情，例如@media (max-width: 670px) 和(max-width: 670px)，正如我在Syntax.fm 中發(fā)現(xiàn)的那樣。

對(duì)於Project Wallace 來(lái)說(shuō)，這只是冰山一角。一旦您開始分析您的CSS，還有更多的東西需要學(xué)習(xí)和發(fā)現(xiàn)。不要只查看您自己的統(tǒng)計(jì)數(shù)據(jù)，還要查看其他人正在做什麼。

我已經(jīng)將我的Constyble 配置用作與經(jīng)驗(yàn)較少的開發(fā)人員進(jìn)行對(duì)話的談資，以解釋為什麼他們?cè)趶?fù)雜的CSS 塊上構(gòu)建失敗。與其他開發(fā)人員討論為什麼我們要避免或推廣某些CSS 編寫方式有助於知識(shí)轉(zhuǎn)移。它也幫助我腳踏實(shí)地。不得不向只想幫忙的PHP 開發(fā)人員解釋我已經(jīng)做了多年的事情，讓我重新思考為什麼我要按照自己的方式做事。

我的目標(biāo)不是告訴任何人CSS 中什麼正確或什麼錯(cuò)誤，而是創(chuàng)建工具，以便您可以驗(yàn)證什麼對(duì)您和您的同事有效。 Project Wallace 在這裡幫助我們理解我們編寫的CSS。

以上是尋找可以監(jiān)視CSS質(zhì)量和復(fù)雜性的堆棧的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！