Why using important in css is Bad practice?

Question

HTML:

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul id="menu-primary" class="nav navbar-nav menustyle">
    <li><a href="#">Home</a></li>
  </ul>
</div>

CSS:

.menustyle a:before{
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  height: 2px;
  background-color: #fff;
  width: 0%;
}
.nav > li > a:hover .menustyle a:before{
  width: 100%!important;
}

This is not working when I use Bootstrap but works without bootstrap.

Bhuwan · Answer 1 · 2022-06-08T02:17:45.780

3

Try to use .nav > li > a:hover:before instead of .nav > li > a:hover .menustyle a:before...

.nav > li > a:hover .menustyle a:before....means it will target all the .menustyle a elements inside a <a> tag.

.nav > li > a:hover:before {
  width: 100%;
}

Fiddle Link

edited Jun 08 '22 at 02:17

answered Feb 09 '18 at 05:28

Bhuwan

16,525
5
34
57

Thanks, @Bhuwan It working on your suggestion. width: 100% give different width for different
. How to give equivalent width. Can you pls help me

Ramesh KR

Feb 09 '18 at 05:36

@RameshKR you want to give fixed width to all ..? – Bhuwan Feb 09 '18 at 05:42

@RameshKR - That is a completely different question and should be asked separately. Good answer and nice explanation, Bhuwan, +1. – Roddy of the Frozen Peas Feb 09 '18 at 05:45

Because I can't ask a question right now StackOverflow restricted me. – Ramesh KR Feb 09 '18 at 06:02

score -1 · Accepted Answer · answered Feb 09 '18 at 05:24

I have modified you code. If you want hover like this.

    <style type="text/css">           
        .menustyle a{
            position: relative;
        }
        .menustyle a:before{
                position: absolute;
                top: -5px;
                left: 0;
                content: "";
                height: 2px;
                background-color: #ff0000;
                width: 0%;
            }
        .menustyle > li > a:hover:before{
            width: 100% !important;
        }
    </style>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul id="menu-primary" class="nav navbar-nav menustyle">
            <li><a href="#">Home</a></li>
        </ul>
    </div>

Why using important in css is Bad practice?

2 Answers2