How to reduce redundant CSS code

Hi,

i was wondering, if there is a way to reduce the huge amounts of redundant CSS code, when using some Plugins and Frameworks.

When i have a look in Firebug, i have about a dozend changes from wordpress core over bootstrap over bpagebuilder till i get to my theme and then my custom code...

I'm not into SASS and it's collegues... would that be the solution?

I would like to define my colours and fonts in one place and later on have a simple css file, without attributes changing over it's descendance line several times. All this concatination and minify-stuff would not be needed (and would not crash any designs, because of changeing the order of files loading...)

Does anyone know a tool for this or a way i should go to learn?

Thanks for helping!

Holger.

  • Rupok

    Hi Holger,

    When i have a look in Firebug, i have about a dozend changes from wordpress core over bootstrap over bpagebuilder till i get to my theme and then my custom code...

    That's a nice question and let me describe why redundant CSS code appears on your WordPress existence. When a plugin or theme developer designs a plugin or theme, they have to create those in such a way that if all other plugins are disabled, just native WordPress is there, it should work without any issue. Let's take a form input field for example. If your theme has Bootstrap ready, then bootstrap will have CSS declarations for those input fields. Suppose you activate a plugin which adds new design to form input fields. Now, did the plugin developer think that sites may have bootstrap, so let's not add input fields CSS? He did not, becuase his plugin design will break if Bootstrap is not there. Same for bootstrap. It doesn't think that some plugins may add input field CSS in future, so let's not include this in bootstrap css file. What if no plugin adds those CSS?

    In this way, all plugins and themes you use, include all required CSS and JS assets for them to be running without help of any other plugins/themes. That's why CSS overriding occurs.

    So if you want to remove all overriding and redundant assets, you will have to dequeue registered assets from all your plugins and current theme. This article will give you much idea regarding this: https://www.cozmoslabs.com/58990-remove-unused-css-js-files-in-wordpress/
    And then you will have to create a stylesheet file with all working CSS code and enqueue that so your currently active plugins and themes work without any issue.

    I searched for a tool for simplifying this but I'm afraid, I could not find any tool automating this process. So I think you will have to do this manually. There might be other better ways for doing this and I think our thousands of other members can give you idea regarding those ways if I move your thread to our Members' Forum where you can discuss this with them. Please confirm if you want me to move this thread there. I'll be glad to do that.

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.