Максим Морев

Я бы в первую очередь куда-то в эту сторону посмотрел.



Со стрелкой правда непонятно что делать, возможно, это чуть ли не единственный случай, когда шрифтовая иконка будет оправдана, но нарисовать и скомпилировать придётся самостоятельно :)

Если бы не хватило - полез бы смотреть в сторону SVG-клипа.
Но в целом случай сложный, придётся заморочиться, чтобы сделать более-менее приятно глазу. :)

Стилям оверлея допишите pointer-events: none; - можно будет взаимодействовать с картой.
А дизайнеру двойка, любой креатив не должен идти вразрез с юзабилити.

Оптимизировать SVG путём упрощения фигур (уменьшения числа точек), удаления не значимых элементов, иногда какие-то забытые фигуры встречаются вне viewbox'a.
Если уже оптимизировано - смириться или переключиться на растровую графику, у всего своя цена, объёмные SVG - стоят дорого.

Добрый день.
По вашему примеру - я никогда не буду советовать делать какие-либо вкладки без использования JS - слишком негибко и неинтуитивно получается.
Но если всё-таки нужно без JS, то вы можете по-прежнему использовать селектор "~", если поменяете порядок элементов с помощью order из flex-спецификации.
Ваш причёсанный пример: https://codepen.io/morevm/pen/jOPpZKo
То, как это должно быть с JS: https://codepen.io/morevm/pen/XWbBZOK

Ну тут скорее не вопрос, а крик души, который можно поддержать.

По делу: да, проблема есть, именовать на больших проектах сложно. Решений нет.
Вернее, только те, которые вам кажутся "грязными", но других не завезли (и не завезут).
И те, которые не относятся к разработке (вроде "дать люлей дизайнеру, который не понимает, как это всё работает, и лепит каждый элемент как попало")

Тут просто надо несколько абстрагироваться и принять то, что абсолютно в любой объёмной системе, даже если её вдруг пишет один человек (что вряд ли), всегда есть место неочевидным вещам. Перфекционист внутри рыдает, но что делать.

Откройте любое масштабное решение - чёрт ногу сломит, не так ли? И требуется немало времени, чтобы вникнуть. Потом вникаешь - и становится проще, но всё равно много нагромождено. А если выпасть из контекста на месяц - потом опять заново вникать. Это норма (картинка с Малышевой).

Стоит просто выбрать для себя какой-то стиль и строго ему следовать. И расширять словарный запас, чтобы играть словами.

Совмещение ваших пунктов 1 и 3 в одно - вполне здоровый стиль.
Если секция, где всё очевидно: about, gallery, text-section, etc.
Если контент неоднородный - именовать по смыслу (как в 3).

Единственное что мог бы посоветовать - не смущаться добавлять новые компоненты, задавая им какой-то дополнительный неймспейс (contacts-header, contacts-about), а не пытаться всё упихать в один общий с помощью модификаторов - в поддержке будет проще.

Просто размышления от прочитанного:
1. Подходы 2 ("section-1", "section-2") и 4 (атомарщина) - в аду для таких "специалистов" стоит отдельный котёл. Ну вы и сами понимаете. Использовать нужно никогда.
2. Инкапсуляция имён ничего не даёт в этом отношении, так как это придумано для элементов внутри блока (а с этим и концепция БЭМ хорошо справляется), глобально вам как разработчику всё равно нужно иметь понятное "корневое" название блока.

Ещё можно поработать со своей головой, возможно, что такой крик души идёт от страха быть осуждённым. Браузеру-то всё равно, вы ему хоть .qwerty123 { ... } скормите - нормально отобразится.
Понятные имена - для разработчиков, и надо понимать, что ни один толковый разработчик в вас камнем не бросит за то, что вы дали блоку имя .contacts-footer-call-to-action, если у вас этот самый .call-to-action в каждой секции настолько разный, что в один компонент не умещается.
Иногда помогает, если есть прямой выход на клиента или ЛПР донести, что такой дизайн... Ну не самый лучший для поддержки, и обосновать почему.
А чисто технически - решений нет, ну, вот такая работа, чё делать.