Стандарт правильной верстки: часть первая

Стандарты придуманы в качестве еще
одного препятствия для нас, простых
смертных, чтобы преодолевать их и превосходить.
Аланис Мориссетт

От разногласий не спастись, если одним делом занимается несколько человек. Разработка сайтов – не исключение: всегда найдется тот, кто смыслит в дизайне, программировании или верстке лучше, всегда будут те, кому мнение “умника” придется не по нраву. Чтобы уладить конфликт еще до его проявления, можно договориться друг с другом, сформулировав некий стандарт и описав в нем все спорные нюансы. В нашей компании мы поступили также, сформулировав стандарт верстки, который я и планирую вам представить в несколько доработанном виде.

Общие требования к верстке

В этом разделе описываются требования, предъявляемые к виду страницы и к удобству ее восприятия

1. Вид сверстанной страницы должен максимально соответствовать дизайну.
Ни дизайнера, ни клиента, ни посетителей не волнует, насколько сложна верстка. В идеале работник должен сделать правильную верстку, которая будет соотвествовать дизайну. На практике получается совсем не так: HTML не всемогущ :) , однако к этому можно стремиться.

2. По виду страницы должно быть однозначно понятно, к какому разделу сайта она относится.
Иногда (а точнее часто) дизайнеры ленятся указывать заголовки на странице, не подсвечивают нужные пункты. Дело осложняют еще более ленивые верстальщики и, когда приходит очередь программистов, требуется немало времени чтобы разобраться, какая именно страница им нужна и в каком виде.

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

4. Если страниц несколько, то они должны быть связаны друг с другом ссылками.
Будучи ярым противником выполнения этого пункта, я все равно включил его в список. Почему? Значительно удобнее смотреть верстку, когда страницы слинкованы друг с другом: и логика сайта становится яснее, и каждый раз открывать новый файл не приходится. Красота!

Требования к коду

1. Готовая страница должна корректно отображаться в IE6+, Google Chrome 1+, Mozilla Firefox 2+, Opera 9.XX +, Safari 3+.
Многие верстальщики видали в гробу все семейство браузеров IE и старые Safari (я, кстати, тоже). Однако со статистикой не поспорить. Доля Internet Explorer до сих пор велика, а значит, что верстать (и делать это правильно) под IE6 и IE7 все же придется.

2. Страница должна проходить валидацию без ошибок.
Верстальщиков, которые делают невалидные сайты становится, к счастью, все меньше и меньше. Оно и верно: валидный код делается, наверное, проще, чем невалидный: заморочек вроде обсчета padding в разных браузерах почти нет, правда, и отвественность за верстку выше.

3. Валидность CSS приветствуется, но наличие CSS хаков допускается.
Я мечтаю, что рано или поздно IE перестанет существовать как браузер и будет хранится только в палате мер и весов как эталон идиотизма. Пока это не прозоишло, придется использовать либо conditional comments либо CSS-хаки для этого чуда программистской мысли :)

4. Кодировка всех файлов верстки должна совпадать (UTF-8 или Windows-1251).
Конечно же, кодировку для каждого файла можно указать и в параметрах при подключении скрипта или CSS, но не стоит обнадеживаться: далеко не каждый программист обратит внимание на различия в кодировках и кракозябры на сайте вам обеспечены.

5. Все стили должны быть “убраны” в CSS.
Чистый HTML-код радует глаз и греет душу. Отсуствие вставок вида style=”…” сильно упростит работу вам и сильно уменьшит HTML-файл.

6. У страницы должен быть указан title и мета-теги description и keywords.
Это, наверное, тоже относится к культуре программирования: не факт, что программист найдет им применение (а если и найдет, то может заменить их на свою функцию по выводу нужных параметров). Я обычно оставляю их пустыми: а вдруг пригодятся? :)

7. Использование каждого тега в верстке должно быть уместно.
На эту тему я, кажется, уже писал в одной из статей. А тем, кто ее еще не читал, предоставлю вот такой краткий список:

• h1..h6 – заголовки;
• ul, dl,.. – списки;
• p – параграфы; //абзацы
• address – поле для отображения адреса;
• table – для отображения табличных данных;
• th – заголовок таблицы;
• td – данные в таблице;
• div – блоки страницы.

8. Названия классов классов и идентификаторов тега в правильной верстке должны соответствовать содержимому тега.
они должны быть примерно такими:
Типовые идентификаторы:

• header – заголовок страницы;
• footer – подвал страницы;
• content – контент (текст);
• main – контейнер для контента;
• aside/lside/rside – колонка на странице / левая колонка / правая колонка;
• menu / submenu – меню различной вложенности;
• logo – логотип;
• copyrights – копирайты

Типовые классы:

• .menu – меню;
• .menu .active – активный элемент в меню;
• .first – первый элемент списка;
• .last – последний элемент списка;
• .odd – нечетный элемент списка;
• .even – четный элемент списка;
• .news – список новостей;
• ul.tiles – список плиткой (слева направо);
• .paginator – счетчик страниц;
• .breadСrumbs – «хлебные крошки»
• input.text – стандартное форматирование для поля ввода текста;
• input.submit – кнопка отправки;
• table.reset – таблица без границ и без отступов внутри ячеек;
• ul.reset – список без отступов;
• div.hr – горизонтальная линия;
• .error – класс сообщения об ошибке;

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

• Оставить комментарий (2)
• Теги: CSS, featured, HTML, О верстке, семантичная верстка, стандарты