Question

我想重构现有代码并实现BEM命名约定。

但我在将代码转换为符合BEM约定/要求的标记方面遇到了困难，特别是嵌套元素。

我正在寻找以下问题的答案：

在BEM方法中命名嵌套元素的正确方法是什么？
如何命名元素以使其在修改/嵌套中缩放并保持可重用？

现有代码：（小提琴：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>

Answer 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>

我在an article in french中描述了这种语法：

组件名
ComponentName.modifierName
组件名-descendantName
组件名-descendantName.modifierName

组件是块，后代是元素。

“Header-nav”和“Header-social”这两个课程应该用于将“Nav”和“Social”定位在“Header”中。

关于“ob-clearfix”的注释：修饰符不应独立于其组件设置样式，因为它不符合BEM方法。因此，对于像OOCSS对象这样的横向类，这里是我使用的语法：

myPrefix -...

根据BEM方法进行HTML和CSS重构

1 个答案: