Bootstrap components and SMACSS/BEM methodologies

Question

I have no enough experience in web development and I need advice from more experienced developers.

I have been exploring SMACSS and BEM methodologies for a few weeks, and I like them, it makes really pretty and structured CSS code with reusable components.

I am building personal web-site, I have used free template for starting point (because it looks nice), and have started to refactor code from plain ugly CSS to modular CSS considering SMACSS and BEM approaches, keeping UI look similarly.

As most of Bootstrap templates this template uses bootstrap components a lot.

Here is an problematic part of the page.

<header id="header" class="header">
    <nav class="navbar navbar-custom" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <!--Navigation menu bootstrap module-->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#custom-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""></a>
            </div>

            <div class="collapse navbar-collapse" id="custom-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="nav-item"><a href="#home-intro">Home</a></li>
                    <li class="nav-item"><a href="#about">About</a></li>
                </ul>
            </div>
        </div><!-- .container -->
    </nav>
</header><!-- End Navigation -->

This is navbar component from bootstrap framework. But you may notice one weird thing here navbar-custom.

And CSS for this class

.navbar-custom {
  border: 0;
  border-radius: 0;
  margin: 0;
  text-transform: uppercase;
  font-family: 'Roboto Condensed', sans-serif;
}

.navbar-custom,
.navbar-custom .dropdown-menu {
  background: #fff;
  padding: 0;
}

.navbar-custom ul li a span {
  margin-left: 5px;
}

.navbar-custom .dropdown-menu {
  margin-top: 10px;
  display: block;
  visibility: hidden;
  opacity: 0;
  border: 1px solid #ddd;
  border-top: 2px solid $color-primary;
  border-radius: 0;
  border-bottom: 3px double #ddd;
  background-color: #FFFFFF;
  @include transition-properties($defaultTransitionProperties);
}

.navbar-right .dropdown-menu {
  right: auto;
  left: 0;
}

.navbar-custom .navbar-nav > li:hover .dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  margin-top: -2px;
}

.navbar-custom .navbar-nav > li > a {
  color: #282828;
  font-size: 1.6em;
  font-weight: 700;
  padding-top: 1.4em;
  padding-bottom: 1.4em;
  text-transform: uppercase;
}

.navbar-custom .dropdown-menu > li {
  border-bottom: 1px solid #F0F0F0;
}

.navbar-custom .dropdown-menu > li:last-child {
  border-bottom: 0;
}

.navbar-custom .nav li.active,
.navbar-custom .nav li a:hover,
.navbar-custom .navbar-nav > li.active > a {
  background: none;
  outline: 0;
  color: $color-secondary;
  border-bottom: 2px solid;
}

.navbar-custom .nav li a:focus {
  background-color: transparent;
}

.navbar-custom .navbar-brand {
  font-weight: 700;
  font-size: 1.2em;
}

.navbar-custom .nav .open > a,
.navbar-custom .dropdown-menu > li > a:hover,
.navbar-custom .dropdown-menu > li > a:focus {
  background: #f5f5f5;
}

.navbar-custom .navbar-toggle .icon-bar {
  background: $color-font--root;
}

For me personally after diving into SMACSS/BEM all these class nested selectors look really ugly, and I want to get rid of them.
last-child, li:hover > a > ... Brrrr.
But there is another problem, this class (navbar-custom) is used just to override default bootstrap styles.

I also had a look at bootstrap components sources, unfortunately the same situation here, a lot of highly nested selectors. I understand that bootstrap is used for different needs and a lot of projects, but is it worth it ? To use ugly selectors for bootstrap components, and override them inside main css ?

Even from performance point of view as far as I know browsers read selectors right to left.

Furthermore, I found similar questions on stack overflow, where developers suggesting to get rid of Bootstrap in production.

So all in all my question is, is it good practice to use Bootstrap component or it will be much better if I create my own components and use them in my web-project. I am thinking about getting read of all bootstrap stuff except grid system.

Please share your thoughts about that, any help will be highly appreciated.