It

А кто мешает использовать 4 разные доп класса? Каждому классу задайте нужную позицию как всплывающего так и треугольника.

Пробовал множество разных вариантов верстки, от самого "ручного" до webpack или gulp. В итоге понял, что если сайт не SPA, а просто лендинг или корпоративный многостраничник, то идеальным по скорости подготовки и удобству лично для меня является алгоритм:
1. Папка обычной структуры index.html + /img + /css + /js + /fonts + /sass .
2. Сразу инициализирую репозиторий (использую битбакет, а не гитхаб).
3. Открываю папку в VSCode, копирую настройки из любого другого проекта для плагинов.
3.1. Если только начинаем использовать VSCode, то нужно сразу поставить плагин для автокомпиляции Sass в CSS в онлайн режиме (Live Sass Compiler), этот плагин на лету конвертит код + сразу автопрефиксера функционал имеет + css map + минификация. Один раз настраиваем его для всех проектов.
3.2. Ставим Live Server, один раз настраиваем его для всех проектов.
3.3. Подключаем репозиторий во вкладке для репозиториев в VSCode
4. Всё, начинаем работать.
Я пропускаю шаг по настройке VSCode всякими мелочами типа линтеров, подсвечивалок кода, и прочего, тут кому что удобнее.

Такая связка позволяет использовать один инструмент (VSCode) для комфортной и быстрой верстки, если все в норме настроено, то я пишу\правлю код и тут же сразу всё вижу в браузере, не нужно ни обновлять ничего не подтягивать, ни ставить плагины в браузеры. Sass использую давно, ИМХО, ускоряет написание стилей в разы, и это при том, что не использую обычно даже миксины, максимум иногда готовые куски кода, а так обычно только дерево делаю через &, чтобы не писать по BEMу длиннющие цепочки руками и переменные через $.

Если идем дальше и уже верстку натягиваем куда-то, то добавляется еще и OpenServer, и все файлы переносятся в локальную папку виртуального сайта, перебиваются пути и все происходит точно также.
Изображения оптимизирую руками, не знаю почему, привычнее и быстрее, обычным tinypng или встроенными PageSpeedIns инструментами.

WebPack и Gulp много раз пробовал, и через OptimizeHTML, о котором выше писали, но не зашли на простых и средних проектах, слишком много всего нужно настраивать и подключать постоянно, что-то отваливается или криво работает, постоянно отвлекаешься на то, чтобы разобраться почему и что происходит. Ну и огромные папки получается, с нодовскими либами, бейбелами и прочими вещами, которые реально усложняют жизнь.

Для SPA, когда нужен React или Vue тут да, webpack, а на простой верстке - лишнее.
Как-то так, спрашивайте, критикуйте)

Вообще интерактивные элементы под ховерам не делаются для мобильной версии или планшетов т.к. на них только тапы, без мыши, нечем наводить, а значит интерактив можно делать только до 1024 условно, а меньше или убирать интерактив вообще или переходить просто на показывание элемена по нажатию кнопки, а это обычный display: none и position: absolute по удобным координатам.

Изначально ориентируюсь на Хром + Сафари. Для оконщиков самым удобным делать Хром + FF (или EDGE), т.к. вторые ближе к сафари.
А вообще по практике если говорят, что есть косяк в том же сафари, то просто открываешь в IE10 и там видишь этот косяк гарантированно, соответственно исправляешь. Ослик конечно неприятная штука, но если она отображает нормально, то и все остальные будут с 99,9% тоже отображать нормально.
P.S. Автопрефиксер уже даже не рассматривается как нечто дополнительное, он в принципе по-умолчанию должен быть.

Имхо, зависит от частоты и объема страниц. Если все отдельные лендинги это самостоятельные разделы, информационно не связанные с друг другом и если пользователь в большинстве случаев ищет только один из этих разделов и по другим не переходит, то нужно делать один общий файл normalize, как написали выше, и отдельные для каждого лендинга. Как минимум уменьшишь объем килобайт скачиваемых пользователями.
А если лендинги связаны между собой информативно и по ним пользователи прыгают, то делать один.

Я бы в любом случае начинал использовать сборщик и методологию. Разбивай как хочешь файлы, по любому принципу, а в продакшен пойдет только один и уже оптимизированный.