使用 BEM 更改超链接颜色

Question

我今天第一次尝试 BEM。

为什么我的 link 颜色与默认颜色没有区别？

真的应该是黄色的吧？

.nav-primary {

  &__menu {
    color:red;
    }
    
  &__menuitem {
      color:green;
    }
    
  &__menuitem a {
      color:yellow;
    }      

  }

<div class="nav-primary">
    <ul>
        <li><a href="">why am I not a different colour?</a></li>
    </ul>
</div>

Answer 1

您针对的是不同的元素，即。

.nav-primary {

  &__menu {
    color:red;
    }

  &__menuitem {
      color:green;
    }

  &__menuitem a {
      color:yellow;
    }      
  }

将编译为：

.nav-primary__menu { color: red; }   
.nav-primary__menuitem { color: green; }
.nav-primary__menuitem a { color:yellow; }

这与您 html 中的任何元素都不对应。

我想您需要将 nav-primary__menuitem class 添加到您的 "element"，在您的情况下这将是一个列表项，因此：

<div class="nav-primary">
    <ul>
        <li class="nav-primary__menuitem"><a href="">why am I not a different colour?</a></li>
    </ul>
</div>

只有这样，您的最后一条规则才会适用于您的 link。

但是要对您的代码进行 BEM 化，您需要确定什么是块，以及 html 结构中该块的元素是什么。因此，在您的代码中，您可能还想将 class 添加到 link 元素。如果您希望块成为 nav-primary 元素，请在 link 上也使用即 .nav-primary__menulink class：

为什么我不是不同的颜色？

那么您的 CSS/SASS/LESS 将看起来：

.nav-primary {

      &__menu {
        color:red;
        }

      &__menuitem {
          color:green;
        }

      &__menulink {
          color:yellow;
        }      
      }

Answer 2

根据 BEM 文档，我将执行以下操作：

.nav-primary {

  &__menu {
    color:red;
  }

  &__menuitem {
    color:green;
  }

  &__menuitem a {
    color:yellow;
  }      

}

然后将您的 html 更改为：

<div class="nav-primary">
    <ul>
        <li class="nav-primary__menuitem"><a href="">why am I not a different colour?</a></li>
    </ul>
</div>

Answer 3

你可以在这里考虑更多的模块化，所以你有一个包装器 nav-primary 和一个高度可重用的模块 list。而且你不应该通过 Tagname 定位 a，因为它会极大地减慢你的 css。

<div class="nav-primary">
    <ul class="list  list--plain  list--nav-primary">
        <li class="list__item  [list__item--nav-item or nav-primary__item]">
            <a class="[list__item-link or nav-primary__item-link]" href="">why am I not a different colour?</a>
        </li>
    </ul>
</div>

然后修改列表项应该通过修改器完成，例如 list__item--nav-important 红色的。

使用 BEM 更改超链接颜色

Change hyperlink colour with BEM

css

bem