Кто может помочь с бэм css?

Question

[HamSter]

Пытаюсь разобраться с бэм css, но многое не понятно!
К примеру есть блок

<article class="page-article">
      <header class="article__header">
        <h1 class="article-title">Hello,world</h1>
        <span class="article__meta">Lorem ipsum dolor.</span>
      </header>
      <div class="article-img__wrpa">
        <img src="https://static.jsbin.com/images/dave.min.svg" alt="" class="article-img">
      </div>
      <div class="article-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos veniam rem nihil qui facilis dolores labore repellat, voluptate asperiores rerum!</p>
      </div>
    </article>

Помогите, пожалуйста, поправить его.

И правильно ли я понимаю, что в стилях использование такой записи article header h1 { ... }при бэм уже является не приемлемым?

Answer 1

[Damir Aushenov]

я бы в свой верстки такой бы код использовал

<article class="page-article">
    <header class="page-article__header">
     <div class="article-title">
       <h1 class="article-title__title">Hello,world</h1>
       <span class="article-title__meta">Lorem ipsum dolor.</span>
     </div>
    </header>
    <div class="page-article__image">
      <div class="article-image">
        <img src="https://static.jsbin.com/images/dave.min.svg" alt="" class="article-img" alt="" class="article-image__image">
      </div>
    </div>
    <div class="page-article__content">
      <p class="article-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos veniam rem nihil qui facilis dolores labore repellat, voluptate asperiores rerum!</p>
      </p>
    </div>   
  </article>

Answer 2

[Павел Гоголинский]

Вот хорошее видео по наименованию в БЭМ