i

Из истории развития БЭМ 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.

Параметр 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">

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 {}

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

Да это возможно, например 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 в браузере (можно и на сервере применяя те же шаблоны).