BEMおよびオーバーライドブートストラップスタイル

Question

私はちょうど約30分前BEMを見て始めた、と私はそれで私の最初の道路ブロックを直撃しています。

私はtwitterのブートストラップでプロジェクトをビルドしています。自分のスタイルにBEMアーキテクチャを使用することにしました。積み重ねられたリストにブートストラップのホバー効果を上書きしようとしましたが、これは動作しません。以下は

<ul class="nav nav-stacked side-nav"> 
    <li class='side-nav__item'><a href="#">Link</a></li> 
    <li class='side-nav__item'><a href="#">Link</a></li> 
</ul> 

私は!importantでそれを強制しない限り、ホバー効果が離れて行くことはありません、私のスタイル

.side-nav { 
    position: relative; 
    &__item { 
    a { 
     &:hover { 
      font-weight: bold; 
      background: none; 
     } 
    } 
    } 
} 

ですが、私は正直に来て、このような問題を見ましたが、とにかくそれをしようとすることを決めました。

私は私のスタイルはホバー効果のためのブートストラップスタイルの下にレンダリングされるような問題は、ブートストラップ特異性に関係しています参照してください。

は、作業の問題へのリンクを探す：問題へhttps://jsfiddle.net/3321L7xL/

Answer 1

キーがspecificity of your selectorsです。あなたの現在のセレクター

.side-nav__item a:hover { ... } 

の特異性は0.0.0.2.1です。この特異性は、ルールを無効にするためにブートストラップからのセレクタの特異性と同じか、それ以上でなければなりません。セレクタの特異性が同じである場合、順序が優先されます（最後のルールが勝った場合）。あなたのセレクタは、より具体的にする：この問題に対処するため

。そこに多くの方法がありますが、あなたの現在のマークアップとここ1です：

HTML

<ul class="nav nav-stacked side-nav"> 
    <li class='side-nav__item'><a href="#">Link</a></li> 
    <li class='side-nav__item'><a href="#">Link</a></li> 
</ul> 

CSS/LESSこれは特異で.side-nav .side-nav__item a:hoverのセレクタになり

.side-nav { 
    position: relative; 

    .side-nav__item { 
    a { 
     &:hover { 
     font-weight: bold; 
     background: none; 
     } 
    } 
    } 
} 

0.0.0.3.1が上書きしようとしているルールよりも高くなっています。