itsjustmypage

Смысл в именовании и структурировании CSS-классов такой же, как смысл в именовании и структурировании переменных и функций в программировании. Поддержка кода в логичном понятном и значит легкоподдерживаемом состоянии.

Универсальное правило, если нет своего осознанного пути, использование БЭМ методологии и именование по смысловой нагрузке элемента.

Не .bigBlackButton, потому что кнопка большая и чёрная, а .sendNudesButton, потому что кнопка отправляет нудесы.

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

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

Писал давно на Stylus+Pug, может поможет чем. Не респонсив, но зато css-счётчик есть)
https://codepen.io/Arkham80/pen/MbYRzd

Перевести блочную модель в привычный вид (*, *::before, *::after {box-sizing: border-box;}
Подключить normalize.css (body margin 0 там тоже есть).
Верстка семантическими тегами. Header, main, footer, section, article, aside, вот это всё. О том где и как их применять подробно в спецификации https://www.w3.org/TR/html/fullindex.html#index-el...
Сохранять семантичность и доступность при кастомизации форм всех видов (input, button). Пример правильной кастомизации чекбоксов https://www.youtube.com/watch?v=E6kLaaQFctU
Размечать документ, сохраняя правильную структуру заголовков (h1-h6), что такое правильная структура есть в спецификации https://www.w3.org/TR/html/sections.html#the-h1-h2...
Использовать какую-либо методологию вёрстки (обычно БЭМ).
Верстать модульно, максимально независимыми блоками (см пункт о методологии).
Сжимать изображения, использовать SVG при возможности (векторные иконки, косые и криволинейные украшательства и т.д.)
Использовать автопрефиксер для автоматического проставления префиксов в CSS.
Стили для обработки пользовательского ввода (на случай, если текста будет слишком много/мало, длинные слова и т.д.)
Как-нибудь обработать FOUT(мерцание нестилизованного текста)/FOIT(мерцание невидимого текста). Как правило это просто font-display: swap.

Пока не знаю что ещё добавить, можешь погуглить чеклисты вёрстки, взять что-то из них.
И здесь посмотреть webmasters.teamdev.com

Так-то там просто изменяется transform у элемента через атрибуты translate3d и scale3d, а потом модальное окно на весь экран.