在线CSS DRYer(重复数据删除)

DRY =“不要重复自己”.

我有一个基础css框架,我用它来构建更复杂的设计.最快的原型设计方法就是从最后开始并构建css以获得所需的结果(而不是从基本css编辑现有的css属性).

但是,在我完成之后,会有很多重复的类名和属性.

我正在寻找一个在线(或离线)工具,它将扫描我的css文件,并以删除冗余和重复的形式智能地重新制作它.

例如,如果这两行存在于CSS文件中:

//FROM THE BASE CSS
.header{
    font-weight:bold;
    font-size:1.5em;
    background:red;
    margin:0 auto;
    padding:20px
    }

//FROM THE ADDED CSS
.header{
    font-weight:normal;
    font-size:1.25em;
    background:blue;
    padding-bottom:0;
    margin-top:-20px
    }

所需的结果(给级联中的较低项目优先于前者)将删除.header指令的第一个实例,并将两个.header实例中的规则合并为一个.header指令,如下所示:

.header{
    font-weight:normal;
    font-size:1.25em;
    background:blue;
    margin:-20px auto 0 auto;
    padding:20px 20px 0 20px
    }

这样的应用程序是否存在?

解决方法

就个人而言,我使用 CSSTidy.它做了很多事情,但其中包括尽可能合并选择器和正确级联(删除重复属性).我通常也会将原始文件大小减少大约30%,这很简洁,即使在缩小时它仍然相当容易阅读(与JavaScript缩小器不同).

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效