SagePtr

В вашем случае можно использовать аттрибут pattern и псевдокласс :invalid, никакого javascript в таком случае не надо.

Ищите готовые и переделывайте под себя, или смотрите, как они сделаны, и делайте по образу и подобию.

Модули устарели и некоторые из них содержат известную уязвимость. Обновите их и закомитьте.

Во-первых, редирект с HTTP на HTTPS настроить, как посоветовали выше, а во-вторых, добавить заголовок Strict-transport-security, чтобы браузеры после первого открытия сайта запомнили это и при последующих открытиях сайта автоматом подключались по HTTPS, не дёргая лишний раз HTTP.

Удобный доступ через массив dataset.
Да и аттрибуты через data- гарантируют то, что браузер не будет их воспринимать как-то по-особенному и разработчик вправе сам вкладывать в них смысл, не боясь ничего поломать (если аттрибуты с таким же именем будут что-то значить для браузера).

А что мешает в браузере тыкнуть F12 и посмотреть, какие именно стили у вас на самом деле применяются к body и какие перекрывают ваш стиль?

a.main-nav__logo(href = pageClass == 'index-page' ? false : 'index.html')

Если планируется использовать в нескольких местах - то в миксин засунуть, конечно же.

С innerHTML есть побочные эффекты - например, старые элементы, какие там были, будут пересозданы в дереве DOM и они могут потерять то, что было назначено им не через HTML-код документа или изменено в процессе пользователем. Ну и также у textContent преимущество в том, что не нужно беспокоиться об XSS (если злоумышленник загонит туда HTML-тэги).

Кстати, есть ещё один метод - insertAdjacentHTML (он сочетает в себе простоту innerHTML, но не передраконивает предыдущее содержимое)