Componenti Bootstrap e metodologie SMACSS / BEM

Non ho abbastanza esperienza nello sviluppo web e ho bisogno di consigli da parte di sviluppatori più esperti.

Ho esplorato le metodologie SMACSS and BEM per alcune settimane, e mi piacciono, rende il codice CSS veramente carino e strutturato con componenti riutilizzabili.

Sto costruendo un sito web personale, ho usato template gratuiti per il punto di partenza (perché è bello), e ho iniziato a rifattorizzare il codice da% brutto CSS a% modulareCSS considerando SMACSS and BEM approcci, mantenendo UI guardi allo stesso modo.

Come la maggior parte di Bootstrap templates questo modello usa molto i componenti di bootstrap.

Ecco una parte problematica della pagina.

<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 -->

Questo è navbar componente dal framework bootstrap. Ma potresti notare una cosa strana qui navbar-custom .

E CSS per questa classe

.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;
}

Per me personalmente dopo essermi immerso in SMACSS/BEM tutti questi selettori annidati di classe sono davvero brutti e voglio eliminarli.
last-child, li:hover > a > ... Brrrr.
Ma c'è un altro problema, questa classe ( navbar-custom ) è usata solo per sovrascrivere il bootstrap styles predefinito.

Ho anche dato un'occhiata alle origini dei componenti bootstrap, sfortunatamente la stessa situazione qui, un sacco di selettori altamente nidificati. Capisco che bootstrap venga utilizzato per esigenze diverse e molti progetti, ma ne vale la pena? Per utilizzare ugly selectors per i componenti bootstrap e sovrascriverli all'interno dei css principali?

Anche dal punto di vista delle prestazioni, per quanto ne so i browser leggono i selettori da destra a sinistra.

Inoltre, ho trovato domande simili sullo stack overflow, in cui gli sviluppatori suggerivano di sbarazzarsi di Bootstrap nella produzione.

Quindi, tutto sommato la mia domanda è, è una buona pratica usare Bootstrap component o sarà molto meglio se creo i miei componenti e li utilizzi nel mio progetto web. Sto pensando di leggere tutte le cose di bootstrap eccetto il sistema di grid.

Per favore condividi le tue opinioni al riguardo, qualsiasi aiuto sarà molto apprezzato.