大家好，在一篇文章裡 ，我分享了 11 款 JS 插件，本篇文章我將會和大家分享七款 CSS、HTML 相關的新工具。
12、project wallace
官網地址：https://www.projectwallace.com/
一款在線可視化統計分析項目中CSS代碼的工具，這款在線工具十分強大，方便你管理分析項目中的CSS代碼，並通過可視化的報表進行呈現，報表功能主要包含以下內容：
- 按照文件歷史版本統計代碼的行數、CSS規則、選擇器的使用情況、代碼的大小，並以可視化的報表進行呈現。
- 比較CSS文件代碼的更改，並通過顏色提示選擇器的複雜性降低了多少。
- 幫你查找隱藏的css hack 和 !importants 的數量。
- 可視化的統計顏色的使用情況、字體的使用情況、媒介查詢的使用情況
- 可視化統計動畫使用的情況
- CSS命名規則的可視化歸類統計，幫你梳理歸類
其實功能不止這些，更多功能等待你的挖掘，此款工具唯一不足的地方就是隻能免費創建一個項目，如果需要創建更多的項目，你需要付錢。
13、DebuCSSer
官網地址：https://github.com/lucagez/Debucsser
DebuCSSer 是一款簡易版的CSS調試工具，通過線框的形式呈現網頁上的DOM元素，使用這款工具十分簡單，你可以按住 CTRL 鍵，然後使用鼠標在頁面上進行滑動 ，就會看到對應元素被加上了線框，並顯示元素的寬高和對應的class或id。當你按住 CTRL + SHIFT 時，頁面上所有的元素都以線框的形式進行呈現，方便你看元素與元素之間的關係。這些快捷鍵的設置當然你可以自定義，包括線框樣式。
14、Animated CSS burger
官網地址：https://github.com/march08/animated-burgers
一款漢堡動畫變換(三條橫線) 的CSS插件，說簡單點就是三個橫線的動畫變換，我們在做導航的側滑菜單會經常看到它，點擊圖標變成叉號菜單打開，然後再次點擊叉號菜單關閉，恢復成三條橫線。這款插件除了可以變成叉號，還能對叉號的變換效果進行細微控制，比如旋轉，擠壓、側滑、滑動等效果。同時還能變成各種方向的箭頭。
15、DropCSS
官網地址：https://github.com/leeoniya/dropcss
一款快速高效、體積小（10KB)的清理未使用CSS代碼的插件。DropCSS將HTML和CSS作為輸入，僅返回使用的CSS作為輸出。它的自定義HTML和CSS解析器針對99％的用例進行了高度優化，從而避免了處理格式錯誤的標記或樣式表的開銷。
16、cssfx
官方網站地址：https://cssfx.netlify.com/
cssfx網站，彙集了許多常用的漂亮的動畫小組件，比如按鈕點、鏈接的點擊滑動效果，還有一些常用的loading動畫小組件，這些小組件的代碼十分簡潔，只有CSS沒有JS，點擊對應的組件，就會顯示對應的源碼，很方便的集成到你的項目中。此項目中的代碼免費開源並準守MIT許可。
17、CSS Grid Generator
官方網站地址：https://cssgrid-generator.netlify.com/
通過這款在線工具，你可以設置行和列的數字還有單位，工具將為您生成一個 CSS Grid 網格佈局！在方框中拖動來創建 div 放置在網格內。
雖然這個項目可以為您提供一個基本的佈局, 但是本項目不是對 CSS 網格功能的全面介紹。這只是一種快速使用 CSS Grid 網格佈局功能的方法。
我注意到很多人沒有使用 Grid，因為他們覺得這個太複雜了，難以理解。 Grid 可以做很多事情，而這個小的生成器只涉及到了一小部分功能。 這樣做的目的是讓人們能夠快速上手並創建更多有趣的佈局。
順便在分享一個通過在線遊戲的形式學網格佈局的網站：https://cssgridgarden.com/
18、Darkmode.Js
官方網站地址：https://github.com/sandoche/Darkmode.js
花幾秒鐘你也能打造一款 白天/夜間 閱讀模式的網站，這個插件使用 css mix-blend-mode 的特性為你的網站添加夜間模式。只需要複製粘貼代碼在網頁上添加一個小部件就可以進行白天和黑夜模式的切換，除了這種方式，你還可以編程的方式進行使用。該插件是輕量級的，基於原創JS實現。同時它基於本地存儲的方式，記住你最後一次選擇的閱讀模式。
該插件具有以下特點：
- 窗口小部件自動適應窗口大小
- 能夠記住用戶的選擇
- 如果操作系統偏好設置為夜間黑暗深色主題的話，則自動顯示為“夜間模式 ”（如果瀏覽器支持“ preferred-color-scheme”）
- 可以用編程的方式進行實現，無需掛載小部件
小節
關於 CSS & HTML 工具的插件就分享到這裡，如果你喜歡我的分享，麻煩給個關注、點贊加轉發哦，你的支持，就是我分享的動力，在下篇文章我將和大家分享一些關於測試及數據相關的工具，敬請期待...
閱讀更多 前端達人 的文章
