Мы рассмотрели несколько приёмов, как упростить себе задачу вёрстки ХТМЛ‑страницы. Пришло время расширить и обобщить эти приёмы и сформулировать универсальные принципы надёжной вёрстки. Почему именно надёжной? Потому что вёрстка — очень текучая субстанция, которая должна адаптироваться к большому количеству условий, и надёжность — её критичное качество. Страница не должна разваливаться ни при каких обстоятельствах и должна работать на любых устройствах и ширинах экрана.

1. Учитывать иерархию макета

Иерархия блоков в вёрстке должна совпадать с логической иерархией дизайн‑макета. Практически всегда любой блок подчинён другому или зависит от каких‑то параметров родителя.

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

2. Разделять ответственность элементов

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

Допустим, наш пункт меню выглядит как любая другая ссылка на сайте. Как его спозиционировать? Можно спозиционировать сам элемент a внутри шапки, а можно добавить к нему обёртку и делегировать функцию позиционирования ей. В первом случае придётся «загрязнять» стили элемента ссылки параметрами позиционирования. Во втором мы разделили ответственность ссылки и её обёртки.

Ссылка — рок‑звезда, а обёртка — водитель, который доставит её в нужное место в шапке.

Всё в одном элементе
<a href="/contacts" class="menuLink">Контакты</a>
Ответственность разделена
<div class="menuItem">
  <a href="/contacts">Контакты</a>
</div>

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

3. Минимизировать количество кода

Один и тот же блок можно сверстать разными способами. Нужно всегда выбирать способ, при котором будет задействовано минимальное количество разметки и стилей. Периодически полезно пересматривать старые куски кода — возможно с развитием продукта и технологий вёрстку можно упростить.

Вопросы, которые стоит задавать себе:

  • Можно ли уменьшить вложенность элемента?

  • Можно ли стандартизировать стили похожих элементов?

  • Можно ли использовать сокращённые ЦСС‑свойства?

4. Структурировать код

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

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

Плохо
<form><label>Электронная почта</label><input type="text" value="" />
<button class="button_blue"><b>Зарегистрироваться</b></button></form>
Хорошо
<form>
  <label>Электронная почта</label>
  <input type="text" value="" />
  <button class="button_blue">
    <b>Зарегистрироваться</b>
  </button>
</form>
Например, БЭМ

Для повышения осознанности перед началом проекта стоит выбрать правила именования компонентов и форматирования кода и строго придерживаться их, даже если кажется, что в отдельном месте «и так всё понятно».

Например, БЭМ

5. Не использовать инлайновые стили

Инлайновые стили подходят для небольших проектов, например для единичных статических промостраниц. Но в больших проектах инлайновые стили нарушают целостность компонентов, непредсказуемо меняют их поведение. С течением времени инлайновые стили расползаются, и поддерживать такой код становится всё труднее. В идеальном мире инлайновых стилей быть не должно, особенно если над проектом работают несколько разработчиков.

6. Сверяться с макетом

PerfectPixel — расширение для Хрома, которое накладывает картинку поверх страницы. С его помощью можно буквально подгонять вёрстку под макет.

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

PerfectPixel — расширение для Хрома, которое накладывает картинку поверх страницы. С его помощью можно буквально подгонять вёрстку под макет.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы