Универсальных решений по вёрстке не существует, всё зависит от конкретной задачи и конкретного макета.
Названия классам можно давать какие угодно, главное, чтобы названия говорили разработчику ( в первую очередь вам ) о чём данный тег, что он из себя представляет. Существуют различные методологии по задаванию классов тегам, одна из популярных - БЭМ.
Подробно про БЭМ можно прочитать здесь :
httpss://ru.bem.info/methodology/quick-start/
Flex'ы и Grid'ы
Использование flex'ов актуально, если блок имеет простую структуру, по типу двух вложенных внутри него блока, расположенных в ряд. Можно использовать flex и в более сложных структурах, если вам очень нравится верстать на flex'ах, это дело вкуса.
Использование Grid'ов актуально, если вам нужно сверстать сложную структуру блока, в котором будет многоженство других, имеющих нестандартное расположение или соединения. Одним из существенных плюсов grid'ов - адаптивность ( подстраиваивание под разные размеры экранов.
Если выбирать из этих двоих методов верстки что-то одно, то нельзя дать точный ответ на то, что будет лучше. Нужно будет попробовать оба метода и решить для себя, что для вас будет лучше. И, здесь всё, конечно, опять же, зависит от ситуации, в которой вы применяете эти медоты.
SVG и картинки
Одна из важнейших задач верстальщика - снизить нагрузку сайта на мобильный трафик пользователя, простыми словами - сжать вес всех элементов сайта к минимуму. Картинки ( JPG, PNG и другие форматы ) занимают немалый вес, который может стать причиной долгой скорости загрузки вашей страницы на стороне пользователя. Использование же SVG спрайтов - это использование векторной графики, т.е, спрайты - это те же самые картинки, только они создаются за счёт прямых и других линий, что позволяет им сохранять высокое качество даже при изменении их размера. Как вы уже, наверное, поняли, использование SVG спрайтов подразумевает с собой практически нулевой вес иконки, что уменьшает нагрузку на трафик пользователя.
В случае с картинками всё будет хуже, они создаются при помощи растровой графики и весят много, да и при увеличении их размеров может ощутимо урезаться качество. В основном SVG спрайты являются иконками, логотипами и т.д. Скажем, если вам нужно будет использовать на сайте логотипы соц. сетей, к примеру, ВК, Discord, Skype и т.д, то лучше будет зайти на какой-нибудь ресурс SVG спрайтов и найти нужный спрайт там.
Единицы измерения. Px и em
Так как вы являетесь новичком в вёрстке, то для начала рекомендую пользоваться px ( пикселями ), т.к пиксели являются универсальной единицей для различных задач. Существуют так же и другие единицы, к примеру проценты %.
Подробно про единицы измерений можно прочитать тут :
https://learn.javascript.ru/css-units
Комментирование кода
Комментирование кода полезно не только для вас ( в случае, если проект крупный ), но и для других возможных будущих верстальщиков вашего проекта. Тут всё как с классами, чем подробнее закомментируете - тем легче будет верстальщику понять, что из себя представляет этот блок / тег.
Рекомендую комментировать закрывающиеся теги лишь в том случае, если весь блок имеет большую вложенность элементов, иначе, без комментариев, вам будет сложно опеределить где именно находится конец того или иного тега в вашей вёрстке.
Простой
Простой
