Нужна конструктивная критика
Ну давайте покритикуем... постараюсь все аргументировать.
Начнем не с кода, а с юзабилити так сказать: есть люди, которые используют tab для перемещения по странице. Это факт. В вашем случае получается, что в верхнем меню перемещаться можно только по словам (но не по иконкам), а по остальной странице - вообще нельзя. Т.е. формально перемещение идет, но ничего не выделяется и совершенно не понятно где мы находимся.
Имеет смысл добавить для focusable-елементов стили для :focus.
Второе - при уменьшении экрана в некоторых местах надписи начинают наезжать (несильно, но глаз режет) друг на друга. Возможно вам стоит почитать статью про
изменение размера шрифта в зависимости от размера экрана - иногда это очень полезно.
Ну а теперь перейдем собственно к коду. Скриптов у вас немного, поэтому буду говорить про CSS. Вопрос: у вас css файл на 2606 строк - вы пишете все в нем? Если да - вам стоит посмотреть в сторону систем сборки (
grunt /
gulp) -
имеет смысл отдельные компоненты делать в отдельных файлах, а затем это все склеивать. Так проще ориентироваться в происходящем (и те, кто будут работать с вашим кодом после вас скажут вам спасибо). Опять же префиксы для браузеров можно будет расставлять автоматически.
Дальше:
.work_pic1-part1:hover span,
.work_pic1-part1:hover:before,
.work_pic2-part1:hover span,
.work_pic2-part1:hover:before,
.work_pic3-part1:hover span,
.work_pic3-part1:hover:before,
.work_pic4-part1:hover span,
.work_pic4-part1:hover:before,
.work_pic1-part2:hover span,
.work_pic1-part2:hover:before,
.work_pic2-part2:hover span,
.work_pic2-part2:hover:before,
.work_pic3-part2:hover span,
.work_pic3-part2:hover:before
...
жуть, однако. С практической точки зрения тут лучше всем этим элементам добавить один класс и для него задавать стили, чем писать такую простыню.
К концу файла глаза довольно сильно устают. Префиксы раздражают, как и множество одинаковых (и совершенно ни о чем не говорящих) чисел. Так что префиксы лучше расставлять автопрефиксером, а в будущем посмотреть на
less /
sass -
препроцессоры упрощают работу и имеют разные плюшки вроде переменных (например длина анимаций просто напрашивается на вынесение в переменную), наследования стилей и.т.д.
Еще по поводу размера css: есть такое понятие как
critical css - стили для первого видимого экрана. Их можно выделить автоматически (см. системы сборки) и встроить прямо в html. А все остальные стили загружать уже потом. Это создаст у пользователя впечатление быстрой загрузки. У Виталия Фридмана есть занятная лекция на youtube, где он рассматривает этот и другие вопросы оптимизации загрузки на примере smashingmagazine.
Комментарии. Их нет. В большинстве случаев они и правда не нужны, но после нарезки такого рода окончаний
</div>
</div>
</div>
</div>
</footer>
</div>
может что-то потеряться и потом искать не закрытый div очень непросто. Имеет смысл крупные контейнеры оборачивать в комментарии, показывающие
начало и конец этого блока (помнится
emmet умеет вставлять такие сразу с двух сторон).
Да и напоследок: названия классов очень разнородные - то дефисы, то подчеркивания, то длинные, то короткие, иногда в них видится система, но эта система переодически дает сбой. Не люблю я
БЭМ, но, вероятно вам стоит почитать о нем более подробно (или про аналоги, решающие те же задачи - недавно тут на тостере был вопрос о том, что делать, если бэмоподобные классы перестали нравиться - пришли к выводу, что
rscss тоже неплох).
P.S.: планшета под рукой нет, поэтому про тормоза ничего сказать не могу - на слабом нетбуке все работает более-менее нормально.
