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

Question

Предположим, что я хочу иметь блок title, и для соображений стиля мне нужно вложить его в div с помощью специального CSS-стиля (например, я хочу конкретную стилизацию границ и интервалов). Назовем это box. Коробка просто служит стилю title внутри него.

Дело в том, что box имеет отношение только к ограничениям CSS, поэтому для box нет смысла считать блок терминологией BEM. Это даже не имеет смысла как элемент DOM. Но title находится внутри box.

Имеет смысл дать box класс title__box, потому что это не имеет смысла без title. Тем не менее, все примеры BEM, по-видимому, предполагают, что элемент всегда является дочерним элементом DOM блока, в котором он находится.

Answer 1

Чтобы ответить на ваш вопрос прямо, не исследуя дальше, нет. Вы должны были бы иметь что-то вроде следующего

<div class="decorator"> 
    <h1 class="title">blah blah</h1> 
</div> 

или

<div class="title"> 
    <h1 class="title__heading">blah blah</h1> 
</div> 

При использовании BEM вы должны думать в терминах «блоков», «элементы» и их повторное использование. В частности, рассмотрите это с точки зрения разработчика: вы не хотите, чтобы это закончилось в конкретном сценарии, когда разработчик будет создавать заголовок, о котором идет речь, и забыть элемент или атрибут и сходить с ума, пытаясь понять, почему он не Работа. Это дает вам последовательность и возможность тиражирования вашей разметки.

У меня нет никакого конкретного представления о том, почему вам нужно <div> и каково CSS ограничения, что вы говорите, но я возьму ваше слово.

Итак, я собираюсь спросить: подумали ли вы о очистке разметки с помощью псевдоселекторов или использовании заголовка в качестве вышеупомянутого контейнера и использования встроенных анонимных элементов (то есть <span>)?

Я надеюсь, что это поможет решить ваши проблемы.