如何用BEM覆盖其他CSS文件？

Question

我指的是一个有基本CSS文件的项目。我的意思是使用BEM设置网站的样式，但是我遇到了这个基本文件（我无法编辑）的问题。

例如，主菜单元素中有一个CTA标签，其字体大小我的样式为：

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

但这被base.css覆盖：

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

我可以创建一个像.main-menu .cta {这样的选择器，但这会破坏我的BEM。我也可以使用!important;，但这感觉不对。

是否有任何BEM方式＆＃39;解决这个问题？

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;

    }

}