0

BEM 手法を使用して CSS を作成する人向け。私は BEM を学ぼうとしていて、簡単な例から始めています。私はこれを持っています:

HTML

<div class="content">
  <ul class="menu menu_vertical">
    <li class="menu__item"><a href="" class="menu__link">Link Y</a></li>
    <li class="menu__item"><a href="" class="menu__link">Link Y</a></li>
    <li class="menu__item"><a href="" class="menu__link">Link Y</a></li>
  </ul>
</div>

CSS

.menu {
  padding: 0;
}
.menu__item {
  list-style: none;
  display: inline-block;
  width: 20%;
}
.menu__link {
  padding: 10px 0;
  display: block;
  border: 1px solid gray;
  border-top: 0;
  border-bottom: 0;
  text-align: center;
  color: #0077BB;
  text-decoration: none;
}

ご覧のとおり、これは単純な水平ナビゲーション メニューのはずですが、垂直にしたいのです。BEMによると（私が理解している限り）、Modifier、この場合は のようなものを使用し.menu_vertical、スタイルを追加して垂直にする必要があります。つまり、ネストされたを使用しないとそれを行う方法が見つかりませんセレクター (この方法論では推奨されていません) があり、いくつかの競合が発生しています。ここで何をすべきですか?

4

1 に答える 1

2

修飾子を使用してブロック要素に影響を与えることは、ネストされたセレクターが受け入れられる 1 つのケースです。http://getbem.com/faq/#block-modifier-affects-elementsを参照してください。そのため、それは非常に問題ありません

.menu--vertical .menu__item {
    ...
}

--など。通常、 の代わりに修飾子に使用されることに注意してください__。

于 2015-11-09T09:37:11.387 に答える