BEM 방법론에 따른 HTML 및 CSS 리팩토링

Question

기존 코드를 리팩토링하고 BEM 명명 규칙을 구현하고 싶습니다.

그러나 코드를 BEM 규칙/요구 사항에 맞는 태그로 변환하는 데 어려움이 있습니다. 특히 중첩 된 요소 인 .

나는 다음과 같은 질문에 대한 답을 찾고 있어요 :

1. BEM 방법에 중첩 된 요소의 이름을 지정 적절한 방법은 무엇입니까?
2. 수정/중첩에서 요소의 이름을 변경하고 재사용 가능한 상태로 유지하려면 요소의 이름을 어떻게 지정해야합니까?

기존 코드 : (바이올린 : 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
• ComponentName.modifierName
• ComponentName-descendantName
• ComponentName-descendantName.modifierName

성분은 블록 후손 집단.

"Header-nav"및 "Header-social"클래스는 "Header"에 "Nav"및 "Social"을 배치하는 역할을합니다.

"ob-clearfix"에 대한주의 사항 : 수정자는 BEM 방법론을 따르지 않기 때문에 구성 요소와 독립적으로 스타일을 지정하면 안됩니다. 그래서, OOCSS 객체와 같은 횡단 클래스, 여기 내가 사용하는 구문은 다음과 같습니다

• myPrefix -...