Вообще да, проблема в кешировании. Для её решения был придуман e-tag https://developer.mozilla.org/ru/docs/Web/HTTP/Hea.... В вашем случае можно обойтись изменением link, но как только статики в проекте станет больше e-tag вам в помощь.
У разных браузеров разные размеры viewport, тк разные размеры панелей инструментов, кол-во этих панелей, толщины краев и т.д. и т.п. Вот и отличаются размеры getBoundingClientRect. Это как бы норма.
Это может принести вам как пользу, так и вред. Зависит от того, как преподносится материал в видео, как его объясняет автор. В целом учиться по видео, повторяя написанный код это неплохо. Но недостаточно, чтобы стать программистом.
Никто не заставляет вас использовать то или иное правило. Каждая команда разработчиков сама определяет с каким "правилом" наименования они работают. Если вы работаете один - выберите своё стиль, свое правило. И не нарушайте его.
Кроме этого, есть популярные "стандарты", например БЭМ (блок-элемент-модификатор). Ссылку вам уже кидали. Например, Яндекс использует немного модифицированный под себя БЭМ.