Menu icon Foundation
Excessive use of !important?

I was trying to change the padding on the .menu-icon button on the off canvas

@import "foundation/components/top-bar";
a.menu-icon {
padding: 0;
}

In my experience with CSS, i have changed the padding after it is originally set so it should take effect, but it doesn't.. after lots of messing around i added !important and it worked.. so what is stopping it? There is no important declaration on the original code so it should be overwritten?

I've noticed this happening a lot and i've ended up with lots of !important in my code, i always thought this was bad practice?

On inspection of the source code i've noticed ALOT of !important declarations in the Foundation code..

!important

I was trying to change the padding on the .menu-icon button on the off canvas

@import "foundation/components/top-bar";
a.menu-icon {
padding: 0;
}

In my experience with CSS, i have changed the padding after it is originally set so it should take effect, but it doesn't.. after lots of messing around i added !important and it worked.. so what is stopping it? There is no important declaration on the original code so it should be overwritten?

I've noticed this happening a lot and i've ended up with lots of !important in my code, i always thought this was bad practice?

On inspection of the source code i've noticed ALOT of !important declarations in the Foundation code..

Rafi Benkual over 5 years ago

What would be helpful, is if you could add a list of the changes you needed to ad !important to so we can take a look and see why it's needed or not.