Не очень удачный пример для разбора, сайт простой в основном галерея картинок.
Жалко нет source files, мои рекомендации предполагаем, что проект развивается добавляются новые страницы:
1. все script в конец body, можно добавить скрипт для асинхронной загрузки.
2. не нравиться
.main-header__bottom > .container (вложенность не по БЕМ)
и просто легко запутаться, если я вижу .container я ожидаю что это какой стандартный контейнер для этого медиа, а тут получается в разных блоках разный контейнеры, потом будешь терять время вспоминаю где какой.
Так что лучше задать в отдельном файле, брейкпоинты и контейнер + сетка по желанию.
3. main-header__button, все кнопки в отдельный sass файл(экономишь время) и все кнопки идут через модификаторы, потом дизайнер где нибудь еще такую кнопу захочет.
class="btn btn--page-scroll"
4. main-header__social-list можно использовать просто тег nav
5. ссылки в отдельный файл, дизайнер точно захочет ссылки добавить еще на какую нибудь страницу или блок.
main-header__social-link
class="link link--social link--fb"
6. svg дело вкуса, но мне больше нравиться. В отдельный файл все иконки, и вешаешь иконки на background-image
i class="icon icon--fb icon--fb-white" /i, потом легче искать, проще менять размеры, и не будет косяка с дублирующими id у элементов.
7. p class="main-header__bottom-name" Marina Zinkevich /p
рекомендую заменить на
p class="text text--16 mb-10 text--lh-12". 100% потом дизайнер захочет точно такой же текст где нибудь в футере на новой странице.
8. .main-header__bottom-tel a
a href="tel:+16098331277" +1 (609) 833 1277 /a
уже писал (вложенность не по БЕМ)
a class="link link--pink text--16 mb-0"
9. main-header__button зачем span внутри, сразу же можно повесить иконки через псевдо элементы на саму кнопку.
Если я правильно вижу, ты медиа пишешь в отдельном файле, лучше сразу в блоке, потом будешь много времени тратить прыгая по разным файлам.
Ты не используешь gulp, а что за плагины ты используешь для VS, чтобы сжать css, js, оптимизировать фотки ?
Проект простой, но в целом все хорошо, верстка не разваливается, ошибок в консоли нет. Разметка четко по БЕМ.
Надеюсь мои советы ускорят тебя :)
P.S. Посмотрел script, почему все функции не в одном $(document).ready(function () {}) ?
Жалко нет source files, мои рекомендации предполагаем, что проект развивается добавляются новые страницы:
1. все script в конец body, можно добавить скрипт для асинхронной загрузки.
2. не нравиться
.main-header__bottom > .container (вложенность не по БЕМ)
и просто легко запутаться, если я вижу .container я ожидаю что это какой стандартный контейнер для этого медиа, а тут получается в разных блоках разный контейнеры, потом будешь терять время вспоминаю где какой.
Так что лучше задать в отдельном файле, брейкпоинты и контейнер + сетка по желанию.
3. main-header__button, все кнопки в отдельный sass файл(экономишь время) и все кнопки идут через модификаторы, потом дизайнер где нибудь еще такую кнопу захочет.
class="btn btn--page-scroll"
4. main-header__social-list можно использовать просто тег nav
5. ссылки в отдельный файл, дизайнер точно захочет ссылки добавить еще на какую нибудь страницу или блок.
main-header__social-link
class="link link--social link--fb"
6. svg дело вкуса, но мне больше нравиться. В отдельный файл все иконки, и вешаешь иконки на background-image
i class="icon icon--fb icon--fb-white" /i, потом легче искать, проще менять размеры, и не будет косяка с дублирующими id у элементов.
7. p class="main-header__bottom-name" Marina Zinkevich /p
рекомендую заменить на
p class="text text--16 mb-10 text--lh-12". 100% потом дизайнер захочет точно такой же текст где нибудь в футере на новой странице.
8. .main-header__bottom-tel a
a href="tel:+16098331277" +1 (609) 833 1277 /a
уже писал (вложенность не по БЕМ)
a class="link link--pink text--16 mb-0"
9. main-header__button зачем span внутри, сразу же можно повесить иконки через псевдо элементы на саму кнопку.
Если я правильно вижу, ты медиа пишешь в отдельном файле, лучше сразу в блоке, потом будешь много времени тратить прыгая по разным файлам.
Ты не используешь gulp, а что за плагины ты используешь для VS, чтобы сжать css, js, оптимизировать фотки ?
Проект простой, но в целом все хорошо, верстка не разваливается, ошибок в консоли нет. Разметка четко по БЕМ.
Надеюсь мои советы ускорят тебя :)
P.S. Посмотрел script, почему все функции не в одном $(document).ready(function () {}) ?