Можете указать на ошибки в hml БЄМ?

Question

[mukzer]

Можете пожалуйста указать на ошибки в html, именно по БЭМ, я не уверен что правильно его написал...
github
не помещается здесь весь html код...

Comments

[Антон Литвиненко]

И поэтому он в сжатом виде на гите. Надо было в архив с паролем засунуть

[mukzer]

Антон Литвиненко, У меня вот в папке src/components блоки кода не минифицированы https://github.com/qmorozov/Cucina-Preferita/tree/...

[Антон Литвиненко]

mukzer, так это надо писать в вопросе, никому не интересно перерывать чужой бандл

[mukzer]

Антон Литвиненко, Извините, там было слишком много кода, habr не принимал его) Разве что создавать много вопросов одинаковых, но с разным кодом)

[Антон Литвиненко]

mukzer, серьёзно, думаете кто-то будет читать простыню такого размера, что даже хабр её не принял?

Answer 1

[n1ksON]

<div class="portfolio__item mix slug paint">
  <a class="portfolio__item-link" href="product-page.html" aria-label="Portfolio photo">
    <img class="portfolio__item-img lazyload" data-src="images/content/portfolio-3.jpg" alt="portfolio-img">
    <div class="portfolio__item-hover">
      <div class="portfolio__item-info">
        <h3 class="portfolio__item-title">Кухня Модерн</h3>
        <h4 class="portfolio__item-subtitle">пластик-шпон</h4>
      </div>
      <p class="portfolio__item-code">артикул 13428</p>
    </div>
  </a>
</div>

Правильнее сделать было так или типа того:

<div class="portfolio-item mix slug paint">
  <a class="portfolio-item__link" href="product-page.html" aria-label="Portfolio photo">
    <img class="portfolio-item__img lazyload" data-src="images/content/portfolio-3.jpg" alt="portfolio-img">
    <div class="portfolio-item__wrapper_hover">
      <div class="portfolio-item__info">
        <h3 class="portfolio-item__title">Кухня Модерн</h3>
        <h4 class="portfolio-item__subtitle">пластик-шпон</h4>
      </div>
      <p class="portfolio-item__code">артикул 13428</p>
    </div>
  </a>
</div>

Comments

[Realetive]

А в идеале, скорее всего, вот такой вариант:

<div class="portfolio__item portfolio-item mix slug paint">
  <!--  дальше всё идентично, как написал @n1ksON -->
</div>

Пояснение — мы делаем микс самостоятельной и независимой (скорее всего повторяющейся) сущности-блока portfolio-item с верхнеуровневой сущностью — элементом item блока portfolio. В стилях portfolio__item будут описаны внешняя геометрия (отступы, размеры)б характерные для этого элемента, а в стилях portfolio-item — оформление этого блока как самостоятельной сущности (внутренние отступы, размеры шрифта, цвета и т д).