Use of !important CSS warning

Question

I'm in the process of creating a website with the aid of plugins and WordPress, the plugins are LearnDash, BuddyBoss and BuddyPanel, and I'm having trouble keeping the top navigation bar to stay the same before and after someone logs in, it's how I'd like it when I log in, but not before hand.

So I got help off support staff from BuddyBoss about this and they gave me some code which contains an warning that I've never come across before, the line of code that it is, is.

 color: #012243!important;

There is no other lines of code inside the {}, the warning is Use of !important.

How do I fix this?

here's a an answer about what !important does in css http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean — Mohamed Sobhy, Jul 16 '16 at 10:58
TL;DR: using `!important` overrules any specificity of the CSS. `!important` rules can only be overwritten by other `!import` rules, but more specific. Here's the order: `style rules with !important` > `specific rules with !important` > `less specific rules with !important` > `style rules` > `specific rules` > `less specific rules`. Specificity means that `div#myId` is more specific than just `div` as a selector, therefore having a more important say in things. — Paul Ghiran, Jul 16 '16 at 11:08
Ignore it. Using !important is not something you really want to do, but honestly when dealing with crappy themes and plugins it's often required since they do it themselves, so the only way to override it is to add !important again later. Welcome to the joys of WP dev.... It's not an error, it's just a warning. — Rick Calder, Aug 04 '18 at 10:59

score 4 · Accepted Answer · answered Jul 16 '16 at 11:02

4

Using of important! modifier is somewhat discouraged, but also, in most cases of prebuilt themes, the most appropriate way to override default settings. So, in your case, that's probably the only way you can override default color. Just use it if it works.

Also, I would write that rule as:

color: #012243 !important;

So, put a space between color code and !important.

answered Jul 16 '16 at 11:02

ceruleus

450
1
6
18

1

It is never the `most appropriate` way, especially for themes it might result in unexpected behaviour and the more you need to change the more problems you will have. It is always better make the selectors the same as in the theme. That way inheritance and dependencies in the style are retained. – t.niese Jul 16 '16 at 11:24
2

Of course, but cheap themes (or less cheap, but badly developed) don't grant any possibility of using CSS compiler like Sass, as well as they don't have any options of customizing the look and feel in CMS part. As I can see, OP doesn't have a much experience, so it's probably best solution for him to do quickfix. Also, theme developers gave him that advice, so you can just imagine how well is that theme developed. – ceruleus Jul 16 '16 at 11:29

Asons · Answer 2 · 2018-08-04T07:31:52.067

The recommended way is to either increase the specificity

div#higher {
  color: yellow;
  background: lightgray;
}

#higher {
  color: blue;
  background: lightgray;
}

div.high {
  color: lime;
  background: lightgray;
}

.high {
  color: red;
  background: lightgray;
}

<div id="higher" class="high">Hey there</div>

Or copy the existing rule and add it to a custom CSS, loaded after the theme's CSS.

/* theme CSS rule */
.parent .child {
  color: red;
  background: blue;
}


/* custom CSS rule - loaded/ordered after */
.parent .child {
  color: yellow;
  background: lightgray;
}

<div class="parent">
  <div class="child">
    Hey there
  </div>
</div>

If the above is not possible, then one need to use !important, added after a property value, e.g.

property: value !important;

When an important rule is used on a style declaration, this declaration overrides any other declarations. Although technically !important has nothing to do with specificity, it interacts directly with it. Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied.

Src: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception

Use of !important CSS warning

2 Answers2