0

既存のコードをリファクタリングして、BEM 命名規則を実装したいと考えています。

しかし、特にネストされた要素を使用して、コードを BEM の規則/要件に適合するマークアップに変換する際に困難に直面しています。

次の質問に対する答えを探しています。

  1. BEM方法論でネストされた要素に名前を付ける適切な方法は何ですか?
  2. 変更/ネストでスケーリングし、再利用可能にするには、要素にどのように名前を付ける必要がありますか?

既存のコード: (Fiddle: http://jsfiddle.net/karltynan/msavvhp9/ )

<header class="lHeader">
  <div class="lHeaderInner clearfix">
    <h1 class="lHeaderLogo"><a class="link" href="/">Site Name</a></h1>

    <nav class="lNav">
      <div class="lNavInner clearfix">
        <h1 class="lNavTitle">Menu</h1>
        <div class="lNavContent">
          <ul class="list clearfix">
            <li class="level1 home"><a class="link" href="/">Home</a></li>
            <li class="level1"><a class="link" href="/about/">About</a></li>
            <li class="level1 login alt"><a class="link" href="/about/">Login</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <nav class="lSocial account">
      <div class="lSocialInner clearfix">
        <ul class="list clearfix">
          <li class="level1 twitter"><a class="link" href="#">Twitter</a></li>
          <li class="level1 facebook"><a class="link" href="#">Facebook</a></li>
          <li class="level1 googlePlus"><a class="link" href="#">Google+</a></li>
        </ul>
      </div>
    </nav>

  </div>
</header>

試みたコード: (フィドル: http://jsfiddle.net/karltynan/hd7r0n3a/ )

<header class="header">
  <div class="header__inner clearfix">
    <h1 class="logo"><a class="link" href="/">Site Name</a></h1>

    <nav class="nav">
      <div class="nav__inner clearfix">
        <h1 class="nav__title">Menu</h1>
        <div class="nav__content">
          <ul class="menu clearfix">
            <li class="menu__item menu__item--home"><a class="link" href="/">Home</a></li>
            <li class="menu__item"><a class="link" href="/about/">About</a></li>
            <li class="menu__item menu__item--login menu__item--alt"><a class="link" href="/about/">Login</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <nav class="social account">
      <div class="social_inner clearfix">
        <ul class="menu clearfix">
          <li class="menu__item menu__item--twitter"><a class="link" href="#">Twitter</a></li>
          <li class="menu__item menu__item--facebook"><a class="link" href="#">Facebook</a></li>
          <li class="menu__item menu__item--googlePlus"><a class="link" href="#">Google+</a></li>
        </ul>
      </div>
    </nav>

  </div>
</header>
4

1 に答える 1

1

別の BEM 構文を使用すると、次のようになります。

<header class="Header">
  <div class="Header-inner ob-clearfix">
    <h1 class="Header-logo"><a class="ob-link" href="/">Site Name</a></h1>

    <nav class="Header-nav Nav">
      <div class="Nav-inner ob-clearfix">
        <h1 class="Nav-title">Menu</h1>
        <div class="Nav-content">
          <ul class="Menu ob-clearfix">
            <li class="Menu-li level1 home"><a class="ob-link" href="/">Home</a></li>
            <li class="Menu-li level1"><a class="ob-link" href="/about/">About</a></li>
            <li class="Menu-li level1 login alt"><a class="ob-link" href="/about/">Login</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <nav class="Header-social Social">
      <div class="Social-inner ob-clearfix">
        <ul class="Menu ob-clearfix">
          <li class="Menu-li level1 twitter"><a class="ob-link" href="#">Twitter</a></li>
          <li class="Menu-li level1 facebook"><a class="ob-link" href="#">Facebook</a></li>
          <li class="Menu-li level1 googlePlus"><a class="ob-link" href="#">Google+</a></li>
        </ul>
      </div>
    </nav>
  </div>
</header>

この構文については、フランス語の記事で説明しました。

  • コンポーネント名
  • ComponentName.modifierName
  • ComponentName-descendantName
  • ComponentName-descendantName.modifierName

コンポーネントはブロックであり、子孫は要素です。

クラス「Header-nav」および「Header-social」は、「Header」に「Nav」および「Social」を配置するのに役立つ必要があります。

「ob-clearfix」に関する注意: 修飾子は、BEM 方法論に準拠していないため、コンポーネントとは別にスタイルを設定しないでください。したがって、OOCSS オブジェクトのような横断クラスの場合、私が使用する構文は次のとおりです。

  • myPrefix-...
于 2014-09-10T07:44:14.960 に答える