BiTiR, код за вас никто писать, конечно, не будет, но если хотите поискать и разобраться, то ищите SVG JS manipulations, SVG interactive maps и что-то такое. Если не хотите, то вам нужна биржа фриланса.
EYPPNM, не знаю, к чему он там пришёл, но SVG-шрифты никто не собирается поддерживать (черновик уже два или три года не обновляли). Более того, они не поддерживают критичные для типографики технологии. Не говоря уже о производительности.
Шрифты в формате SVG поддерживаются только в Safari, а поддержки от других браузеров ожидать не стоит, потому что SVG-шрифты:
1. не поддерживают кернинг и лигатуры
2. люто снижают производительность рендинга и отклика страницы
Засим, Chrome убрал их поддержку в 38-й версии, а Firefox, вроде, даже и не стал вводить их.
VegasChickiChicki, любая привязка к структуре DOM — это не очень хорошо, потому что это может сломаться при малейшем перемещении блоков. Но что поделать, этот функционал используется и будет использоваться. Просто использовать его желательно реже.
VegasChickiChicki, не самый хороший метод, но если вы знаете, что структура DOM меняться не будет, она очевидна и изолирована — почему бы и не использовать. Главное, не использовать везде это.
empir2, я бы для размеров сделал бы классы модификаторы, а вот расположение, конечно, надо думать, как сделать проще. Ну или тупо расписать их положение по каждой секции вручную. Не думаю, что их там много. А если положения этих штук можно типизировать, то да — класс-модификатор на обёртку, от которого будет плясать тот или иной вариант размещения этих элементов.
Параллакс делать на смещении translate3d, если они просто ходят вверх-вниз при скролле.
Roweb, когда карточку в слайдере «наш блог» или же сетки для вывода таких карточек называют не, например, .blog-article-card или .blog-article-preview-card, а как-нибудь типа .blog-el.
Вроде бы и нормальный второй вариант, но сразу не поймёшь, что это именно карточка для сетки, слайдера, а не для не просто элемент блога. Т. е. когда название ни туда, ни сюда.
Более того, из-за этого теряется специфичность, которая важна, ибо в CSS нет зоны видимости стилей, что может привести к «конфликту» стилей из-за одинаковых селекторов. Такие проблемы частично решаются styled components, CSS-in-JS, обфускацией, но они не всегда доступы.
Каждый день сталкиваюсь с этой проблемой, когда делаю стили для блоков, где нет обфускации, styled components и т. п.
Методов именно придумывания названий нет ни одного нормального, только опыт, ваш личный словарный запас и умение им воспользоваться. Можно идеально понимать и применять тот же BEM, но при этом называть ваши компоненты упорото.
Например, мой коллега идеально использует BEM, но даёт компонентам такие названия — просто беда.
Это работа сервера — конвертация в webp. Вот, собственно, и ответ. Сервер просто умеет конвертировать полученные картинки и отдавать их, если они поддерживаются браузером.
