Ivan Bogachev

filter: blur(5px);

Алгоритм примерно такой:
- Берем обычный canvas, на нем что-то пишем или выводим картинку (в данном случае строго 2 цвета).
- Берем imageData у того, что получилось.
- Проходим по всем пикселям этой imageDatы с каким-то шагом, делаем объект "частица" с нужными координатами когда цвет соответствует определенному (если писали черным по белому - значит если цвет пикселя черный).
- Стираем надпись.
- Проходим по массиву частиц, рисуем небольшой круг (что угодно, но пусть будет круг) на месте с координатами этой частицы.
- PROFIT.

По вкусу к частице добавляется параметр "цвет" (лучше полупрозрачный) и "размер". Можно сделать функцию обновления, которая будет менять эти параметры и координаты, requestAnimationFrame нам в помощь. Координаты частицы меняются по определенному закону в каком-то радиусе от ее изначального положения, можно взять параметрическое уравнение любой замкнутой кривой и использовать его для вычисления отклонения частицы от ее изначального положения.

google.com/get/noto/

Возьмите animate.css и добавляйте нужные классы к элементам. Или, что еще лучше, достаньте из нее только необходимые вам анимации (postcss-animation может это дело автоматизировать) или посмотрите идеи в исходниках и сами их напишите, чтобы не тащить всю библиотеку ради пары десятков строк. Если хотите что-то совсем кастомное и необычное - идите на codepen, смотрите идеи там и адаптируйте под свои нужды. Тут главное не переборщить, все-таки сильно нестандартные или длинные анимации интересны первые пару-тройку раз, потом начинают раздражать.

Расположить круглые кнопки по кругу можно примерно так. На маленьких экранах можно убрать все трансформации и поставить кнопки в столбик/строчку. Логику переключения стоит делать на JS, чистый CSS - это интересно, но не практично.

Это по какой-то системе делается или дизайнер просто так по красоте на глазок подбирает отступы?

Эта система в народе называется стайлгайд. В долгоживущих проектах иметь его в оформленном виде очень полезно. В нем есть и все размеры, и все цвета, и шрифты, а часто и компоненты по отдельности. Если у вас есть стайлгайд - то вы работаете по нему, макет страницы - это скорее для понимания "что в какое место поставить". Он может быть кривым/косым, хоть на бумажке нарисованным.

Надо ли именно такие отступы соблюдать или можно, например, просто в бутстраповский контейнер запихнуть секцию и не париться?

А вот если у вас нет стайлгайда и при этом кривой макет, то стоит спросить дизайнера/заказчика об этом и действовать исходя из их объяснений. Единственное, что стоит серьезно обсуждать - так это ситуацию, когда заказчик хочет pixel-perfect, до дизайнера уже не достучаться, а весь макет кривой настолько, что аж в глазах рябит. Там нужно или увеличивать сроки и цену или убеждать, что плюс-минус пара пикселей не имеют великого смысла и вы выиграете и по срокам и в перспективе при поддержке всего этого.

На постоянной основе - anime.js или делаю анимации на CSS, иногда использую D3.js.

Если вопрос о компонентах - то скорее всего особой пользы от такого не будет. Если о каких-то глобальных вещах (даже вы сразу приводите пример с html) - может иметь смысл деление глобальных стилей на смысловые части: стандартная нормализация (например normalize.css), дополнительная нормализация (например дать всему box-sizing: border-box), все, что связано с текстами (размеры, шрифты), хаки и куски полифилов, которые со временем было бы хорошо убрать и.т.д. В случае крупного проекта вы можете думать не селекторами, а смысловыми группами - это не обязательно, но довольно удобно.

Ну и, разумеется, есть вариант "10 фрилансеров, каждый что-то добавил, получилось чудовище франкенштейна - куча швов и заплаток, но вроде работает". Там никакого смысла не будет, просто "так получилось".

Cобственно проблемы описаны тут. Решения там тоже описаны. Также проблемы решаются ограничением использования флексбоксов (дабы не мучать свой мозг и не тестировать каждый чих во всех браузерах). Ну и postcss-flexbugs-fixes в составе postcss-fixes тоже лишним не будет.

Возможно я чего-то не понимаю в реальной вёрстке, раз такой подход хвалёной адаптивности - подгонки сайта ко всему - от умных часов до UltraHD-телевизоров - на практике слабо встречается.

Это бизнес. Ничего личного. Условно, если у сайта менее 0.5% пользователей сидит с телевизоров или с часов, то дешевле положить на них болт, чем адаптировать. Серьезные компании могут заплатить UI дизайнеру, UX дизайнеру (а то и целой команде), верстальщику, купить им несколько телевизоров, умные часы, провести несколько юзабилити-тестирований, потратить на все это кучу денег. А компаниям с небольшим отделом разработки это выльется в годовой бюджет этого отдела и никак не окупится.

Что нужно поправить?

Доступность. В частности вопросы контрастности элементов. Если вам дизайнер дает такую бяку - вы просто обязаны его поправить. В частности состояния элементов:

Вы видите разницу? А она есть. Мы с вами может и заметим ее, но пользователь - нет.

С фокусом вообще все печально, нормально протабать страницу нельзя - фокус улетает в неизвестном направлении и пол страницы пребывает где-то там. Ну и синенькие рамочки - не комильфо.

Как сделать чтобы слова "Первый" и "Второй" были красным цветом, но при этом Потомок 1 и Потомок 2 оставались черным.

Можно сделать по-простому:

ul {
    color: #f00;
}

ul ul {
    color: #000;
}

Но в перспективе предпочтительнее отойти от использования подобных селекторов и прийти к бэм или какой-нибудь еще методологии.

Используйте

visibility: hidden;
pointer-events: none;

вместо display: none;
и

visibility: visible;
pointer-events: auto;

вместо display: block;

Анимация будет работать так, как вы описали. Pointer-events отключается для того, чтобы скрытый элемент не мешал наведению и кликам по элементам под ним (если он будет абсолютно позиционирован или перемещен и что-то окажется снизу).