BEM 和覆盖 Bootstrap 样式答案

【问题标题】：BEM and Overriding Bootstrap StylesBEM 和覆盖 Bootstrap 样式
【发布时间】：2018-01-10 00:38:20
【问题描述】：

我大约 30 分钟前才开始研究 BEM，我已经遇到了我的第一个障碍。

我正在使用 twitter bootstrap 构建一个项目，我决定将 BEM 架构用于我的样式，我尝试在堆叠列表上覆盖 bootstrap 悬停效果，但这不起作用。

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

以下是我的风格

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

除非我用!important 强制它，否则悬停效果不会消失，老实说，我确实看到了这样的问题，但还是决定尝试一下。

我发现问题与引导程序的特殊性有关，因为我的样式呈现在引导程序样式下方以实现悬停效果。

找到工作问题的链接：https://jsfiddle.net/3321L7xL/

【问题讨论】：

@Shameen 实际上没有，我将父名称与子名称连接起来，这样它就不会嵌套，而是只有一个元素
你的代码是完美的，我已经检查了这里的编译...sassmeister.com
悬停时检查元素并检查浏览器控制台..
检查一次您在 html 文档中加载 css 文件的顺序。
不确定消除特异性是什么意思 - 您的选择器在处理后是 .side-nav__item a:hover。这具有0.0.0.2.1 的特异性。如果这高于引导程序规则的特异性，那么你应该很高兴。如果没有，您需要一个更具体的选择器。

标签： html css twitter-bootstrap bem

【解决方案1】：

问题的关键是specificity of your selectors。您当前的选择器

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

具有0.0.0.2.1 的特异性。此特异性必须与引导程序中选择器的特异性相同或更高，以覆盖其规则。 When the specificity of selectors is the same, then order takes precedence (where the last rule wins).

要解决这个问题：使您的选择器更加具体。有很多方法，但您当前的标记是其中一种：

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 {
  position: relative;

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

这会产生.side-nav .side-nav__item a:hover 的选择器，其特异性为0.0.0.3.1，高于您尝试覆盖的规则。

【讨论】：