<div className="block">
<div className="block__element_active">...</div>
<div className="block__element_hidden">...</div>
</div>
<div className="block">
<div className="block__element block__element_active">...</div>
<div className="block__element block__element_hidden">...</div>
</div>
<div className="block">
<div className="block__element block__element_state_active">...</div>
<div className="block__element block__element_state_hidden">...</div>
</div>
</code
А класс shopping-cart__popup, в таком случае, у меня остаётся пустым..
А ещё же количество классов в одном теге возрастает.
<button type="button" class="py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75">
Click me
</button>
Все находятся в разных частях css стиля.
Хотел так сделать, но вспомнил то самое определение БЭМ. Т.е. в таком формате, я не могу сказать, что это как бы имя блока, которое по БЭМ не должно отвечать на вопрос "какой, как выглядит?".
Ну иногда находит мысль, что все делают и не парятся, что возможно, правила и практика, уже разъехались, а я трачу время изобретая велосипед, пока все делают удобный код.
Тогда как Вы относитесь к избытку классов? Если в разметке, в дереве БЭМ, они там не лишние, но в стилях не используются? Допустим, будут дополнительные состояния, для мобильных устройств, но в моей текущей задачи, нет такой необходимости, проектировать такое решение.
И как избежать разбросанных кусков кода? Когда за позиционирование будет отвечать одно, за общую структуру другое, а дальше пойдут всякие модификаторы в каждом конкретном случае?
Так это вы не рассматриваете объединение в группы изначально.
Я то к тому и вел и сам бы только так и делал.
В макете из вопроса ТС около 50 этих свг фигур разных.
Сами то решились бы на это без явной необходимости?
это приключение минимум на пару часов.