combine the CSS files and minfie in PHP ( wordpress )

1 Views

Hello I have worked on many projects and I have this Question …

all of us know in WordPress its better to combine all CSS files in One
but on other hand
there is post page use CSS that is never used in main page
category page use CSS never used in main or post page .

Read More

normally I dived the the CSS into files
I will give you example for easy understanding .

style.css ( contain all shared and basic CSS )

main.css ( main page )

category.css

page.css

vote.css ( for vote block it used in main + single page )

blockStyle1.css ( style for one block it used in main + categories )

....

I end up for category page to call

style.css

category.css

blockstyle1.css

....

.
.

what I try to accomplish is in category for example this 3 files on run time
will be combined together in 1 file

so I will keep my divided files idea + minimize the request to server .

Post Views: 1

Related posts

2 comments

  1. Grunt is your answer. Grunt is a task manager versatile for every need. In your case, it is there waiting for changes to your style sheets, and when the file is saved, it will merge them into one file, minimizing it.

    How implement Grunt?
    It’s simple:

    For first, install Grunt in your machine and create a project as explained in this page: http://gruntjs.com/getting-started

    Now let’s create your Gruntfile.js with appropriate contribs (http://gruntjs.com/sample-gruntfile)

    The Gruntfile.js for you project should be the seguent:

    
module.exports = function (grunt) {

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        concat: {
            dist: {
                src: ['css/*.css'],
                dest: 'style.css'
            }
        },

        watch: {
            css: {
                files: ['css/*.css'],
                tasks: ['concat']
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ['watch']);
};

    By command line launch grunt in your project directory and do your style changes.

    P.S. What you think about using Sass? Learn about http://sass-lang.com/ , http://compass-style.org/ and https://github.com/gruntjs/grunt-contrib-compass

Comments are closed.