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

Question

Here I am, trying to do a decent job at maintaining a site and adding new elements to it. But before that, I'd like to clean its css files.

That site is using 2 stylesheets, a v1 and a v2. Basically, the v2 adds new rules but also overrides rules/properties from the v1. So I can't just get rid of v1 because v2 doesn't contain all rules and properties.

Here's a quick example

From v1

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

From v2

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

And so, the result should be like

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

I thought about manually merging v2 into v1, moving the new elements and overriding properties, but v2 is 3000 lines long...

So then I tried to find a tool that would do that automatically but I didn't find anything solid. I need something that can merge the two files and consider that the 2nd file is loaded after, so it can overrides rules and properties of the 1st one.

Does someone know a good tool/script doing that?

Thanks

Answer 1

After only a few minutes of searching i found this: CSS Compressor

Basically is allows you to upload a few css files, select different options such as combining properties, and then it merges the files into one sheet. I havent used it, but I've heard it work quite well with only a few discrepancies.

Check it out and let us know if it works

There is also This and This list of other helpful tools

Answer 2

With this combination i solved and optimize the css to the maximum.

After configuring Grunt, install the following plugins:

• grunt-postcss
• grunt-contrib-cssmin
• grunt-cssnano
• clean-css
• postcss-flexbugs-fixes
• autoprefixer

Gruntfile.js

Create the task to minify, merge selectors & properties, remove duplicates, etc.

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

After create a task to parse CSS, add prefixes and optimize more.

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' 
    }
}

Register a shortcut to the tasks

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

And Voilà!!

grunt css 

Answer 3

I was looking for exactly the same thing as you do and couldn't believe that there is nothing easily to be found, even though the usecase seems to me pretty common.

Nevertheless, I found perfect tool which does exactly what you asked for - CSSO . It merges same classes together and omits duplicate CSS rules.

Answer 4

Thanks Tiago Fontella on debian/Linux

merge css using

 cat a.css b.css d.css > merged.css 

apt-get update
apt-get upgrade
apt-get install curl   
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
apt-get install build-essential nodejs
mkdir node-project
cd node-project
npm init
npm install -g grunt (or npm install grunt?) 
npm install grunt-postcss --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install --save-dev grunt-cssnano
npm install --save-dev clean-css
npm i postcss-flexbugs-fixes
npm i autoprefixer

script must be in node-project: Gruntfile.js use nano Gruntfile.js to create it

   module.exports = function(grunt) {
       grunt.initConfig({
           cssmin: {
              options: {
                  advanced: true,
                  mergeAdjacent: true,
                  removeDuplicates: true,
                  shorthandCompacting: false
              },
              files: {
                  src: 'your/path/style.css',
                  dest: 'your/path/style.min.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.loadNpmTasks('grunt-contrib-cssmin');
       grunt.loadNpmTasks('grunt-postcss');
       grunt.registerTask('css', ['cssmin', 'postcss']);
   };

Answer 5

You could use concat during build time to merge the two files

First you need to download it from npm.com/package/concat

then merge and require the new file

In node or package.json for automation, the merge would look something like this;

concat ./v1.js ./v2.js -o /vOutput.js