Есть ли методология БЭМ, в которой я могу создать заголовок со многими элементами, используя только один div? - PullRequest
0 голосов
/ 13 февраля 2020
<header class="header">
  <div class="logo_place_header></div>
  <div class="header__title-text>Learning how to learn</div>
  <div class="header__subtitle-text><a href="#" class="header__subtitle-link>about 20 words here</a></div>
  <div class="header__main-illustration></div>
  <div class="header__square-pic></div>
</header>

Класс заголовка является гибким контейнером и имеет относительную позицию. Большинство изгибаемых элементов требуют абсолютного позиционирования. Мой вопрос связан с тем, что один из моих инструкторов сказал, что внутри заголовка не следует помещать div, за исключением того, что содержит заголовок__square pi c. Я не понимаю, как еще действовать. Я очень большой ладья ie и прошу прощения за мой вопрос для начинающих. Я знаю, что этот форум полон экспертов.

1 Ответ

1 голос
/ 13 февраля 2020

Ваш инструктор, вероятно, хотел, чтобы вы нашли более подходящие HTML элементы для описания смысла документа, поскольку <div> элементы не являются семантичными c, мы можем вместо этого использовать:

<h1> элемент для представления основного заголовка
элемент <p> для подзаголовка
и элемент <img> для иллюстрации или lo go

Поскольку атрибут class является глобальным атрибутом, мы можете изменять открывающие и закрывающие теги элементов HTML и сохранять соглашения по именованию БЭМ вашего кода

<header class="header">
  <img class="header__logo"></img>
  <h1 class="header__title-text>Learning how to learn</h1>
  <p class="header__subtitle-text><a href="#" class="header__subtitle-link>about 20 words here</a></p>
  <img class="header__main-illustration></img>
  <div class="header__square-pic></div>
</header>

Я бы порекомендовал перейти к понятиям basi c HTML и поиск справочного руководства MDN HTML для элементов и атрибутов .

...