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

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

Project Wallace 是什么？

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

以下是這些工具的簡要概述。

命令行界面

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

Constyble 代碼檢查器

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

分析器

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

報告器

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

分析 CSS 復雜度

關(guān)于 CSS 復雜度的文章不多，但 Harry Roberts (csswizardry) 寫的那一篇讓我印象深刻。其要點是每個 CSS 選擇器基本上是一堆 if 語句，這讓我想起了上計算機科學課程時，我必須手動計算方法的循環(huán)復雜度。Harry 的文章對我來說非常有意義，因為它可以編寫一個模塊來計算 CSS 選擇器的復雜度——當然，不要與特異性混淆，因為在復雜度方面，這是一個完全不同的問題。

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

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

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

<code>.my-selector {} /* 1 個標識符 */
.my #super [complex^="selector"] > with ~ many :identifiers {} /* 6 個標識符 */</code>

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

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

<code>/* 1 條規(guī)則，1 個聲明 => 內(nèi)聚性 = 1 */
.text-center {
  text-align: center;
}

/* 1 條規(guī)則，8 個聲明 => 內(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ù)

代碼越多，復雜度越高。每一行編寫的代碼都需要維護，因此包含在報告中。

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

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

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

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

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

使用 Project Wallace 的收獲

在使用 Project Wallace 一段時間后，我發(fā)現(xiàn)它非常適合跟蹤復雜度。雖然它主要用于此目的，但它也是一種查找 CSS 中代碼檢查器可能找不到的細微錯誤的好方法，因為它們正在檢查預處理的代碼。以下是我發(fā)現(xiàn)的一些有趣的事情：

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

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

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

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

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