Is it acceptable to use the !important directive in this case?

Question

I dynamically populate a ul by getting data from a DB and using a template engine (mustache) like so:

var template = '<ul class="myList"> {{#.}} ' + 
    '<li class="Foo" ' +
    'style="background-color: {{thisItemsColor}};>" ' +
        '{{someData}}' +
    '</li> ' +
'{{/.}} </ul>';

The color of the list item is stored in the DB. The problem is now I want to change the hover attribute to a different color. I cannot do this via a css file because in the markup I'm setting that attribute directly on the element so I'm doing this:

.myList .Foo:hover {
    background-color:#000033 !important;
}

Is this acceptable or should I use js/jquery to apply this pseudo selector?

+1 for being thoughtful and for reminding me that `!important` even exists. I'd say use the selector via jquery or even better, set a second class via your mustache template that you can use to set the background-color outside the inline style. — Anthony, Jun 23 '14 at 18:28
If your CSS follows proper precedence rules the use of `!important` shouldn't be needed. [This](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) is the best resource I've found on understanding precedence and has helped me to avoid the use of `!important`... — War10ck, Jun 23 '14 at 18:28
@War10ck He's using an inline `style` attribute. That has high precedence. I don't think you can trump it *without* `!important`. — mpen, Jun 23 '14 at 18:29
@War10ck - was just thinking that. shouldn't `:hover` at the `style` element level trump an inline style? — Anthony, Jun 23 '14 at 18:30
@ajm - I think that's the real question : what is hover intended for and is this such a case? It's often seen as a hack to shortcut through figuring out a better design, and in the OP's case, it could get pretty overwhelming if it gets used for any inline-style set through the template approach. — Anthony, Jun 23 '14 at 18:32
@Anthony Try it yourself: http://codepen.io/mnbayazit/pen/ipDxu doesn't work without `!important` — mpen, Jun 23 '14 at 18:32
This question is going to end up being primarily a matter of opinion I think. Personally, I think using `!important` to override an inline style (assuming that it NEEDS an inline style) is one of the few acceptable uses of it — Blake Mann, Jun 23 '14 at 18:33
@BlakeMann - most semantic issues become opinion on some level, but obviously there are opinions like "tables for layout is fine, who cares?" that are more wrong than "is vi better than emacs?" The OP is asking for guidance on best-practices, not whether anyone prefers !important over some other technique. — Anthony, Jun 23 '14 at 18:38
@Mark - yeah, just made my own test fiddle. that's disappointing. — Anthony, Jun 23 '14 at 18:38
@Mark Agreed. I was leaning more toward, why would an inline style be needed in the first place. Correct me if I'm wrong, but I've always learned that you want to be as unobtrusive as possible (i.e. try to prevent inline styles, inline JavaScript and even styles and such in the `` section). If the CSS could be refactored to remove the inline CSS, the `:hover` could simply be placed in a stylesheet following the appropriate precedence rules to override the initial style. — War10ck, Jun 23 '14 at 18:46
@Anthony Unfortunately, not. As far as I know, the precendence flows from inline, to the style element and then to external stylesheets. Then within the external stylesheets, the guide linked to above details how selectors are broken down from id's to classes to elements to pseudo selectors/classes, etc. Inline should always trump the ` — War10ck, Jun 23 '14 at 18:48
@War10ck - I imagine a scenario where the item has a specific color that in a list of say 100 items each one has some unique color for whatever reason and is stored in a db (maybe it's a user preference thing). In that scenario, I could see the logic of it being an element level style (because it's unique to that element) while still wanting a global-level style for hover events. — Anthony, Jun 23 '14 at 18:49
@Anthony That's true. In select (very specific) cases, it would probably be fine to use such a method. Stay away from the inline though if possible... — War10ck, Jun 23 '14 at 18:51
Also, I was expecting pseudo classes to have higher specificity because they can't be applied inline and because they reflect an element's state, thus is more *specific* than the element on load. Seems like the specificity rules conflict in that scenario, since it forces !important. — Anthony, Jun 23 '14 at 18:55

Ed_ · Accepted Answer · 2014-06-24T10:34:33.633

4

To answer this question it's best to go back to the reason why !important is discouraged in the first place: essentially to make the behaviour of your css predictable and extensible without having to check every single class for an !important tag.

My opinion is that this is exactly the use case that !important is designed for. If I were in your situation I'd use it over any inline style manipulation through JavaScript, although I would make it difficult for myself to misuse the CSS class by calling it something like .enforced-hover-highlight.

edited Jun 24 '14 at 10:34

answered Jun 23 '14 at 19:12

Ed_

18,798
8
45
71

The usage of descriptive words like "blue" are generally discouraged in selector names, but otherwise, good answer :-) – mpen Jun 23 '14 at 22:19
Good point, @Mark - I'll modify the answer – Ed_ Jun 24 '14 at 10:34

score 1 · Answer 2 · answered Jun 23 '14 at 18:35

1

I say go for it!

I'm pretty sure your only other option is to use JavaScript to apply a 2nd inline style on hover, which is even worse IMO. Except that old versions of IE don't register a :hover on <li>s so you may need to do this anyway if you want to support them.

answered Jun 23 '14 at 18:35

mpen

272,448
266
850
1,236

what "old" version of IE doesn't support :hover on a
? IE3 didn't support CSS, is that worth mentioning?

dandavis

Jun 23 '14 at 18:53

1

@dandavis quirksmode IE7 would only allow :hover on anchor tags with an href iirc (which also expectedly happened in IE8 compat quirks mode) – Kevin B Jun 23 '14 at 19:22

@dandavis I don't remember the exact version, I just remember getting bit by it in the past :-) Kevin's probably right. – mpen Jun 23 '14 at 22:21

score 0 · Answer 3 · edited May 23 '17 at 12:10

Usually, if an element's style is bound to change, one should avoid giving it any inline style and rely on CSS selectors only.

Whatever is specified in style defines the style of the element when it is rendered. It does not contain the notion of multiple states or selectors. It has higher specificity than the standard CSS declarations. This allows the DOM to be modified dynamically using javascript.

So when you make that inline style declaration for the li element, you override the CSS declarations defined in Foo, including its pseudo-classes.

So in your scenario you are left with a couple of solutions, none are completely ideal

Using !important: this will work but you might end up having unwanted overrides with time if you use that class often in other places
Using javascript to alter the inline style:

el.onmouseover = function(){this.style.background="..."};

el.onmouseleave = function(){...};

This has some obvious drawbacks as well.

So if you have to put the inline declaration I would go for 1. as well, and make sure that my selector is very specific.

Related question: CSS Pseudo-classes with inline styles

Is it acceptable to use the !important directive in this case?

3 Answers3