Единых правил нет. Есть разные подходы, вам нужно выбрать свой. Единственные всеобщее правила: верстка должны быть валидной. Остальное все можно оспорить) Начать можно с банально: Как сбрасывать дефолтные стили браузера? Банальный вопрос, вариантов несколько и правильного ни одного нет хD

Перевести блочную модель в привычный вид (*, *::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

https://www.w3.org/