Menu icon Foundation
Changes often need !important

Alot of changes made in _settings.scss need the !important rule to take affect. For example to apply zero paddings and margins to rows within rows I must do this:

.row .row {
            
    padding: 0 !important;
    margin: 0 !important:
    
}     

Even if this works, it's not good practice to overuse the !important rule. Is there a way to make my own settings always replace the default ones?

scsscascadecss!importantdefault

Alot of changes made in _settings.scss need the !important rule to take affect. For example to apply zero paddings and margins to rows within rows I must do this:

.row .row {
            
    padding: 0 !important;
    margin: 0 !important:
    
}     

Even if this works, it's not good practice to overuse the !important rule. Is there a way to make my own settings always replace the default ones?

flexbox about 5 years ago

Hello Robin,

Have you try to use the .collapse class name ?

Robin Cox about 5 years ago

Thanks flexbox, but it's not only for that specific case. The problem is that I have to use !important for other stuff to. I wan't all my scss rules to supercede the default foundation ones.

Julie Lewis about 5 years ago

Double check the order in which your css files are imported - make sure your overrides are imported last.

I was always nervous about using !important before I started working with frameworks. But when overriding 4000+ lines of css, sometimes "good practice" goes out the proverbial window.

Karl Ward about 5 years ago

In some cases, you may need to use !important, but I gotta admit your example was a bit unspecific. The grid system in Foundation is built so that nested grids have negative margin, so they don't compound margins. It would be very strange if you actually wanted double- or triple margins for nested grids, as the margin is defined under your settings as a variable.

If for some reason you want some custom margins in just a few specific columns, then why not create your own custom class for those specific rows or columns?

.row .row.myrow {
  padding: 0px;
  margin: 0px;
}
<div class="row myrow"> ...

Specific customizations can be applied to your own specific classes at demand, without trying to overwrite Foundation-native classes.

As mentioned, there may be other scenarios where you might just need to use !important, but not frequently. If you got another example, I wouldn't mind taking a look. Create your own specific classes when possible, like the examples above.

Just a tip: You should not add custom classes to the _settings.scss file. That file should be dedicated to only the Foundation settings, making it easier to upgrade.