Задать вопрос
@ferdasfarmazone
Верстальщик!
html

Правильно ли написан html по Бэм?

Живой пример

<div class="site"><!-- header BEGIN -->
      <header class="header">
        <div class="container">
          <div class="header__inner"><a class="logo header__logo" src="/"><img class="logo__img" src="images/logo.svg" alt="Likigram" title="Likigram"></a>
            <nav class="nav" role="navigation"><a class="nav__link" src="#">Buy Instagram Likes</a><a class="nav__link" src="#">Buy Instagram Followers</a><a class="nav__link" src="#">Buy Instagram Views</a><a class="nav__link" src="#">Get Free Likes</a><a class="nav__link" src="#">Instagram Downloader</a><a class="nav__link" src="#">Support</a></nav>
          </div>
        </div>
      </header><!-- header END -->
<!-- banner BEGIN -->
      <section class="banner">
        <div class="container">
          <div class="banner__inner">
            <div class="banner__info">
              <h1 class="banner__title">Get Real Instagram likes, followers and views!</h1>
              <p class="banner__paragraph">Buy instagram likes, instagram followers and instagram views for your account.</p>
              <p class="banner__paragraph">Grow your instagram account quickly with Likigram</p>
            </div>
            <div class="banner__actions"><img class="banner__img" src="images/banner-img-1.png" alt="banner img"><a class="button button_medium button_background_orange banner__button" src="#price-followers">Grow Your Instagram Account</a></div>
          </div>
        </div>
      </section><!-- banner END -->
<!-- footer BEGIN -->
      <footer class="footer">
        <div class="container">
          <div class="footer__inner">
            <div class="footer__info">
              <div class="logo footer__logo"><img class="logo__img" src="images/footer-logo.png" alt="Likigram" title="Likigram"></div>
              <div class="copyright footer__copyright">© 2019, Likigram All rights reserved</div>
              <div class="payments"><img class="payments__img" src="images/payments.png" title="We accept payments via Visa Mastercard and Paypal" alt="We accept payments via Visa Mastercard and Paypal"></div>
            </div>
            <div class="footer__menu">
              <ul class="footer__nav">
                <li class="footer__nav-item"><a class="footer__nav-link" src="#">Contact Us</a></li>
                <li class="footer__nav-item"><a class="footer__nav-link" src="#">Support</a></li>
                <li class="footer__nav-item"><a class="footer__nav-link" src="#">Blog</a></li>
                <li class="footer__nav-item"><a class="footer__nav-link" src="#">Terms and Conditions</a></li>
                <li class="footer__nav-item"><a class="footer__nav-link" src="#">Privacy Policy</a></li>
                <li class="footer__nav-item"><a class="footer__nav-link" src="#">Refund Policy</a></li>
              </ul>
              <ul class="footer__nav">
                <li class="footer__nav-item"><a class="footer__nav-link" src="#">Buy Instagram Likes</a></li>
                <li class="footer__nav-item"><a class="footer__nav-link" src="#">Buy Instagram Followers</a></li>
                <li class="footer__nav-item"><a class="footer__nav-link" src="#">Buy Instagram Views</a></li>
                <li class="footer__nav-item"><a class="footer__nav-link" src="#">Get Free Followers</a></li>
                <li class="footer__nav-item"><a class="footer__nav-link" src="#">Get Free Likes</a></li>
                <li class="footer__nav-item"><a class="footer__nav-link" src="#">Instagram Downloader</a></li>
                <li class="footer__nav-item"><a class="footer__nav-link" src="#">About Likigram</a></li>
              </ul>
            </div>
          </div>
        </div>
      </footer><!-- footer END -->
  • Вопрос задан
  • 1106 просмотров
4 комментария
Подписаться 1 Простой 4 комментария
Решения вопроса 1
Realetive
@Realetive
MODX Ambassador России, самозванный БЭМ-евангелист
Почти. Но вы упустили важный приём в методологии — Миксы. Они позволят создавать переиспользуемый блоки повторяющихся сущностей (параграфы, картинки, заголовки) в других частях страницы:

<div class="site">
  <header class="header">
    <div class="header__container container">
      <div class="header__inner">
        <a class="logo header__logo" src="/"><img class="logo__img img" src="images/logo.svg" alt="Likigram" title="Likigram"></a>
        <nav class="nav" role="navigation">
          <a class="nav__link link" src="#">Buy Instagram Likes</a>
          <a class="nav__link link" src="#">Buy Instagram Followers</a>
          <a class="nav__link link" src="#">Buy Instagram Views</a>
          <a class="nav__link link" src="#">Get Free Likes</a>
          <a class="nav__link link" src="#">Instagram Downloader</a>
          <a class="nav__link link" src="#">Support</a>
        </nav>
      </div>
    </div>
  </header>
  <section class="banner">
    <div class="banner_container container">
      <div class="banner__inner">
        <div class="banner__info">
          <h1 class="banner__title heading heading_size_l">Get Real Instagram likes, followers and views!</h1>
          <p class="banner__paragraph paragraph">Buy instagram likes, instagram followers and instagram views for your account.</p>
          <p class="banner__paragraph paragraph">Grow your instagram account quickly with Likigram</p>
        </div>
        <div class="banner__actions">
          <img class="img banner__img" src="images/banner-img-1.png" alt="banner img">
          <a class="button button_medium button_background_orange banner__button" src="#price-followers">Grow Your Instagram Account</a>
        </div>
      </div>
    </div>
  </section>
  <footer class="footer">
    <div class="footer_container container">
      <div class="footer__inner">
        <div class="footer__info">
          <div class="logo footer__logo"><img class="img logo__img" src="images/footer-logo.png" alt="Likigram" title="Likigram"></div>
          <div class="copyright footer__copyright">© 2019, Likigram All rights reserved</div>
          <div class="payments"><img class="payments__img" src="images/payments.png" title="We accept payments via Visa Mastercard and Paypal" alt="We accept payments via Visa Mastercard and Paypal"></div>
        </div>
        <div class="footer__menu">
          <ul class="footer__nav list nav">
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Contact Us</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Support</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Blog</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Terms and Conditions</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Privacy Policy</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Refund Policy</a></li>
          </ul>
          <ul class="footer__nav list nav">
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Buy Instagram Likes</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Buy Instagram Followers</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Buy Instagram Views</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Get Free Followers</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Get Free Likes</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Instagram Downloader</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">About Likigram</a></li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</div>


Визуально кода стало больше, но во-первых эту проблему сводит на «нет» gzip, а во-вторых — больше кода всё равно генерируется для CSS, а подход миксов позволяет объединять повторяющиеся сущности на блоках, исключая дублирование кода.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Верстальщик HTML
MST
от 450 $
Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер
BYTIME
от 120 000 ₽
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Интервью в Гугл Мит
24 дек. 2024, в 16:38
500 руб./за проект
Заказывали услуги у фрилансеров?
24 дек. 2024, в 16:37
500 руб./за проект
Если вы заказывали фриланс-услуги, то вам ко мне
24 дек. 2024, в 16:36
500 руб./за проект
Ещё заказы