Make class !important - less

Question

In Less is there a simple way to make all attributes in a class !important? My usecase is that I will be dynamically inserting a 'tag' (div) into existing divs that will always have inline styling.
Example:
<div class="text-widget ui-sortable" style="font-size: 5em;>
<div class="tag"><span>Click me to drag widget. My font size should never change</span></div>
<p>I am a text widget that can be dragged. When I am deselected my tag above will be deleted</p>
</div>
So .tag properties need to be !important to avoid getting the text widgets css. Is there a simple way in less to make all properties !important? Something like...
.tag !important {
.... lots of properties that I dont want to add !important to each one.
}

Answer 1

This is in reply to #sazr's question to my comment.
If you think you need to use !important then your CSS is very complex and often has too many top level rules that affect too many things. Sometimes this is because you are trying to create generic CSS that is applied throughout your page, sometimes it is because you are creating rules that have such a large value for specificity that you can't figure out another way to force the style you want on your element.
Learning what specificity is and how it works is the most important thing for a CSS developer. If you don't truly understand that then you are doomed to need !important to resolve issues that elude you.
Look at this chart that I took from here: http://www.standardista.com/css3/css-specificity/
Notice the image associated with !important. It is the nuclear option and should be used as a last resort. Although I use it on every rule for #media print to not have to worry about my printouts.
Using some kind of name spacing with your CSS will help reduce the death spiral that can be caused by too many non-specific selectors or too many selectors that are so specific that you can no longer override those rules.
A select like this:
#page1 .outershell .innershell .form button {
background-color: green;
}
has a specificity of 1,3,1
If you have this layout:
<div id="page1">
<div class="outershell">
<div class="innershell">
<form class="form">
<button>Click me</button>
</form>
</div>
</div>
</div>
And you want to change the button's background color to red then you have to create a new selector with a higher specificity.
This won't work
.form button {
background-color: red;
}
Since it only has a specificity of 0,1,1
#page1 .form button {
background-color: red;
}
This only has a value of 1,1,1
So you need to use two ID selectors, a fourth class selector or a second element selector. Or you can place the exact same selector after the first and then all of your buttons after that declaration will be red.
But that won't change any other buttons to red. So with this layout:
<div id="page1">
<div class="outershell">
<div class="innershell">
<form class="form">
<button>Click me</button>
</form>
</div>
<div class="secondshell">
<button>Not me</button>
</div>
</div>
</div>
the button "Not me" will not be red, or even green.
Things I do
I do not ever us ID selectors unless I must to override existing CSS.
I do not use !important except for #media print and I use it for everything in my print output. That way I know my specificity for the print output and I do not worry about some other CSS selector ruining my printouts.
I avoid deep selectors. Most of my selectors have a specificity value of 0,1,0 to 0,2,0 or 0,1,2
I use attributes for state values and attribute selectors to reduce the amount of JS I need to write, allowing CSS to do the work for me.
BEM to the rescue
OK. Some people don't like BEM. But it has save my life from the complexities of CSS. I have not had a single CSS specificity problem since I started using it, except when dealing with older CSS and even then I find it easy to repair.
BEM is not just about CSS, it is also about formatting your DOM in a sensible way to help the CSS work for you instead of you having to work for it.
Using this DOM:
<style>
.form-box--btn {
background-color: red;
}
</style>
<div>
<div>
<div class="form-box">
<form class="form-box--form">
<button class="form-box--btn">Click me</button>
</form>
</div>
<div class="other-thing">
<button class="form-box--btn">Me too</button>
</div>
</div>
</div>
I KNOW that my two buttons are red. And as long as everyone working on this page agrees to follow the rules we never run into a problem with the button changing color.
I know that is a simplistic example, but reading more about specificity, BEM and name-spacing will tell you much more than I can in this post.
Some light reading
Here are a few links that talk more about specificity, BEM and name spacing:
https://uxengineer.com/css-specificity-avoid-important-css/
http://getbem.com/
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://zellwk.com/blog/css-architecture-1/

Answer 2

Make a class for it:
.tagStyle (#bg: #00FF00) {
background: #bg;
/* Other properties */
}
.tag {
.tagStyle() !important;
}