css - 使用 BEM 更改超链接颜色

Question

我今天第一次尝试 BEM。

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

真的应该是黄色的吧？

.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类添加到您的“元素”中，在您的情况下，这将是一个列表项，如下所示：

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

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

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

为什么我没有不同的颜色？

那么你的 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高度可重用的模块。而且你不应该以aby Tagname 为目标，因为它会极大地减慢你的 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，例如红色的修改器。