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

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?

Answer 1

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.