fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

DropCSS
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

GitHub:https://github.com/leeoniya/dropcss
网站描述:一个用来清理无用 CSS 的小工具

Dropcss 是一个用来清理无用 CSS 的小工具,它根据 html 和 CSS 作为输入并返回那些有用到的 CSS 信息。 DropCSS删除所有未使用的样式块、重复的选择器、@keyframes等等。高度优化,速度极快。 


DropCSS安装

npm install -D dropcss


DropCSS使用方法:  

const dropcss = require('dropcss');

let html = `
    <html>
        <head></head>
        <body>
            <p>Hello World!</p>
        </body>
    </html>
`;

let css = `
    .card {
      padding: 8px;
    }

    p:hover a:first-child {
      color: red;
    }
`;

const whitelist = /#foo|\.bar/;

let dropped = new Set();

let cleaned = dropcss({
    html,
    css,
    shouldDrop: (sel) => {
        if (whitelist.test(sel))
            return false;
        else {
            dropped.add(sel);
            return true;
        }
    },
});

console.log(cleaned.css);

console.log(dropped);


链接: https://fly63.com/nav/1538

more>>
相关栏目
sass
成熟、稳定和强大的CSS扩展语言
官网GitHub
postcss
PostCSS是一个使用JavaScript插件来转换CSS的工具。
官网GitHub
stylus
Stylus是一个高效、动态以及丰富的CSS预处理器
官网GitHub
animate.css
齐全的CSS3动画库
官网GitHub
Metro UI
基于平板界面设计CSS库是一种界面展示技术
官网GitHub
Spectre.css
轻量响应式 CSS 框架
官网GitHub
water.css
只需添加CSS框架即可应用样式,无需定义元素类
官网GitHub
Pattern.css
一个CSS库,使用美丽的图案填充空的背景。
官网GitHub
three-dots
一组CSS加载动画,它由三个点组成,而这些点仅由单个元素组成
官网GitHub
CSSeffectsSnippets
提供了漂亮的CSS动画
官网GitHub
Angrytools
多样定制,实用,支持单个动画代码复制的网站
官网
magic
带多种动画效果的CSS3动画库
官网GitHub
topcoat
一款为简洁高速Web应用提供CSS开发的工具
官网GitHub
Biomatic UI
简单,灵活的CSS框架
官网GitHub
css-animation-101
从零开始介绍 CSS 动画开源电子书
官网GitHub
CSS Loaders
一个庞大的集合的CSS加载动画
官网

手机预览