2020年你应该关注这50款前端热门工具：CSS & HTML 工具篇（二）

大家好，在一篇文章里 2020年让人难以置信的50款前端新工具：JavaScript插件篇（一），我分享了 11 款 JS 插件，本篇文章我将会和大家分享七款 CSS、HTML 相关的新工具。

12、project wallace

官网地址：https://www.projectwallace.com/

一款在线可视化统计分析项目中CSS代码的工具，这款在线工具十分强大，方便你管理分析项目中的CSS代码，并通过可视化的报表进行呈现，报表功能主要包含以下内容：

1. 按照文件历史版本统计代码的行数、CSS规则、选择器的使用情况、代码的大小，并以可视化的报表进行呈现。
2. 比较CSS文件代码的更改，并通过颜色提示选择器的复杂性降低了多少。
3. 帮你查找隐藏的css hack 和 !importants 的数量。
4. 可视化的统计颜色的使用情况、字体的使用情况、媒介查询的使用情况
5. 可视化统计动画使用的情况
6. 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实现。同时它基于本地存储的方式，记住你最后一次选择的阅读模式。

该插件具有以下特点：

1. 窗口小部件自动适应窗口大小
2. 能够记住用户的选择
3. 如果操作系统偏好设置为夜间黑暗深色主题的话，则自动显示为“夜间模式 ”（如果浏览器支持“ preferred-color-scheme”）
4. 可以用编程的方式进行实现，无需挂载小部件

小节

关于 CSS & HTML 工具的插件就分享到这里，如果你喜欢我的分享，麻烦给个关注、点赞加转发哦，你的支持，就是我分享的动力，在下篇文章我将和大家分享一些关于测试及数据相关的工具，敬请期待...