許多開發(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ì)的代碼檢查器?；?Wallace 生成的分析結(jié)果，您可以設(shè)置不應(yīng)超過的閾值。例如，單個(gè) CSS 規(guī)則不應(yīng)包含超過 10 個(gè)選擇器，或者平均選擇器復(fù)雜度不應(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 復(fù)雜度

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

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

CSS 選擇器的循環(huán)復(fù)雜度

選擇器的每個(gè)部分都意味著瀏覽器需要執(zhí)行另一個(gè) if 語(yǔ)句。較長(zhǎng)的選擇器比較短的選擇器更復(fù)雜。它們更難調(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ī)則集更復(fù)雜。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ù)

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

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

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

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

<code>{
  // 不要超過 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ù)或平均選擇器復(fù)雜度進(jìn)行智能檢查——就像任何代碼檢查器一樣，您可以將其作為構(gòu)建步驟的一部分，如果出現(xiàn)任何問題，您的構(gòu)建將失敗。

使用 Project Wallace 的收獲

在使用 Project Wallace 一段時(shí)間后，我發(fā)現(xiàn)它非常適合跟蹤復(fù)雜度。雖然它主要用于此目的，但它也是一種查找 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ì)意味著復(fù)雜性和文件大小的大幅下降。 重設(shè)計(jì)非常棒，可以進(jìn)行分析。它使您有機(jī)會(huì)仔細(xì)查看幕后情況，并弄清楚作者如何更改了他們的 CSS。了解哪些部分不適用于站點(diǎn)以及哪些新部分適用，可能會(huì)讓您了解 CSS 的發(fā)展速度。
• 一家位于荷蘭的大型國(guó)際公司曾經(jīng)在一個(gè) CSS 文件中擁有超過 4095 個(gè)選擇器。 我知道他們正在積極發(fā)展新興市場(chǎng)，并且他們必須支持 Internet Explorer 8 。IE9 在 4095 個(gè)選擇器后停止讀取所有 CSS，因此他們的大部分 CSS 并未在舊版 IE 瀏覽器中應(yīng)用。我給他們發(fā)了一封電子郵件，他們驗(yàn)證了這個(gè)問題并立即通過將 CSS 分成兩個(gè)文件來(lái)修復(fù)它。
• GitLab 目前使用超過 70 種獨(dú)特的字體大小。 我很確定他們的排版系統(tǒng)很復(fù)雜，但這似乎有點(diǎn)過于雄心勃勃。也許是因?yàn)橐恍┑谌?CSS，但這很難判斷。
• 在繼承其他開發(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ā)生在如此多的顏色上，以至于肯定有什么地方出了問題?？焖僬{(diào)查顯示我在縮小中犯了一個(gè)錯(cuò)誤。
• StackOverflow 有四種獨(dú)特的編寫白色顏色方式。 這不一定是壞事，但這可能是 CSS 縮小程序損壞或設(shè)計(jì)系統(tǒng)不一致的跡象。
• Facebook.com 在他們的 CSS 中有超過 650 種獨(dú)特的顏色。 損壞的設(shè)計(jì)系統(tǒng)也開始聽起來(lái)像是一種可能性。
• 我前雇主的一個(gè)項(xiàng)目 顯示 input[type=checkbox]:checked .label input[type=radio] label:focus:after 是最復(fù)雜的選擇器。仔細(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)文章！