Правильно ли понял БЭМ?

Question

[sdasdas_93]

Я знаю что похожие вопросы поднимались и не раз, но в каждом из них давались отличающиеся друг от друга ответы. Так как я нахожусь на этапе изучения верстки и БЭМа в целом, прошу помощи. Правильно ли я понял принципы БЭМ, если рассматривать приведенный мною ниже код? Заранее благодарен за любую помощь.

<header class="header">
    <div class="container">
      <div class="logo">
        <a href="#" class="logo__url"><img src="images/logo.png" alt="" class="logo__icon"></a>
      </div>
      <ul class="main-nav">
        <li class="main-nav__item"><a href="#" class="main-nav__url main-nav__url_current">Home</a></li>
        <li class="main-nav__item"><a href="#" class="main-nav__url">Item-2</a></li>
        <li class="main-nav__item"><a href="#" class="main-nav__url">Item-3</a></li>
        <li class="main-nav__item"><a href="#" class="main-nav__url">Item-4</a></li>
        <li class="main-nav__item"><a href="#" class="main-nav__url">Item-5</a></li>
        <li class="main-nav__item"><a href="#" class="main-nav__url">Item-6</a></li>
      </ul>
    </div>
  </header>

  <footer class="footer">
    <div class="container">
      <div class="footer-column">
        <h3 class="footer-column__title">Navigation</h3>
        <ul class="footer-column__nav">
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-1</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-2</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-3</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-4</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-5</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-6</a></li>
        </ul>
      </div>
      <div class="footer-column">
        <h3 class="footer-column__title">Services</h3>
        <ul class="footer-column__nav">
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-1</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-2</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-3</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-4</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-5</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-6</a></li>
        </ul>
      </div>
    </div>
  </footer>

Answer 1

[Виталий Першин]

Противоречиво... С одной стороны, если вы не собираетесь это нигде переиспользовать, то можно смириться.
С другой стороны методология БЭМ как раз и нужна для того чтобы поделить сайт на части и вставлять их в любое место. Зачем объявлять блок footer-column, если он все равно по именованию является элементом footer. В данном контексте footer-column можно называть footer__column, footer-column__title можно назвать footer__title и т.д.. так как они все равно завязаны на footer. Вот если вы footer-column назовете например box то вы по всем правилам объявите независимый блок и сможете его использовать в любом месте сайта и вложенные в него элементы типа box__nav, box__item, box__url. А примиксовав к нему footer__box вы сможете задать значения зависимые от окружения

Answer 2

[BigSmoke]

Вместо container наверное лучше header__inner и footer__inner использовать, хотя это от конкретного макета зависит. Ну и миксов у вас не видно, а они наверняка в такой разметке должны быть. А в остальном все ок.

Comments

[Rico Man]

лучше .header__container .container на одном уровне.
не будешь же ты писать для каждого inner в хедере и футере - цсс...