我想重构现有代码并实现BEM命名约定。
但我在将代码转换为符合BEM约定/要求的标记时遇到了困难,尤其是在嵌套元素的情况下。
我正在寻找以下问题的答案:
- 在BEM方法中,命名嵌套元素的正确方法是什么
- 我应该如何命名元素以使其在修改/嵌套中具有伸缩性并保持可重用性
现有代码:(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>
尝试的代码:(Fiddle: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>
使用替代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>
我在一篇法语文章中描述了这种语法:
- 组件名称
- 组件名称.modifierName
- 组件名称descendantName
- 组件名称-场景名称.modifierName
构件是块,子体是元素。
类"Header nav"one_answers"Header social"应用于在"Header"中定位"nav"one_answers"social"。
关于"ob clearfix"的注意事项:修饰符不应独立于其组件进行样式设置,因为它不符合BEM方法。因此,对于像OOCSS对象这样的横向类,以下是我使用的语法:
- myPrefix-