Ответы пользователя по тегу 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
    Подскажите, для чего в БЭМ т.н. "первый уровень вложенности", то есть "блок__элемент"?


    "блок__элемент" отражает только принадлежность элемента к блоку и не никак не относится к вложенности.

    Зачем весь этот цирк с двойным подчеркиванием и якобы вложенностью, но запретом на ее использование?


    Вложенность не запрещена и реализуется на уровне HTML т.е. так где мы мы естественно можем отразить структуру, поподробнее в посте: Вкладывание элементов в элементы и другие тонкости и ответ на вопрос: Почему нежелательно использовать вложенные селекторы?.

    А для чего вводить двойное подчеркивание, если элемент может быть с указанным родителем в качестве модификатора?


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

    Вопрос почему кодеры так активно кричат "бэм это хорошо", если достаточно было сказать "ребята, научитесь УМНО пользоваться вложенностью", дескать каждый уровень вложенности это как золото, их нельзя делать 22, максимум 2 или 3??


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

    ну то есть - зачем каждому элементу писать модификатор, отказывая себе во вложенности, если вложенность тут очевидна?
    А если делать все равно вложенность, то на какой долбаться с ней без вложенности?

    Хотелось бы услышать объяснения без ссылок на "какую-то там статью про бэм" в которой те, кто сломали себе мозг, ломают его остальным.


    Без ссылок не обойтись, см. выше, но они подобраны исключительно точно по вашим вопросам и содержат необходимые объяснения.
    Ответ написан
  • Как по БЭМ написать элемент в блоке с модификатором?

    @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/Проекты на БЭМ.
    Ответ написан
    Комментировать