Code review верстки новичка + вопросы?

Здравствуйте. Не так давно начал изучать верстку, и вот что на данный момент сверстал. Укажите, пожалуйста, но ошибки кода. Нужна конструктивная критика, и, если можно, с какой-то уместной аргументацией (типа так правильно, лучше для поддержки, универсальнее и т.п.). Интересует, насколько правильно я верстаю. Прогонял сайт по google pagespeed, выдало результат в 47 баллов и примечания, что надо оптимизировать изображения и удалить js и css, которые блокируют отображение верхней части стр. Где оно и что блочит, я так и не понял. Изображения сжимал сервисом tinyjpg. Этого, как я понял, недостаточно. Порекомендуйте способ или сервис нормальный. Было указание сократить css, что в результате уменьшит его размер на 1.4 кб (20%). Так ли это существенно? Перестановку блоков делал сам, так как макет был только для десктопов (бесплатный, нашел в сети).
Также еще вопрос - есть ли люди, которые на волонтерских началах могут стать моим ментором? Преимущественно ответы на свои вопросы ищу гуглом и опытным путем, но иногда возникают вопросы "почемучки", типа почему работает именно таким образом, с чем связанно возникновение того или иного бага и т.п. Благодарю за внимание и критику/замечания по поводу верстки.
P.S. Если нужен, вот адрес репозитория.
  • Вопрос задан
  • 2259 просмотров
Решения вопроса 2
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Нужна конструктивная критика

Ну давайте покритикуем... постараюсь все аргументировать.

Начнем не с кода, а с юзабилити так сказать: есть люди, которые используют 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.: планшета под рукой нет, поэтому про тормоза ничего сказать не могу - на слабом нетбуке все работает более-менее нормально.
Ответ написан
pm_wanderer
@pm_wanderer
junior-HTML
По html пробежался:

У тебя есть места где тег h2, h3 идет перед h1. Так делать не принято (хоть и не считается ошибкой при валидации). Почитай про html document outline - это система структурирования документа по заголовкам и секциям.

Встречаются пустые конструкции из дивов, которые видимо используются в презентационных целях и захламляют документ (лучше использовать псевдоэлементы before и after для этого)

Презентационные картинки типа иконок не нуждаются в заполнении аттрибута alt (оставить его пустым лучше, но не убирай) и можно добавить role=presentation. Картинки не адаптированы под ретину (почитай про аттрибут srcset).

Input'ам, без описательного тега label, не нужен аттрибут title (он не на всех скринридерах работает и на мобилах он не отображается) Если решили уж делать поле ввода без label, то пусть лучше аттрибут placeholder описывает максимально, что требуется от простого пользователя, а для пользователей скринридеров использовать aria-label.

Последний момент: если хочешь прям ваще чтоб идеально было, то надо внедрять в код wai-aria, но спешу тебя обрадовать, что об этом любят только говорить всякие гуру на конференциях, а на деле практически никто это не внедряет правильно, так как требуется в WCAG и Section508

Ну в остальном все нормально в общем, кроме всяких вещей субьективных типа структуры вложенности дивов. Я лично не люблю когда их очень много, но некоторым так удобней держать в голове структуру документа. Сам сайт не сравнивал с кодом, поэтому мог не заметить каких то еще явных косяков - пробежался просто поверхностно глазами по html на гитхабе.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@FoxInSox
Ответ написан
Комментировать
@Toweeelie
Сейчас нахожусь примерно на том же уровне что и ты. Можно было бы как нибудь списаться и учиться вместе) Две головы лучше одной)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы