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