如何合并和清理具有重叠选择器/属性的 2 个 css 文件？

Question

我在这里，试图在维护网站和向其添加新元素方面做得不错。但在此之前，我想清理它的 css 文件。

该站点使用 2 个样式表，一个 v1 和一个 v2。基本上，v2 添加了新规则，但也覆盖了 v1 中的规则/属性。所以我不能只删除 v1，因为 v2 不包含所有规则和属性。

这是一个简单的例子

从 v1

 .globalFooter {
    background-color: #eee;
    color: #fff;
    font-size: 15px;
}

从 v2

 .globalFooter {
    font-size: 18px;
    display: inline;
}

所以，结果应该是这样的

.globalFooter {
    background-color: #eee;
    color: #fff;
    font-size: 18px;
    display: inline;
}

我考虑过手动将 v2 合并到 v1 中，移动新元素并覆盖属性，但是 v2 有 3000 行长……

因此，我试图找到一个可以自动执行此操作的工具，但我没有找到任何可靠的东西。我需要一些可以合并这两个文件的东西，并考虑到第二个文件是在之后加载的，所以它可以覆盖第一个文件的规则和属性。

有人知道这样做的好工具/脚本吗？

谢谢

原文由 Link14 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有 这个 和 这个其他有用工具的列表

原文由 Luka Kerr 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

通过这种组合，我最大限度地解决和优化了 css。

配置 Grunt 后，安装以下插件：

• grunt-postcss
• grunt-contrib-cssmin
• grunt-cssnano
• 干净的CSS
• postcss-flexbugs-修复
• 自动前缀

文件.js

创建任务以缩小、合并选择器和属性、删除重复项等。

 cssmin: {
    options: {
        advanced: true,
        mergeAdjacent: true,
        removeDuplicates: true,
        shorthandCompacting: false
    },
    files: {
        src: 'your/path/style.css',
        dest: 'your/path/style.min.css'
    }
},

创建解析CSS的任务后，添加前缀并进行更多优化。

 postcss: {
    options: {
        processors: [
            require('postcss-flexbugs-fixes'),
            require('autoprefixer')({
                browsers: [
                    'last 2 versions',
                    'Edge >= 12',
                    'Explorer >= 9']
            }),
            require('cssnano')
        ],
        map: false,
    },
    files: {
        src: 'your/path/style.min.css',
        dest: 'your/path/style.min.css'
    }
}

注册任务的快捷方式

grunt.registerTask('css', ['cssmin', 'postcss']);

瞧！

 grunt css

原文由 Tiago Fontella 发布，翻译遵循 CC BY-SA 3.0 许可协议