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

Question

我正在为一个项目设置主题，该项目有一个基础 CSS 文件。我打算使用 BEM 来设计网站样式，但是我在使用这个基本文件（我无法编辑）时遇到了问题。

例如，主菜单元素中有一个 CTA a 标签，我将其字体大小设置为：

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

但这被base.css覆盖了：

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

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

有什么'BEM way'可以解决这个问题吗？

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

Answer 2

这样做的关键是特异性，尝试类似下面的内容，甚至在您向我们展示的代码段之外包含一个 class 或元素，以使您的风格更符合您的目标。

div.main-menu {

    &__cta {

        font-size: .875rem;

    }

}

How to overwrite other CSS files with BEM?