他のCSSファイルをBEMで上書きする方法は？

Question

私はベースCSSファイルを持つプロジェクトをテーマにしています。私はBEMを使用してサイトをスタイルすることを意図していますが、このベースファイル（編集できません）に問題があります。

.main-menu { 
    &__cta { 
    font-size: .875rem; 
    } 
} 

しかし、これはbase.cssによって上書きされています：

.main-menu a { 
    font-size: 1rem; 
} 

は例えば、そのフォントサイズIのようにスタイリングしているCTAメインメニュー要素内のタグがあり、

私は.main-menu .cta {のようなセレクタを作ることができますが、これは私のBEMを破壊します。私も!important;を使うことができますが、これは間違っています。

この問題を回避するための「BEM方法」はありますか？

PS、この例のHTMLは次のようになります。

<div class="main-menu"> 
    <!--menu items--> 
    <a class="main-menu__cta">Call-to-action</a> 
</div> 

Answer 1

あなたはこのように、特異性を高めるために二重のアンパサンドを使用することができます。

.main-menu { 
    & &__cta { 
     font-size: .875rem; 
    } 
} 

jsfiddle

Answer 2

このための鍵以下のようなものを試してみてください。また、スニペットの外にクラスや要素を含めて、あなたのスタイルをターゲットに合わせて具体化することもできます。

div.main-menu { 

    &__cta { 

     font-size: .875rem; 

    } 

}