Question

我今天第一次尝试BEM。

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

它真的应该是黄色的，对吧？

＆＃13;

.nav-primary {

  &__menu {
    color:red;
    }
    
  &__menuitem {
      color:green;
    }
    
  &__menuitem a {
      color:yellow;
    }      

  }

＆＃13;

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

＆＃13;

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

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

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

但是对于BEM-ify你的代码，你需要决定什么是Block，以及你的html结构中这个块的元素是什么。因此，在您的代码中，您可能还想在链接元素中添加一个类。假设您希望您的块为nav-primary元素，请在链接上使用ie .nav-primary__menulink类：

为什么我的颜色不一样？

然后你的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。并且您不应该使用标记名定位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更改超链接颜色

3 个答案: