От автора: в верстке сайта, как и в любом другом деле, нужно придерживаться определенных правил, иначе ваша работа будет выполнено не совсем качественно. Каких же правил лучше придерживаться при верстке?
Порядок – основа всего
Прежде чем вы приступите к работе, все должно быть подготовлено к ней. В этой статье мы рассмотрим это и другие правила верстки сайтов. Гораздо проще погрузиться в процесс, когда вы полностью создали для себя подходящие условия. Как этот принцип применить к созданию сайта? Прежде всего, вам нужно позаботиться о порядке.
И это я сейчас не о пыльной клавиатуре. Это, конечно, тоже может отвлекать, но сейчас не об этом. Вы когда-нибудь скачивали готовый профессиональный шаблон сайта? Там наверняка все файлы разложены по папкам и понятно подписаны, так что даже смотреть приятно. Сделайте и вы так у себя.
Создайте отдельную папку для будущих таблиц стилей, скриптов, библиотек, шрифтов, графики и все, что вам еще может понадобиться. Кстати, в сети уже есть подобные готовые архивы, в которых содержатся все необходимые папки и файлы для начала работы.
Рис. 1. В профессиональном шаблоне все разложено по папкам. К такому нужно стремиться и вам.
Порядок не только в файлах. Такого же принципа нужно придерживаться и в случае с написанием кода. В одной из прошлых статей мы говорили о W3C-валидаторе, который проверяет любую веб-страничку на количество ошибок. За ошибки он понимает в том числе и некрасивый код (отсутствие пробелов в нужных местах, плохое форматирование, отсутствие кавычек и т.д.). Сегодня браузеры научились исправлять мелкие ошибки верстальщика, но стоит ли писать так, что потом сам ничего не поймешь, если нужно будет исправить?
Правильная структура
Чем больше я просматриваю код профессионалов, тем больше убеждаюсь, что практически всех их объединяет правильный структурированный подход к работе. Почти всегда вначале мы видим базовые стили, которые описывают какие-то основные свойства. Они могут занимать даже несколько сотен строк.
Только после них идет уже так называемая стилизация. Опять-таки, сначала описываются элементы из верхней части сайта (шапка, меню). Потом основное содержимое. И так далее. Это приятно читать и приятно редактировать. А если вы уже на 5647-й строке и пишите какие-то медиазапросы, то пишите там только их и не вздумайте там же составить правила для логотипа в шапке, который вы просто забыли вовремя описать.
Очень желательно, чтобы в коде прослеживалась иерархия. Оставляйте комментарии везде, где считаете это нужным.
Рис. 2. Это – иерархия в коде. Благодаря этому намного проще читать его.
Минимум кода
Хотя это и не обязательное требование, верстка должна быть как можно более компактной. Для этого верстальщик должен знать, как можно сокращенно записывать различные свойства. Например, фон. Для фона существует огромное количество свойств. Давайте представим, что мы задаем каждое из них, не пользуясь сокращенной записью. Тогда это будет выглядеть так:
|
1 2 3 4 5 6 7 |
.sample_selector{ background-color: #fff; background-image: url(kartinka.jpg); background-position: top right; background-attachment: fixed; background-repeat: repeat-y; } |
А ведь все это можно записать в одну строку:
|
1 2 3 |
.sample_selector{ background: #fff url(kartinka.jpg) repeat-y fixed top right; } |
Так мы сэкономили кучу места в файле и сделали его легче. И это касается не только свойства background, но и многих других.
То же самое касается и скриптов. Если вам нужно реализовать какой-то функционал, нужно сделать это в максимально короткой записи. Почему все любят jQuery? Девиз этой библиотеки: “Write less, do more.” А для разработчика нет ничего лучше, чем получить много, а написать мало.
Веб 2.0
Хотя о Веб 2.0 я упоминал уже в предыдущих статьях, необходимо не забывать о нем. Согласно этой концепции, html, стили и скрипты должны быть отделены друг от друга. Графика для сайтов должна быть оптимизирована. Не используйте устаревшие теги, а также аккуратно применяйте новые, не забывая о кроссбраузерности.
Роль семантики
Семантическая составляющая становится все более значимой. Это означает, что все больше сайтов верстаются с поддержкой новых тегов, которые придают странице больший смысл. Если вы верстали сайты 10 лет назад, как вы это делали? Наверняка с помощью таблиц или блоков. Потом задавали классы и идентификаторы и начинали работу над стилизацией. Только вот seo правила верстки сайта при этом практически не соблюдаются. В действительности, какую смысловую нагрузку несет тег div? Никакую, это просто пустой контейнер.
Получается, с точки зрения семантики, ваш сайт состоит из кучи пустых блоков. Вы понимаете, что это не так, но поисковый робот, например, не понимает. Специально для этого в HTML5 были введены семантические теги, которые позволяют придать страницам гораздо больше смысла. Например, для меню появился тег
