Specificity when overriding bootstrap using less - html

Question

I am customizing bootstrap using less. I want to add a shadow to the .navbar.
My solution is as follows:
//Import of bootstrap core navbar - second as to save specificity
#import "bootstrap/navbar.less";
//Overrides:
.navbar {
position: relative;
min-height: #navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: #navbar-margin-bottom;
border: 1px solid transparent;
border-bottom: 1px solid #FFF;
-moz-box-shadow: 0px 3px 10px #888;
-webkit-box-shadow: 0px 3px 10px #888;
box-shadow: 0px 3px 10px #888;
//Prevent floats from breaking the navbar
&:extend(.clearfix all);
#media (min-width: #grid-float-breakpoint) {
border-radius: #navbar-border-radius;
}
}
This way I do not modify bootstraps original source, and it will be easy to update bootstrap, however the new navbar class receives higher specificity than all bootstrap classes. So the following:
<div id="navigationbar" class="navbar navbar-default navbar-static-top" ng-cloak ng-controller="NavController">
The navbar border-radius will override navbar-static-top an the result is round corners.
If i import the bootstrap/navbar.less after I define my own class it does work. But is there a better solution?

Answer 1

I wonder if your problems really have to do with CSS specificity.
You Less code will be read from top to bottom (only for variables last declaration wins).
Bootstrap defines the .navbar class first and than the style classes (.navbar-default) and position classes (.navbar-static-top).
When the .navbar-default override some styles of the .navbar class you undo this overrides by defining the .navbar class again after .navbar-default.
As far as i understand you only need the following Less / CSS code:
.navbar.navbar-default {
-moz-box-shadow: 0px 3px 10px #888;
-webkit-box-shadow: 0px 3px 10px #888;
box-shadow: 0px 3px 10px #888;
}
Demo: http://www.bootply.com/VhEmBcAYhY
Cause the Bootstrap navbar classes do not declare the box-shadow property at all, you can add this code anywhere in your Less code.
Good location you this code seems at the end of bootstrap.less or even navbar.less. Or create a custom.less file and import that at the end of bootstrap.less.

Answer 2

The easiest thing I've found, and this is what we do where I work, is to NOT use the Bootstrap LESS files, and instead using the minified CSS. Since you're ONLY overwriting Bootstrap styles, NOT changing the source styles, it will make it much easier.
With LESS, since you are nesting styles within styles, you'll find that if the styles aren't nested exactly as Bootstrap has them (since you're trying to override them), that their styles may be more specific, and therefor take precedence over your styles.