Критерии качества вёрстки 202117.08.2021 10:31

Пользователи сайта могут использовать разные браузеры в разных системах, поэтому нужно добиваться единого отображения.

Задача курса — научить решать задачи с помощью базовых технологий. Полученная база позволит разобраться, как работают фреймворки или библиотеки.

Зачем нужен критерий

В качестве ориентира для ширины страницы используется фрейм, потому что мы считаем Figma преобладающим форматом макетов и поэтому пользуемся терминами этого графического редактора. В учебных макетах мы учли минимальную ширину, но в реальной разработке минимальная ширина страницы может отличаться от размера фрейма.

У страницы должна быть минимальная ширина, чтобы у пользователей с меньшим разрешением при просмотре страницы оставались работоспособны все элементы сайта.

Контент страницы должен быть отцентрирован, чтобы у пользователей с большим разрешением при просмотре страницы контент находился перед глазами — в центре страницы.

Длина текста

Текст должен оставаться в рамках родительского блока при переполнении и не должен вываливаться или обрезаться из родительского блока.

Родительский блок должен сохранять минимальные размеры при недополнении.

Слова длиннее минимальной ширины должны переноситься.

Размеры элементов

Контент больше ширины родителя не должен выходить за его пределы, ломать сетку или смещать другие блоки.

Контент больше ширины родителя не должен выходить за его пределы, ломать сетку или смещать другие блоки.

Количество элементов

При увеличении количества элементов они должны оставаться в рамках родительского блока и последние блоки должны выравниваться по направлению текста.

Элементы могут переноситься на следующую строку при уменьшении размера родителя.

При проверке переполнения в браузере Safari необходимо добавлять текст не через инспектор браузера, а через редактор кода, редактируя страницу HTML. В противном случае текст будет добавляться в одну длинную строчку.

Зачем нужен критерий

Верстальщик должен предусматривать ситуации, в которых контент может меняться, и подготавливать вёрстку к изменениям контента.

При проверке этого пункта следует ориентироваться именно на параметры, указанные в макете. Из-за особенностей отображения шрифтов на разных платформах, определение этого критерия на глаз может привести к ошибке. Помимо этого, стоит допускать разное межбуквенное расстояние в макете и в финальной вёрстке. Считать разное межбуквенное расстояние ошибкой стоит только в том случае, если оно явно указано в макете.

Рекомендуем проверять с помощью инструмента PerfectPixel (работает в Chrome, Firefox).

Зачем нужен критерий

Заказчик может не принять работу, если вёрстка будет отличаться от согласованному макета. Поэтому веб-разработчик должен не просто сверстать сайт по образцу, а сделать это близко к согласованному макету.

Чтобы сайт как можно точнее совпадал с утвержденным дизайном, веб-разработчики придерживаются концепции Pixel Perfect. Это способ вёрстки строго по макету, при котором размеры и интервалы из макета соблюдаются с точностью до нескольких пикселей.

Допустимые различия нужны для компенсации несоответствий макету, связанных с отличиями отображения элементов в разных графических редакторах, браузерах и операционных системах.

При проверке этого пункта следует оценивать наличие эффектов и их соответствие стайлгайду.

Правильно

Неправильно

Неправильно

Неправильно

Правильно. Код написан в одном стиле.

  
Новости



  
Галерея


.news {
  color: #000000;
}

.news-title {
  color: #ff0000;
  background-color: #ffffff;
}

Неправильно. Одинаковые элементы разметки имеют разные отступы и переносы.

  

    Новости
  


Галерея

Неправильно. Один и тот же цвет написан в разных нотациях.

.news {
  color: red;
}

.news-title {
  color: rgb(255, 0, 0);
  background-color: #ffffff;

Зачем нужен критерий

Требования, перечисленные в кодгайде Академии, нужно соблюдать в рамках обучения. В других компаниях требования могут отличаться.

Кодгайд необходим для сохранения единообразия кодовой базы, которое помогает всем участникам команды работать в одинаковых условиях.

Именование папок и файлов

Правильно. Названия папок и файлов состоят из английских слов.

barbershop/
  styles/
    styles.css
  images/
    logo.svg
    hammer.jpg
    sun.png

Неправильно. Названия папок и файлов написаны транслитом или не словами.

proekt/
  stili/
    stili.css
  SCripts/
    MySctips.js
  i/
    logotip.svg
    098sd9f8sd0f8.png
    imagine image.jpg

Именование классов

Правильно. Названия классов состоят из английских слов.

.header-logo {
  …
}

.footer-social {
  …
}

Неправильно. Названия классов написаны транслитом.

.shapka {
  /* стили */
}

.podval {
  /* стили */
}

.glavniy-logotip {
  /* стили */
}

Правильно. Значения атрибутов состоят из английских слов.

Зачем нужен критерий

Английский язык — это общепринятая договорённость в среде разработчиков. Единый подход именования позволяет быстрее знакомиться с кодовой базой.

Правильно. Комментарий описывает механику взаимодействия с элементом. Таким образом передаются знания от одного разработчика другому.

Правильно. Комментарий скрывает часть разметки, но при этом имеет пояснение, в каком случае эту часть нужно восстановить.

  

  

Правильн

Правильно. Комментарии поясняют структуру разметки, позволяя быстрее навигировать по файлу.

  
Пункт
  
Пункт








/* Header */
.header {
  …
}

/* Footer */
.footer {
  …
}

Неправильно. Код закомментирован и не имеет описания.

Неправильно. Код закомментирован и имеет неосмысленное описание: комментарий не помогает понять, почему код закомментирован.

Зачем нужен критерий. Большое количество закомментированного кода засоряет разметку, усложняет понимание и дальнейшую поддержку кода. Если фрагмент кода по какой-то причине должен быть закомментирован, то хорошие поясняющие комментарии помогут быстрее ознакомиться с его функциональностью.

Правильно. Файл slider.css находится в папке проекта и подключен в разметке.

barbershop/
  styles/
    styles.css
    slider.css


  
    

Неправильно. Файл slider.css находится на файловой системе, но не подключен в проекте.

barbershop/
  styles/
    styles.css
    slider.css // не подключён


  

Неправильно. Файл slider.css подключен, но не влияет на стилизацию страницы.

barbershop/
  styles/
    styles.css
    slider.css // подключен, но пустой


  
  

Зачем нужен критерий. Неиспользуемые файлы засоряют файловую структуру и усложняют поддержку сайта.

Правильно. На странице используются структурные ориентиры. Тега