Why is every CSS statement ended with “!important”

Hi @garbokaas,

If in short, then the plugin should look the same on all sites.

We use !important, because each site has your unique design and environment (theme, plugins, configs). Sometimes, the site has a very badge styles with a many bad (global) css selectors (for instance, div {…}, p {…}), this is very harmful for the plugin and without !important reviews look not just awful, they just are not readable, the client thinks that something is wrong with the plugin and we get a dissatisfied client and a false request to support.

We thought about using custom CSS tags, but they also can’t be used, because so many (really very many) clients use older browsers (sometimes even IE 9), such custom tags will not work there and we can’t use it.

Actually, this is an open question and we monitor some other solutions and if we will find something really good, of course we will investigate the possibility to implement it in the plugin.

Thanks!

I understand what you say but I would strongly recommend to use a styling pattern that makes use of a unique ID for the entire container.

Something like this:

<div id="fb-reviews-wrapper">
  <div id="fb-reviews-page-head"></div>
  <div id="fb-reviews-page-reviews"></div>
</div>

Then you could start every style declaration like:

#fb-reviews-wrapper #fb-reviews-page-head{
...
}
#fb-reviews-wrapper #fb-reviews-page-reviews{
...
}

This way the chances of conflicting style rules are at a minimum while overriding the styles with custom colors, fonts etc is still fairly easy.

The gist is: don’t incorporate bad practices because others do it. Lead by example !important; ??

Thank you for your plugin.

Hi @garbokaas,

Yes, we are absolutely agree with you, it’s really must be.
We will try to put this in order from time to time and in the future use it.

Thank you for your help in improving the plugin!