How to overwrite other CSS files with BEM?

Question

I'm theming a project which has a base CSS file. I am meant to style the site using BEM, but am having trouble with this base file (which I cannot edit).

For example, there is a CTA a tag in the main-menu element, whose font-size I have styled as:

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

But this is overwritten by the base.css:

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

I can make a selector like .main-menu .cta { but this breaks my BEM. I can also use !important; but this feels wrong.

Is there any 'BEM way' of getting around this problem?

PS, HTML for this example would be:

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

Answer 1

You could use a double ampersand to increase the specificity, like this:

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

jsfiddle

Answer 2

The key to this is specificity, try something like below or even including a class or element outside of the snippet you've shown us to make your style more specific to your target.

div.main-menu {

    &__cta {

        font-size: .875rem;

    }

}