亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

目錄
Project Wallace 是什麼?
命令行界面
Constyble 代碼檢查器
分析器
報告器
分析CSS 複雜度
CSS 選擇器的循環(huán)複雜度
每條規(guī)則集的聲明數(shù)(內(nèi)聚性)
源代碼行數(shù)
每條規(guī)則的平均選擇器數(shù)
使用Project Wallace 的收穫
首頁 web前端 css教學(xué) 尋找可以監(jiān)視CSS質(zhì)量和復(fù)雜性的堆棧

尋找可以監(jiān)視CSS質(zhì)量和復(fù)雜性的堆棧

Apr 18, 2025 am 11:22 AM

In Search of a Stack That Monitors the Quality and Complexity of CSS

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

我們一直在尋找改進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è)置不應(yīng)超過的閾值。例如,單個CSS 規(guī)則不應(yīng)包含超過10 個選擇器,或者平均選擇器複雜度不應(yīng)高於3。

分析器

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

報告器

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

分析CSS 複雜度

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

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

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

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

 <code>.my-selector {} /* 1 個標(biāo)識符*/ .my #super [complex^="selector"] > with ~ many :identifiers {} /* 6 個標(biāo)識符*/</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 的某些部分,從而使其更複雜。

所有這些指標(biāo)都可以使用Constyble 進行代碼檢查,Constyble 是Project Wallace 在其工具集中使用的CSS 複雜度代碼檢查器。在為指標(biāo)定義基線後,只需安裝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 或您使用的任何其他預(yù)處理器的所有預(yù)處理工作之後才執(zhí)行其操作。這樣,我們可以對選擇器的總數(shù)或平均選擇器複雜度進行智能檢查——就像任何代碼檢查器一樣,您可以將其作為構(gòu)建步驟的一部分,如果出現(xiàn)任何問題,您的構(gòu)建將失敗。

使用Project Wallace 的收穫

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

  • 我已經(jīng)停止計算衝刺中需要修復(fù)網(wǎng)站上顏色不一致的用戶故事數(shù)量。已經(jīng)有幾年的項目,以及人員進出公司:這是一個讓網(wǎng)站上每個品牌顏色都出錯的秘訣。幸運的是,我們實施了Constyble 和Project Wallace 以獲得利益相關(guān)者的認可,因為我們能夠證明客戶的品牌在新項目中非常準(zhǔ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 瀏覽器中應(yīng)用。我給他們發(fā)了一封電子郵件,他們驗證了這個問題並立即通過將CSS 分成兩個文件來修復(fù)它。
  • GitLab 目前使用超過70 種獨特的字體大小。我很確定他們的排版系統(tǒng)很複雜,但這似乎有點過於雄心勃勃。也許是因為一些第三方CSS,但這很難判斷。
  • 在繼承其他開發(fā)人員的項目時,我會查看CSS 分析結(jié)果,以便了解項目的難點。他們是否大量使用了!important?平均規(guī)則集大小是否易於理解,或者他們是否在每個規(guī)則集中添加了20 多個聲明?平均選擇器長度是多少,它們是否難以覆蓋?不必訴諸.complex-selector-override\[class\][class][class]...[class] 將是很好的。
  • 檢查縮小是否有效的巧妙技巧是讓Constyble 檢查代碼行數(shù)指標(biāo)是否不大於1。 CSS 縮小意味著所有CSS 都放在一行上,因此代碼行數(shù)應(yīng)等於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 預(yù)處理器中的嵌套很酷,但可能會導(dǎo)致錯誤的事情,例如@media (max-width: 670px) 和(max-width: 670px),正如我在Syntax.fm 中發(fā)現(xiàn)的那樣。

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

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

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

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

本網(wǎng)站聲明
本文內(nèi)容由網(wǎng)友自願投稿,版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容,請聯(lián)絡(luò)admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅(qū)動的應(yīng)用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6

Dreamweaver CS6

視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Laravel 教程
1597
29
PHP教程
1488
72
CSS教程,用於創(chuàng)建加載旋轉(zhuǎn)器和動畫 CSS教程,用於創(chuàng)建加載旋轉(zhuǎn)器和動畫 Jul 07, 2025 am 12:07 AM

創(chuàng)建CSS加載旋轉(zhuǎn)器的方法有三種:1.使用邊框的基本旋轉(zhuǎn)器,通過HTML和CSS實現(xiàn)簡單動畫;2.使用多個點的自定義旋轉(zhuǎn)器,通過不同延遲時間實現(xiàn)跳動效果;3.在按鈕中添加旋轉(zhuǎn)器,通過JavaScript切換類來顯示加載狀態(tài)。每種方法都強調(diào)了設(shè)計細節(jié)如顏色、大小、可訪問性和性能優(yōu)化的重要性,以提升用戶體驗。

解決CSS瀏覽器兼容性問題和前綴 解決CSS瀏覽器兼容性問題和前綴 Jul 07, 2025 am 01:44 AM

處理CSS瀏覽器兼容性和前綴問題需理解瀏覽器支持差異並合理使用廠商前綴。 1.了解常見問題如Flexbox、Grid支持不一,position:sticky失效,動畫表現(xiàn)不同;2.查閱CanIuse確認特性支持情況;3.正確使用-webkit-、-moz-、-ms-、-o-等廠商前綴;4.推薦使用Autoprefixer自動添加前綴;5.安裝PostCSS並配置browserslist指定目標(biāo)瀏覽器;6.構(gòu)建時自動處理兼容性;7.老項目可用Modernizr檢測特性;8.不必追求所有瀏覽器一致,確

顯示:內(nèi)聯(lián),顯示:塊和顯示:內(nèi)聯(lián)塊之間有什麼區(qū)別? 顯示:內(nèi)聯(lián),顯示:塊和顯示:內(nèi)聯(lián)塊之間有什麼區(qū)別? Jul 11, 2025 am 03:25 AM

Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizo????ntalpadding/margins—idealforinlinetextstyling

造型與CSS不同訪問的鏈接 造型與CSS不同訪問的鏈接 Jul 11, 2025 am 03:26 AM

設(shè)置訪問過鏈接的樣式能提升用戶體驗,尤其在內(nèi)容密集型網(wǎng)站中幫助用戶更好導(dǎo)航。 1.使用CSS的:visited偽類可定義已訪問鏈接樣式,如顏色變化;2.注意瀏覽器出於隱私限制僅允許修改部分屬性;3.顏色選擇應(yīng)與整體風(fēng)格協(xié)調(diào),避免突兀;4.移動端可能不顯示該效果,建議結(jié)合其他視覺提示如icon輔助標(biāo)識。

使用CSS剪輯路徑創(chuàng)建自定義形狀 使用CSS剪輯路徑創(chuàng)建自定義形狀 Jul 09, 2025 am 01:29 AM

使用CSS的clip-path屬性可以裁剪元素為自定義形狀,如三角形、圓形缺口、多邊形等,無需依賴圖片或SVG。其優(yōu)勢包括:1.支持circle、ellipse、polygon等多種基本形狀;2.可響應(yīng)式調(diào)整,適配移動端;3.易於動畫化,可結(jié)合hover或JavaScript實現(xiàn)動態(tài)效果;4.不影響佈局流,僅裁剪顯示區(qū)域。常見用法如圓形裁剪clip-path:circle(50pxatcenter)和三角形裁剪clip-path:polygon(50%0%,1000%,00%)。注意

CSS繪畫API是什麼? CSS繪畫API是什麼? Jul 04, 2025 am 02:16 AM

thecsspaintingapienablesdemimageGenerationinCsssingJavascript.1.developersCreateApaintWorkletClassWithaPaint()method.2.theyregisteritviaregisterpaint()。 3.thecustompAntFunctionSthenusitySthenusedisthenusedisthenusedIncerspropertieslikeBacknockforg-image-image.thisallows.thisallowsforderforderynamecvis

如何使用CSS創(chuàng)建響應(yīng)式圖像? 如何使用CSS創(chuàng)建響應(yīng)式圖像? Jul 15, 2025 am 01:10 AM

要使用CSS創(chuàng)建響應(yīng)式圖片,主要可通過以下方法實現(xiàn):1.使用max-width:100%和height:auto讓圖片在保持比例的同時自適應(yīng)容器寬度;2.結(jié)合HTML的srcset和sizes屬性智能加載適配不同屏幕的圖片源;3.利用object-fit和object-position控製圖片裁剪與焦點展示。這些方法共同確保圖片在不同設(shè)備上清晰、美觀地呈現(xiàn)。

什麼是常見的CSS瀏覽器不一致? 什麼是常見的CSS瀏覽器不一致? Jul 26, 2025 am 07:04 AM

不同瀏覽器對CSS解析存在差異,導(dǎo)致顯示效果不一致,主要包括默認樣式差異、盒模型計算方式、Flexbox和Grid佈局支持程度及某些CSS屬性行為不一致。 1.默認樣式處理不一致,解決方法是使用CSSReset或Normalize.css統(tǒng)一初始樣式;2.舊版IE的盒模型計算方式不同,建議統(tǒng)一使用box-sizing:border-box;3.Flexbox和Grid在邊緣情況或舊版本中表現(xiàn)有差異,應(yīng)多測試並使用Autoprefixer;4.某些CSS屬性行為不一致,需查閱CanIuse並提供降級

See all articles