Ответы пользователя по тегу HTML
  • Актуальность префиксов БЭМ l- b- h- g- js-?

    @ilyarsoftware
    Из истории развития БЭМ https://ru.bem.info/methodology/history/
    2005 год... Классам блоков мы добавили префиксы (b-, c-, g-), чтобы отличать их от внутренних классов...

    Настоящие
    Исторически они появились в переходный период для того, чтобы отличать новый код, написаный по БЭМ, от старого. Со временем мы от них отказались.
    https://ru.bem.info/forum/158/ и https://ru.bem.info/forum/806/

    Соглашение по именованию/Имя блока:
    Иногда к именам блоков могут добавляться различные префиксы.


    Если префиксы решают вашу проблему, значит использовать их надо.

    Дополнительно процитирую заметку "Почему CSS-модули не могут заменить БЭМ":
    Часто слышу, как разработчики говорят «БЭМ не нужен, ведь есть CSS-модули». Это не так.

    Корень этого заблуждения кроется в том, что люди воспринимают БЭМ как CSS-методологию. На самом деле БЭМ это набор универсальных принципов, которые можно применять независимо от используемых технологий, будь то CSS, Sass, HTML, JavaScript или React. БЭМ решает множество задач, в число которых входят именование CSS-классов, подход к разделению интерфейса на независимые части и изоляция стилей для этих независимых частей.

    CSS-модули это инструмент, который решает только проблему изоляции стилей. Все остальные проблемы остаются нерешёнными: вам всё ещё нужны какие-то правила для разделения интерфейса на независимые части и всё ещё нужно придумывать названия классов. Поэтому CSS-модули можно и нужно применять вместе с БЭМом.

    Эволюция выглядит так:
    /* Классический БЭМ с длинными именами классов для обеспечения изоляции */
    
    .shop-cart-button {}
    .shop-cart-button_size_small {}
    .shop-cart-button_size_large {}
    
    
    /* CSS-модули с неограниченной свободой творчества в именах классов */
    
    .button {}
    .small {}
    .large {}
    /* или */
    .button {}
    .is-small {}
    .is-large {}
    /* или */
    .button {}
    .size-small {}
    .size-large {}
    
    
    /* БЭМ и CSS-модули */
    
    .button {}
    .button_size_small {}
    .button_size_large {}

    Сразу отвечу на вопрос «а чем плох пример с классами .button, .small и .large?». Он плох тем, что классы .small и .large сами по себе не несут информации о том, к чему они относятся. Нельзя понять, стилизуют ли они отдельный элемент или описывают состояние существующего элемента. Также такие названия классов рано или поздно снова приведут вас к проблеме уникальности имён. Например, вы пишете стили для модального окна. Вам нужно стилизовать полупрозрачный оверлей поверх страницы и само модальное окно. Оба этих элемента могут быть в двух состояниях: виден или скрыт. Кажется, что класс .visible отлично подходит, но проблема в том, что для оверлея и для окна этот класс должен содержать разные стили. Можно придумать костыль в виде селекторов .overlay.visible и .window.visible, но это именно костыль, потому что вы увеличиваете специфичность. С БЭМом всё просто и без ненужного роста специфичности: .overlay_visible и .window_visible.
    Ответ написан
    Комментировать
  • Как удалить атрибут из выходного HTML?

    @ilyarsoftware
    Параметр clean-eip-attributes = "1" удаляет только атрибуты Edit-in-place.
    Ваша проблема в ответственности XSLT.
    Для решения в шаблонах используя атрибут exclude-result-prefixes, надо исключить ненужные неймспейсы:

    <xsl:stylesheet version="1.0"
    			xmlns="http://www.w3.org/1999/xhtml"
    			xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    			xmlns:date="http://exslt.org/dates-and-times"
    			xmlns:udt="http://umi-cms.ru/2007/UData/templates"
    			xmlns:umi="http://www.umi-cms.ru/TR/umi"
    			exclude-result-prefixes="xsl date udt umi">
    Ответ написан
    4 комментария
  • Правильно ли писать так (бем)?

    @ilyarsoftware
    header_logotype_link и header_logotype_image модификаторы блока («ключ-значение», если следовать Соглашение по именованию), а используются как самостоятельные единицы, их задача отражать модификацию именно блока: <section class="header header_logotype_image">, но данном случае будет мало смысла.

    Будет более верно для ссылки и картинки использовать самостоятельный блок, а для отражения специфичности модификатор, например:

    <!-- .header -->
    <section class="header">
      <div class="container">
        <div class="header__top">
          <div class="header__logotype">
            <a href="#" class="link link_type_header">
               <img src="_tmp/logotype.png" alt="Casino" class="image image_type_header">
            </a>
          </div>
        </div>
      </div>
    </section>
    <!-- /.header -->


    .header {
        &__top {}
        &__logotype {}
    }
    .link {
        &_type {
           &_header {}
        }
    }
    .image {
        &_type {
           &_header {}
        }
    }


    Или использовать микс (на мой взгляд, такой подход поддерживать проще):

    <!-- .header -->
    <section class="header">
      <div class="container">
        <div class="header__top">
          <div class="header__logotype">
            <a href="#" class="header__link link">
              <img src="_tmp/logotype.png" alt="Casino" class="header__image image">
            </a>
          </div>
        </div>
      </div>
    </section>
    <!-- /.header -->


    .header {
        &__top {}
        &__logotype {}
        &__link {}
        &__image {}
    }
    .link {}
    .image {}


    Еще стоит подумать на тем, что логотип может быть не только в шапке, т.е. он может потребоваться в другом контексте, значит его следует реализовать самостоятельным блоком (подробнее об этот тут «Как в принципе отличать, где блок, а где элемент?»).
    Ответ написан
    Комментировать
  • Как по БЭМ написать элемент в блоке с модификатором?

    @ilyarsoftware
    Добавив модификатор к блоку .container--parallax {} можно учитывать его наличие в реализации всех элементов блока .container--parallax .container__title {}.

    ...каскад уместен, чтобы менять элементы в зависимости от состояния блока... Вкладывание элементов в элементы и другие тонкости


    Добавляя модификатор для элемента .container__title--parallax {} мы сужаем область действия модификации только на элемент.

    Как как именно поступать решать вам, это зависит от потребностей, методология не решает подобные вопросы.
    Ответ написан
    Комментировать
  • Как добавить счётчик на UMI.CMS через FTP?

    @ilyarsoftware
    Есть макрос %system googleAnalyticsCode()% — выводит код для сбора статистики Google Analytics, тут Вставка кода GoogleAnalytics в XSLT-шаблоны описано два способа, как пользоваться макросом и как вставить код непосредственно в шаблон (подойдет для любого типа счетчика), пример Добавление счетчика liveinternet.

    Какой у вас шаблон смотрите в Модуль "Структура"/Настройки модуля "Структура".

    И последнее смотрите документ Формат хранения шаблонов.
    Ответ написан
    Комментировать
  • Возможен dom в json формате?

    @ilyarsoftware
    Да это возможно, например BEMJSON:
    {
      tag : 'div',
      attrs : {
        id : 'anchor1',
        name : 'BEM',
      },
      content : [
        {
          tag : 'div',
          attrs : {
            id : 'anchor2',
            name : 'BEM 2',
          },
          content : 'BEM text'
        },
      ]
    }

    После прогона через стандартные шаблоны BEMHTML получим (живой пример):
    <div id="anchor1" name="BEM">
        <div id="anchor2" name="BEM 2">BEM text</div>
    </div>


    Еще может быть для вашей задаче подойдет BEMTREE. При помощи BEMTREE описывается шаблон обработки JSON-данных, который преобразует данные в BEMJSON и далее через BEMHTML получаем HTML. Пример:

    Есть данные:

    {
      "content": "BEM Block!",
      "title": "I am BEM"
    }


    Описываем трансформацию данных в BEMJSON на технологии BEMTREE:

    block( 'someBlock' )(
      def()( function () {
        var data = this.ctx.data || {};
        this.ctx.content = [
          { elem : 'title', content : data.title || 'Empty title' },
          { elem : 'content', content : data.content || 'Empty content' },
        ];
        return applyNext();
      } )
    );


    После применения на данных мы получим BEMJSON, останется только применить BEMHTML. Это и есть двухпроходная шаблонизация.

    Тут jsfiddle.net/ilyar/5dw8Q и тут https://goo.gl/GRGSFf — живой пример применения BEMTREE в браузере (можно и на сервере применяя те же шаблоны).
    Ответ написан
    1 комментарий
  • Альтернатива html шаблонизотру от Bem?

    @ilyarsoftware
    Любой, а точнее в вашем случае с поддержкой JSON, например NANO, хотя, грубо говоря, ближе к BH/BEMHTML, можно назвать json2html, пример использования json2html с CSS из bem-components:

    var data = [
      {
        'text': 'BEM — BEM Easy Makeup',
        'url': 'https://ru.bem.info/',
      },
    ];
    
    var template = {
      tag: 'a',
      class: 'button button_theme_islands button_size_xl',
      href: '${url}',
      children: [
        {
          tag: 'span',
          class: 'icon icon_social_twitter',
        },
        {
          tag: 'span',
          class: 'button__text',
          html: '${text}',
        },
      ]
    };
    document.body.innerHTML = json2html.transform( data, template );

    Демо на jsfiddle

    Уверен есть и другие, но все они не будут знать про БЭМ-термины и поэтому придется добавить хеперов для работы с боками, элементами, модификаторами и пр.

    На текущий момент мне не известно ничего удобнее BH/BEMHTML, но если такой шаблонизатор появится, его опубликуют в разделе bem.info/Проекты на БЭМ.
    Ответ написан
    Комментировать