javascript - CSS overriding UI properties - with or without !important

Question

I want to override default Dropdown properties that belong to react semantic UI

Here is my dropdown:

<Dropdown 
    placeholder="User" 
    selection 
    compact 
    options={userOptions}
/>

The text in my dropdown has too much padding so in my CSS I removed it like so:

.default.text {
    font-size: 10px;
    padding: 0;
}

I got rid of the padding from the Dropdown icon as well:

.dropdown.icon {
    padding: 0 !important;
}

However, as you can see this only worked when I used !important

Related questions:

1. How come the icon padding only works by using !important -- the text padding did not need !important

2. I hear using !important is bad practice. Should I avoid using it at all costs? How else do I override these properties / What are best practices?

Answer 1

Use a higher css rule specificity, like:

.somegrandparent .someparent .dropdown.icon {
  padding:0;
}

How come the icon padding only works by using !important -- the text padding did not need !important

Your one rule is working without !important as it might already have a higher specificity whereas the other did not.

I hear using !important is bad practice. Should I avoid using it at all costs? How else do I override these properties / What are best practices?

It is "ok" to use to override external libraries sparingly. But if it is possible to override by a higher specificity that is preferred as it will be easier to debug css conflicts / bugs.