Верстка по стандартам html

Валидация

Зеленый текст W3C validator’а – это наша цель, так что не забывайте закрывать теги, да прописывать обязательные параметры…

Форматирование отступами

Отступы – невидимые в браузере, но такие незаменимые для верстки (X)HTML’а – они в разы повышают читаемость кода.
И их использование – просто песня – начинаешь новый вложенный тег – сделай отступ, закрываешь – убери.
В качестве отступа принято использовать символ табуляции (tab) либо несколько пробелов (обычно 4).

Точно так же можете применять отступы в вашем CSS файле:

#header < .. >#header h1 < .. >#header h2 < .. >#content < .. >#content .title < .. >#content .post

P.S. Когда займетесь блошиной оптимизацией вашего сайта, то решите, что 4 пробела – это в 4-ре раза больше трафика чем один символ табуляции 🙂

Теги любят порядок

Очень часто в шапке нашего сайта мы пишем тег с названием нашего сайта, да еще и оформляем его ссылкой на главную страницу сайта, и для этого обрамляем наш тег в . Большинство браузеров адекватно отобразит нам сие творение, но с технической точки зрения это не верно, т.к. тег отображается как inline, а как block, а block элементы не должны располагаться в inline элементах (это bad practices).

“Дивная” верстка

В английском языке есть термин “divits” – сим термином награждают HTML разметку с чрезмерным использованием div’ов без потребности, я же обзываю такие творения “дивными”. Обычно таким грешат новички, которые для применения стилей CSS оборачивают элементы в div’ы, что и приводит к их размножению без нужды.

в ; все, что мы можем сделать с мы можем проделать и с
.

Выбираем правильные имена

Самое время обсудить правила именования id и class’ов. Возьмем пример из предыдущего абзаца – у нас использовался неупорядоченные список с идентификатором “bigBarNavigation.” “Navigation” – эта часть имени несет смысловую нагрузку о содержимом списка, но “big” и “Bar” относится лишь к внешнему представлению, актуальному на данный момент, но если мы изменим дизайн сайта (и, скажем, навигация у нас будет выпадающим меню), то данный ID будет неактуальным и добавит лишь путаницы.

Приведу примеры “правильных” id и class’ов: “mainNav”, “subNav”, “sidebar”, “footer”, “metaData”, а так же “неправильные” имена (которые описывают дизайн): “bigBoldHeader”, “leftSidebar”, “roundedBox”.

CSS’у CSS’ное

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

HTML практически без изменений:

И совсем чуть-чуть изменений в CSS:

Class/id для

Зачем? Объясню на примере – представьте – у Вас есть страница сайта на которой расположение элементов иное нежели на всех остальных, дабы сие сотворить Вам необходимо внести изменения в существующий стиль для div’a с для этого создаете новый создаете и вносите изменения, и так для каждого элемента в нашем шаблоне, а если у нас таких страниц несколько?, а потом сие еще внедрять разработчику сайта…

Если же у body был класс, то мы бы добавили к нему еще один ( ) и уже в CSS прописывали изменения для всех дочерних элементов (не зря ж это каскадная таблица стилей). Таким образом мы очень сильно упрощаем жизнь разработчикам, которые будут внедрять наш дизайн.

Логический порядок

Если это вообще возможно, старайтесь придерживаться строго порядка при расположении элементов, приведу пример:

Вы можете добавить описание стилей CSS в самом теле HTML, используя соответствующий тег

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

То же самое касается и JavaScript’a, но о нем чуть позже.

Стандарты кодирования CSS

К сожалению я не нашел стандартов для написания файлов стилей, лишь пожелания:

• Комментарии к элементам
• Форматирование отступам – от этого не все в восторге
• Правильные имена селекторов – уже обсуждалось выше

Отделяем Javascript от HTML

Нам следует отделить всю функциональность JavaScript’а от HTML’а и запихнуть её в отдельный файл. Для этой цели лучше всего нам подойдет jQuery фреймверк, ибо удобно, быстро, и красиво (да и взгляните на Click!

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

В JavaScript файле будет что-то типа:

. $('a.doSomething').click(function()< // Do something here! alert('You did something, woo hoo!'); >); .

Семантическая верстка

Возвращаясь к теме верстки стоит упомянуть – дабы писать красивый JavaScript код с использованием jQuery нам необходима максимально прозрачная структура документа.

Очень Плохо:

 
 
First Option
 
First option description
 
 
Second Option
 
Second option description
 
 
 

Плохо:
Вроде получше, но надо бы избавиться от обработчиков событий:

 
First Option
 
First option description
 
Second Option
 
Second option description
 
 

Хорошо:
Мы убрали все лишние, и добавили id к элементу dl – дабы в JavaScript’е мы смогли добавить обработчики событий для элементов dt:

First Option 
First option description
 
Second Option
 
Second option description
 
 

К примеру вот так будет выглядеть обработчик событий:

$('#OptionList dt').click(function()< /* do something */ >);

Лечим JavaScript зависимость

При разработке web-приложений стоит избегать JavaScript зависимости, т.е. наш сайт должен работать и при отключенном JavaScript’e, конечно, каких-то красивостей не будет, но сайт должен работать.

Приведу простейший пример, в данном случае, в зависимости от времени в браузере появится надпись “Доброе утро!” либо “Добрый день!”, но стоит нам отключить JavaScript, и пользователь не увидит ни то, ни другое приветствие.

var now = new Date(); if(now.getHours() < 12) document.write('Доброе утро!'); else document.write('Добрый день!');

Приветствие размещается в теле странички:

И заменяется другим приветствием в зависимости от времени суток:

var now = new Date(); if(now.getHours() >= 12)

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

Теперь приведу более сложный пример, реализация которого невозможна без изменений серверной части нашего приложения. Давайте сделаем загрузка контента страницы посредством AJAX’а, но при этом оставим поддержку браузеров с отключенным JavaScripti’om, возьмем уже знакомый нам пример с меню сайта:

Данный пример работает у нас без JavaScript’a, все страницы в нашем меню используют один и тот же шаблон для вывода информации, и по факту у нас изменяется лишь содержимое div’a с Естественно можно улучшить данный функционал используя для загрузки контента AJAX – для этого добавим следующий код:

В данном примере мы предполагаем, что сервер видя параметр ajax=true вернет нам не полностью всю страницу, а лишь обновление для div’a с (конечно сервер может быть умнее и не требовать явного указания на использования AJAX’а, а вполне удовлетвориться словив header X_REQUESTED_WITH со значением XMLHttpRequest)

Событие onload

Обычно все Javascript события вешались на “onload” тега – это позволяло нам выполнять их по завершению загрузки страницы. Забудьте это.
jQuery предоставляет нам специальный метод, называемый “ready”, именно он, позволит нам выполнять код после полной загрузки DOM. Именно благодаря ему, мы можем внедрять ненавязчивые скрипты, при этом полностью отделив Javascript от разметки. Используя $(document).ready() , мы можем поставить в очередь целый ряд событий и все они будут выполнены после загрузки страницы.

Плохо
Приведу пример кода для отображения alert-сообщения с текстом “Hello World”, без использования jQuery и события onload:

Хорошо
Old-school style – хорошо, коли у Вас нет необходимости во фреймворках:

А теперь с использованием jQuery напишем следующий скрипт:

Как видите – действительно просто.

Стандарты кодирования JavaScript

Хорошо, что мы определились с тем, что JavaScript у нас лежит у нас в отдельном файле, но надо бы его привести в божеский вид, т.е. нам нужны стандарты кодирования:

Написание комментариев, так же является хорошим тоном, но если они еще и будут помогать в генерации документации – будет лучше:

Так же правилом хорошего тона является сжатия исходных кодов JavaScript’а для уменьшения времени загрузки (для live-сервера):

P.S.

Если с jQuery у Вас возникли трудности, то советую почитать следующие статьи:

А ещё лучше – скачайте и изучите учебник jQuery для начинающих

Данная статья подготовлена по материалам:

Информация

Проекты

Блогролл

Источник