Ответы пользователя по тегу HTML
  • Можно ли делать самостоятельные блоки внутри секции по БЭМ-у?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Да, конечно.
    Но, если вы хотите использовать БЭМ по правилам, а не просто писать классы через чёрточку: когда захотите сделать margin-отступ между .row и .notations, это следует описывать не в классе блока, т. к. «у блока не должно быть внешней геометрии». Можно задать элементы у .container и уже между ними описать margin-отступ:

    <div class="container">
      <div class="container__main">
        <div class="row">…</div>
      </div>
      <div class="container__aside">
        <div class="notations">…</div>
      </div>
    </div>
    Ответ написан
  • Как следует называть модификаторы разных размеров шрифтов по БЕМу?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    С чего вы взяли, что размер шрифта «наследуется» от элемента? Может, это h-заголовок и font-size закономерно «проистекают» от размера заголовка?

    <article class="cart">
      <h3 class="heading heading_size_xxl cart__title">Очень крупный заголовок 90px</h3>
    </article>


    <article class="cart">
      <h3 class="heading heading_size_xl cart__title">Крупный заголовок 80px</h3>
    </article>


    и т. д.

    Рассуждать о БЭМ без дизайна — как чинить компьютер «по фотографии».
    Ответ написан
  • Какой модификатор ставить (БЭМ)?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    По шагам, чтобы была понятен ход мысли:

    1. определим базовый блок
      <div class="header">
        <div class="header__logo"></div>
        <div class="header__nav"></div>
      </div>


      .header {
        background-color: red;
        display: flex;
      }
      
      .header__logo {
        width: 180px;
      }
      
      .header__nav {
        flex: 1; /* вся оставшаяся ширина */
      }


    2. логотип — самостоятельный блок, может использоваться, например, в футере. Я сразу использовал микс на header__logo, но для базового понимания можно внутри header__logo сделать самостоятельный — за счёт БЭМ это ни на что не повлияет.

      <div class="header">
        <div class="header__logo logo">
          <img src="" alt="logo of top digital …" class="logo__image">
          <img src="" alt="Top digital …" class="logo__text">
        </div>
        <div class="header__nav"></div>
      </div>


      .logo {
        display: flex;
        justify-content: space-between;
      }
      
      .logo__image {
        flex: 1;
      }
      
      .logo__text {
        width: 75%;
      }


      За счёт flex-модели logo__image можно использовать без logo__text, получим просто иконку-логотип.


    3. добавляем меню
      <div class="header">
        <div class="header__logo logo">
          <img src="https://via.placeholder.com/43x43" alt="logo of top digital …" class="logo__image">
          <img src="https://via.placeholder.com/134x15" alt="Top digital …" class="logo__text">
        </div>
        <nav class="header__nav nav">
          <ul class="nav__menu list list_of_menu">
            <li class="list__item nav__menu-item">
              <a href="" class="link nav__link">Пункт меню</a>
            </li>
            <li class="list__item nav__menu-item">
              <a href="" class="link nav__link">Пункт меню</a>
            </li>
            <li class="list__item nav__menu-item">
              <a href="" class="link nav__link">Пункт меню</a>
            </li>
            <li class="list__item nav__menu-item">
              <a href="" class="link nav__link">Пункт меню</a>
            </li>
          </ul>
        </nav>
      </div>


      .list_of_menu {
        list-style: none;
      }
      
      .nav__menu {
        display: flex;
      }
      
      .nav__menu-item + .nav__menu-item {
        margin-left: 1em;
      }
      
      .nav__link {
        color: white;
        text-decoration: none;
      }


    4. скорее всего ширина содержимого у header совпадает с шириной содержимого других частей страницы (то, что иногда называют 12-колоночной вёрсткой) — заведём отдельный класс для этого, например, content и обозначим, какое именно содержимое подчиняется этой ширине
      <div class="header">
        <div class="header__content content">
          <div class="header__logo logo">
            <!--        -->
          </div>
          <nav class="header__nav nav">
            <!--        -->
          </nav>    
        </div>
      </div>


      .content {
        width: 800px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
      }




      Результат: https://codepen.io/Realetive/pen/GRoOzeg
    Ответ написан
  • НЕТ общему сбросу стилей в БЭМ! Что в замен?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Cброс делается глобально не в одном файле, а точечно в тех блоках, где это необходимо (это позволяет переиспользовать блоки в разных проектах без неявной зависимости от упомянутых reset.css / normalize.css). Т. е. осознанно дублируя, например, box-sizing: border-box в блоках (элементах, модификаторах), где нам нужно повлиять на размер при использовании padding'ов, мы делаем Абсолютно Независимые Блоки (АНБ) без неявных зависимостей.

    — Даже html и body не сбросить?


    — Наоборот. Можно же сделать так:

    <!-- index.html -->
    <!DOCTYPE html>
    <html>
      <body class="page">
        <!-- page content -->
      </body>
    </html>


    /* page.css */
    html {
      padding: 0;
      margin: 0;
    }
    
    .page {
      padding: 0;
      margin: 0;
    }


    — А как же ul-ки и т.д?


    — Аналогично:

    <ul class="list">
      <li class="list__item">foo
      <li class="list__item">bar
    </ul>


    /* list.css */
    .list {
      margin: 0;
      padding: 0;
      list-style-type: disc;
      list-style-position: inside;
    }
    Ответ написан
  • Правильно ли написан html по Бэм?

    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, а подход миксов позволяет объединять повторяющиеся сущности на блоках, исключая дублирование кода.
    Ответ написан
  • Какой аналог БЭМ актуален для использования в верстке и CSS?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    С недавнего времени (с момента появления на свет лет 8 назад) БЭМ принят ещё некоторыми менее известными командами-энтузиастами типа Google (включая Material Design Lite, android.com), BBC, The Guardian и т. д., пропагандируется крупнейшими международными изданиями по веб-разработке:
    1. site:css-tricks.com bem
    2. site:csswizardry.com bem
    3. site:smashingmagazine.com bem

    Аналогов как к методологии пока не встречал, есть «пограничные» решения, частично решающие какую-то из проблем, учтённых в БЭМ: css-in-js, CSS Modules, WebComponents. А сама формулировка вопроса даёт ощущение, что вы не знакомы с темой вопроса: bem.info — там есть ответы на распространённые заблуждения, включая мнение, что «БЭМ — это про CSS и классы через чёрточку».
    Ответ написан
  • Как лучше закодить такой компонент кнопки по БЭМ?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Цвет не может отвечать за какие-то действия, он может их лишь характеризовать (например, состояния).
    Пример вёрстки советую посмотреть на официальном сайте методологии (ребята потратили уйму времени на поиск оптимального сочетания вложенности к функциональности идекларативности): https://ru.bem.info/platform/libs/bem-components/6...
    P. S. Вообще при любом вопросе, связанном с БЭМ, советую обращаться на bem.info — там есть все ответы (по теме).
    Ответ написан
  • БЭМ. Можно ли так миксовать?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Да, подобный микс допустим.
    Подробнее о миксах: https://ru.bem.info/methodology/key-concepts/#Микс
    и примеры применения: https://ru.bem.info/methodology/block-modification...

    Можно ещё воспользоваться БЭМ-валидатором: https://www.npmjs.com/package/bem-validate
    Ответ написан
  • С помощью каких инструментов можно верстать в компонентном стиле?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Вас не спасёт ни MODX, ни БЭМ, ни React'ы с Angular'ами. Если использование инструментов сборки вызывают сложности — не используйте. Целесообразность их использования приходит лишь с опытом понимания того, что вы реально можете автоматизировать, от «магии» толку мало.
    Это я вам говорю, как адепт БЭМ-стека (ага, того самого, из Яндекса) и амбассадор MODX.
    Ответ написан
  • Как сделать чтобы select открывался вверх?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Вам нужно переопределить directions попапа в шаблоне по умолчанию: https://github.com/bem/bem-components/blob/v6.0.0/...
    Ответ написан
  • Как правильно сделать с точки зрения БЭМ?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    На самом деле всё проще, достаточно использовать модификаторы:

    <!-- Первый слайдер -->
    <div class="slider slider_promo">
        <div class="slider__track">
            <div class="slider__slide"></div>
        </div>
        <div class="slider__arrows"></div>
    </div>
    
    <!-- Второй слайдер -->
    <div class="slider slider_grid">
        <div class="slider__meta">
            <div class="slider__description"></div>
        </div> 
        <div class="slider__track">
            <div class="slider__slide"></div>
        </div>
        <div class="slider__arrows"></div>
    </div>
    Ответ написан
  • Почему не создаются псевдоэлементы?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    MODX тут ни при чём. Чтобы работали псевдоэлементы, обязательно должно быть свойство content:
    .work-item__model-1::before {
      content: '';
      /* … */
    }
    Ответ написан
  • Привязка элементов страниц ресурса А к некоторым страницам ресурса В в MODX?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Похоже на возможность Taxonomies (видео прилагается).
    Ответ написан
  • Генерация необходимого количества dots вместе с images через MIGX?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Самое банальное решение — повторный вызов [[getImageList]] с тем же TV, но новым &tpl для точек-индикаторов. В каждом шаблоне доступны дополнительные плейсхолдеры, от которых можно плясать, например:
    <li data-target="#swiper" data-slide-to="[[+idx:decrement]]" [[+id:is=`1`:then=`class="active"`:else=``]]>

    Фильтр :decrement уменьшает значение на 1, т. к. у getImageList счёт почему-то начинается с единицы. второй плейсхолдер проверяет условие, что если это первый элемент, назначить ему класс active.
    Ответ написан
  • Как сниппетами можно генерировать свою разметку с классами в MODX?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Читай документацию — там всё написано: docs.modx.pro/components/pdotools/snippets/pdomenu , раздел Параметры CSS классов, двадцать четвёртым пикселем заголовок написан. Как только возникнет следующий вопрос — читай документацию. Если не нашёл ответ — читай документацию. Если хочешь понять, как работает — смотри в исходники.
    P. S. Ты где вообще такой синтаксис откопал: [[+class='nab-btns']]?
    Ответ написан
  • Как заставить ModX выдавать браузеру минимизированный html код?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Дополню ответ Sanes:
    для минификации (обфускации) кода можно использовать несколько методов:
    • клиентский, когда преобразование происходит на компьютере разработчика. Я использую для этого Gulp-стек, который не только оптимизирует код, но и проверяет стили код, отслеживает ошибки, «склеивает» стили и скрипты, генерирует спрайты, фавиконки и необходимые фолбеки, вырезает неиспользуемые стили, разруливает зависимости библиотек и обновляет их до требуемых версий. Это правильный подход, так как снижает нагрузку на сервер.
    • Серверный. Например, PageSpeed модуль от Google для Apache и Nginx.
    • Инструменты окружения (вышеупомянутый MinifyX на базе Munee под PHP);

    Оптимальный результат достигается при сочетании первых двух подходов.
    Ответ написан
  • Как MODx с точки зрения на СЕО?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Я, наверное, вас разочарую, но CMS/CMF-движки не имеют отношения к поисковой оптимизации (SEO). Поисковым роботам абсолютно безразлично, какую технологию вы используете, они учитывают другие параметры. Задача CMS — лишь помочь вам в этом. То есть «запороть» сайт и понизить его рейтинг можно на любом движке. На своём опыте могу сказать, что в MODX Revolution есть отличная система кэширования, которая положительно воспринимается поисковиками, т. к. увеличивает скорость генерации и загрузки страниц, система минификации и «склеивания» скриптов и стилей MinifyX (вообще, эти задачи должны решаться до выгрузки файлов на сервер, но если лень …), ЧПУ-генерация, коды ошибок 403 и 404, автогенерация Sitemap и прочее. По этому вопросу книгу можно написать, если честно — куча практик хороших и не очень.
    WordPress — отличная CMS, но она в какой-то мере ограничивает разработчика дополнениями, если их функционал приходится изменять или расширять. Архитектура MODX позволяет контролировать вывод любого дополнения (если автор соблюдает парадигму, конечно), но я бы советовал, если выберите его, обратить внимание на Revolution-ветку, т. к. предшественник, Evo, официально прекратил свое существование и больше не развивается.
    P. S. Кстати, MODX Revo гораздо безопаснее в плане защиты от взлома.
    Ответ написан