Taming the !important problem in Simple Social Icons

Problem

Want to adjust the horizontal spacing between icons of a Simple Social Icons plugin’s widget output? “No problem, I have Firebug” you say. You inspect the icons and find that there’s a left and right margins of 6px each. So you proceed to write

.simple-social-icons ul li {
    margin-left: 10px;
    margin-right: 10px;
}

in your child theme’s style.css, refresh the front-end and nothing. You will then realize that !important is being used in the stylesheet coming from plugin.

So you make it

.simple-social-icons ul li {
    margin-left: 10px !important;
    margin-right: 10px !important;
}

in theme’s style.css.

Nope, still no dice. Your !important is trumped by the !important from plugin’s CSS. So no matter what you do, it is not possible to change the margins via just CSS.

At this time our options are 1) edit the plugin’s css file and remove the !importants but then this is not a good idea because our customizations will be lost when the plugin gets updated 2) fork it, i.e., make a copy of the plugin, rename it to something else and edit the css file. But then we will need to keep up with the master plugin updates (if you feel they are needed) and re-apply them in ours.

Solution

Luckily we can use wp_dequeue_style function to stop the plugin’s CSS from loading. We will then place a copy of plugin’s stylesheet in our active theme directory, edit it to remove !importants and enqueue this one instead.

Copy/upload css and font folders under wp-content/plugins/simple-social-icons to the active theme’s directory. Rename the copied css/style.css to css/simple-social-icons.css. Edit it and remove all instances of !important.

Then add this in active theme’s functions.php:

and we are done. You still got to use !important in your custom style rules to affect the changes – but at least now the following in child theme’s style.css, for example, works.

.simple-social-icons ul li {
    margin-left: 10px !important;
    margin-right: 10px !important;
}

Being a intermediate developer, my conclusion for plugin authors insisting on using !important in plugin’s front-loading CSS is a) You don’t know what you are doing b) You assume your users don’t know what they are doing. If there is another reason I do not know of, I would love to be educated.

Sincere appeal to the plugin authors: Please stop using !important in plugin’s CSS.

As of writing this article, version of Simple Social Icons is 1.0.5.

Thanks to: Robert and PeterBooker in #WordPress on Freenode.

Update: Ron Rennick, a plugin author has kindly answered my questions here and showed that it is indeed possible to just use CSS by being specific in the selectors to get around the !important problem.