Personally, I think you should use !important in your CSS. It is a tool like any other. It has its use cases and if you know when and how, it is very helpful. Most people, however, do it wrong. It's not that it's difficult, people just don't know how to. Since so many people don't know proper CSS architecture, many people just tell you not to use it in order to make your CSS life easier. Imho, it's the wrong way to deal with the symptoms. Why not fix the root problem?
!important with confidence.Example:
.u-borderless {
border: 0 !important;
}
.o-avatar {
border: solid 3px black;
height: 50px;
width: 50px;
margin: 5px;
/* ... */
}
.o-avatar--premium {
border: solid 3px red;
}
The above CSS is ordered as defined by Harry's ITCSS layers and uses BEMIT naming conventions. On a regular site (e.g. a forum with users), you usually want later rules to overwrite earlier ones, so you can have html, like
<article class="o-article__block">
<div class="o-article__user-bit">
<img class="o-avatar" src="/users/12345/avatar.png">
</div>
<div class="o-article__post-bit">
I am a regular user!
</div>
</article>
<article class="o-article__block">
<div class="o-article__user-bit">
<img class="o-avatar o-avatar--premium" src="/users/54321/avatar.png">
</div>
<div class="o-article__post-bit">
I am a premium user!
</div>
</article>
However, you might want to have a utility to remove all border information for special cases. Let's say, there is a BBCode to remove the border from anything. A user \@-mentions another user, which might insert the user's avatar. You usually want to keep all the other CSS of the avatar (which might include mediaqueries, background colors, dimensions, transformations, etc.), but just remove that border. That's the time for a utility-rule, which just removes the border, no matter what the other rules do.
<article class="o-article__block">
<div class="o-article__user-bit">
<img class="o-avatar o-avatar--premium" src="/users/54321/avatar.png">
</div>
<div class="o-article__post-bit">
<a class="o-post-bit__link o-post-bit__mention-user" href="/users/12345">
<img class="o-avatar / u-borderless" src="/users/12345/avatar.png">
</a>
</div>
</article>
Since we use proper CSS architecture, there are no side-effects and the utility rule is even required to have !important so that it can do its magic in all situations.
I hope this example makes it clear why !important is important and how to use it. Also, I hope that you came to understand that proper architecture is imperative and can solve most (if not all) of the CSS problems you can encounter :)