Максим Тимофеев

Удобнее всего сделать svg, но тут конечно все зависит от того чо в этих элементах.

не совсем корректно описаны условия, я там понимаю речь о одинаковом контенте, но в одном больше html элементов, а у второго те же задачи по стилизации достигнуты с помощью css. Если так - то у первого явно избыточная вложенность и вероятно он для seo хуже.
Но на самом деле лучше обсуждать конкретные примеры, так есть куча косвенных не очевидных вещей. Поправьте если не прав, а лучше приведите пример кода.
Тут явно будет еще фактор скорости загрузки, но так как мы гадаем на кофейной гуще без реальных цифр, однозначно Вам никто не скажет. Надо перейти к конкретике.
2мб css файл однозначно плохо. Но если речь о 20kb против 30kb - это не о чем.

если на Can I Use написано

А разве разработчик Вашего автопрефиксера заявляет что его скрипт берет информацию с caniuse? Они живут отдельно, не синхронизированы. Это два разных проекта, так что различия в информации - это нормально и ожидаемо.

Стоит ли использовать префиксы, полагаясь на него или убрать?

На кого из них двух? Чем Вам мешают префиксы, тем более что речь всего об одном css свойстве? Вы переживаете, что будет лишние 40 байт веса у css? Думаю оптимизация кода css и селекторов даст больше.
Отсутствие префикса может быть критичным для верстки, лишний префикс -это всего лишь лишний вес css файла и не более того. Не вижу проблемы.

Пора ли использовать CSS переменные?

Конечно, уже же пол седьмого.

Поддержка уже почти 90%, но нету поддержки IE.

Что ж ты будешь делать

Значит ли это что пора?

Значит, что поддержка 90% и не более того

есть событие load у document, которое происходит, когда загружены все ресурсы:
https://learn.javascript.ru/onload-ondomcontentloaded
https://learn.javascript.ru/onload-onerror

Сверстайте отдельно доты, повести на них обработчик, что бы по клику вызывал метод перехода к нужному слайду

У Вас же есть рабочий пример, в чем проблема посмотреть? D3Org имеет открытый код, это openSource: https://github.com/d3/d3

Слушать событие клика по кнопке: https://learn.javascript.ru/introduction-browser-events
Накладывать div поверх другого используя абсолютное позиционирование и z-index

относительно ребенка и отца

Что за дискриминация по половому признаку? С каких пор parent стал именно отцом?

С помощью чего можно сделать красные линии

с помощью js, средствами только css + html это если и возможно, то будет адским велосипедом, не для продакшена, просто "смотрите чё я умею".
Можно использовать библиотеки, можно canvas, тут уже будет куча вариантов, но точно это будет js

Можно в 3 картинки, можно и в 2. Псевдоэлементы и background к ним.

в данном примере явно статический фон на body, можно его менять через js при достижении скролом определенной позиции
Задать например через data-background и брать оттуда, когда блок с таковым появился в области видимости

Что именно значит Ваше

заставить двигаться

я не понял, как и какого потомка, поэтому вот в общем:

.parent:hover {
// стили для родителя при наведении на него
}
.parent:hover .child {
// стили для потомка при наведении на его родителя
}