12、project wallace

官網(wǎng)地址：https://www.projectwallace.com/

一款在線可視化統(tǒng)計分析項目中CSS代碼的工具，這款在線工具十分強大，方便你管理分析項目中的CSS代碼，并通過可視化的報表進行呈現(xiàn)，報表功能主要包含以下內(nèi)容：

按照文件歷史版本統(tǒng)計代碼的行數(shù)、CSS規(guī)則、選擇器的使用情況、代碼的大小，并以可視化的報表進行呈現(xiàn)。
比較CSS文件代碼的更改，并通過顏色提示選擇器的復雜性降低了多少。
幫你查找隱藏的css hack 和 !importants 的數(shù)量。
可視化的統(tǒng)計顏色的使用情況、字體的使用情況、媒介查詢的使用情況
可視化統(tǒng)計動畫使用的情況
CSS命名規(guī)則的可視化歸類統(tǒng)計，幫你梳理歸類

其實功能不止這些，更多功能等待你的挖掘，此款工具唯一不足的地方就是只能免費創(chuàng)建一個項目，如果需要創(chuàng)建更多的項目，你需要付錢。

13、DebuCSSer

官網(wǎng)地址：https://github.com/lucagez/Debucsser

DebuCSSer 是一款簡易版的CSS調(diào)試工具，通過線框的形式呈現(xiàn)網(wǎng)頁上的DOM元素，使用這款工具十分簡單，你可以按住 CTRL 鍵，然后使用鼠標在頁面上進行滑動，就會看到對應元素被加上了線框，并顯示元素的寬高和對應的class或id。當你按住 CTRL + SHIFT 時，頁面上所有的元素都以線框的形式進行呈現(xiàn)，方便你看元素與元素之間的關系。這些快捷鍵的設置當然你可以自定義，包括線框樣式。

14、Animated CSS burger

官網(wǎng)地址：https://github.com/march08/animated-burgers

一款漢堡動畫變換(三條橫線) 的CSS插件，說簡單點就是三個橫線的動畫變換，我們在做導航的側滑菜單會經(jīng)?？吹剿?，點擊圖標變成叉號菜單打開，然后再次點擊叉號菜單關閉，恢復成三條橫線。這款插件除了可以變成叉號，還能對叉號的變換效果進行細微控制，比如旋轉，擠壓、側滑、滑動等效果。同時還能變成各種方向的箭頭。

15、DropCSS

官網(wǎng)地址：https://github.com/leeoniya/dropcss

一款快速高效、體積?。?0KB)的清理未使用CSS代碼的插件。DropCSS將HTML和CSS作為輸入，僅返回使用的CSS作為輸出。它的自定義HTML和CSS解析器針對99％的用例進行了高度優(yōu)化，從而避免了處理格式錯誤的標記或樣式表的開銷。

16、cssfx

官方網(wǎng)站地址：https://cssfx.netlify.com/

cssfx網(wǎng)站，匯集了許多常用的漂亮的動畫小組件，比如按鈕點、鏈接的點擊滑動效果，還有一些常用的loading動畫小組件，這些小組件的代碼十分簡潔，只有CSS沒有JS，點擊對應的組件，就會顯示對應的源碼，很方便的集成到你的項目中。此項目中的代碼免費開源并準守MIT許可。

17、CSS Grid Generator

官方網(wǎng)站地址：https://cssgrid-generator.netlify.com/

通過這款在線工具，你可以設置行和列的數(shù)字還有單位，工具將為您生成一個 CSS Grid 網(wǎng)格布局！在方框中拖動來創(chuàng)建 div 放置在網(wǎng)格內(nèi)。

雖然這個項目可以為您提供一個基本的布局, 但是本項目不是對 CSS 網(wǎng)格功能的全面介紹。這只是一種快速使用 CSS Grid 網(wǎng)格布局功能的方法。

我注意到很多人沒有使用 Grid，因為他們覺得這個太復雜了，難以理解。 Grid 可以做很多事情，而這個小的生成器只涉及到了一小部分功能。這樣做的目的是讓人們能夠快速上手并創(chuàng)建更多有趣的布局。

順便在分享一個通過在線游戲的形式學網(wǎng)格布局的網(wǎng)站：https://cssgridgarden.com/

18、Darkmode.Js

官方網(wǎng)站地址：https://github.com/sandoche/Darkmode.js

花幾秒鐘你也能打造一款白天/夜間閱讀模式的網(wǎng)站，這個插件使用 css mix-blend-mode 的特性為你的網(wǎng)站添加夜間模式。只需要復制粘貼代碼在網(wǎng)頁上添加一個小部件就可以進行白天和黑夜模式的切換，除了這種方式，你還可以編程的方式進行使用。該插件是輕量級的，基于原創(chuàng)JS實現(xiàn)。同時它基于本地存儲的方式，記住你最后一次選擇的閱讀模式。

該插件具有以下特點：