Советы по верстке сайта от специалистов DST Global

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

Не спешите приступать к верстке

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

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

Избегайте визуальных редакторов

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

• теряется контроль над кодом — разработчик со временем утрачивает понимание структуры HTML-документа;
• с CSS-кодом — аналогично, к тому же код не оптимизируется при генерации;
• не все редакторы предоставляют исчерпывающий интерфейс, а значит, эти недоработки приходится компенсировать вручную.

Пишите валидный код

Соблюдайте все стандарты, когда пишете HTML-код: закрывайте парные теги, вкладывайте теги друг в друга согласно общим правилам, не упускайте расстановку обязательных атрибутов. Свою работу можно проверить с помощью online-сервиса валидации.

Ошибки нужно исправлять, даже если браузер «закрывает на них глаза». Во-первых, нет гарантии, что он будет делать это завтра, во-вторых, к корректности кода достаточно строго относятся поисковые системы, что влияет на рейтинг сайта.

Называйте вещи своими именами

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

Двигайтесь от общего к частному

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

Есть такая хорошая практика. В файле стилей вначале определяются стили для всех тегов (тело, заголовки, параграф и т.д.). К этому моменту весь HTML-код уже должен быть. И только потом создаются классы: в иерархическом порядке они описываются в CSS-файле, и принимают стилевые правила.

Отделяйте мух от котлет

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

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

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