Гайдлайны для вёрстки (мода сезона «Осень 2010»)

05.09.2010 22:53 / Артём Волк / 1767 просмотров / ...

Обновлено 25.09.2010

Черновик наших гайдланов по вёрстке, скорее всего будет дополняться и обновляться. Объём требований вырос почти в три раза за год.

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

Кодировка всех файлов, если не указано обратное — UTF-8, без BOM.
Использование транслита с русского в именах файлов, CSS-селекторах и т.п. недопустимо. Правильно: #header, неправильно: #shapka.
Комментариев кириллицей лучше избегать, особенно в CSS и JavaScript.
Отступы делаются табуляцией.
CSS и JavaScript размещаются в большом количестве файлов, в них свободно используются комментарии. Подразумевается, что в реальном проекте эти файлы будут объединены, минимизированы и архивированы в gzip.

Философские вопросы

Чем меньше графики, тем лучше
Решение средствами CSS лучше решения с графикой
Cложное решение с CSS-хаками хуже решения с JavaScript

XHTML

Структура

Файлы могут быть статичными, но если верстаемых страниц больше одной, скорее всего имеет смысл вынести общие элементы в отдельные файлы и собирать страницу с помощью любой серверной технологии (SSI, PHP, ASP.NET и т.д.).
Использование тегов в соответствии с семантикой.
Использование тегов по их назначению вместо <div> и <span> там, где это возможно.

Оформление

Использование отступов (допустимо «сбрасывать» отступы внутри больших блоков).
Закрывающие теги больших блочных элементов должны заканчиваться комментарием с указанием CSS-селектора для блока, чтобы было понятно какой тег закрывается. Это будет полезно на том этапе, когда XHTML-код разбивается на несколько файлов-шаблонов.

Пример:

<div id="header">
	<div class="news-item">

	</div><!-- /.news-item -->
</div><!-- /#header-->

Содержимое

XHTML-код должен проходить валидацию по выбранному DOCTYPE.
Тексты на макете должны быть на том языке, на котором будет сайт, если есть возможность следует использовать реальные тексты и данные, если такой возможности нет, то специальные тексты.
В тексте должна быть расставлена правильная типографика для языка сайта.

Особые случаи

Применение inline-стилей (атрибут style="") запрещено.
Пустые ссылки (включая те, на которых будут только JavaScript-обработчики) должны выглядеть так: <a href="#">Кликни меня</a>, а не так <a href="javascript:;">Кликни меня</a>. Причины описаны в отдельном сниппете.

Изображения

Не должно быть неиспользуемых изображений.
Файлы должны быть оптимизированы по размеру для веба, должны быть правильно выбраны форматы файлов в зависимости от характера изображения.
Там, где это возможно, лучше использовать PNG8 вместо GIF.
Для больших файлов в формате PNG24 можно использовать вынесение непрозрачных частей картинки в отдельный файл другого формата и сборку финальной картинки с помощью фоновых изображений.
Если позволяет задача, предпочтительнее делать CSS-спрайты сразу на этапе вёрстки.
Файлы нужно разделять на папки по предназначению, временные файлы изображений (например, временные баннеры) нужно класть в отдельную папку, например /images/temp/), чтобы их можно было легко удалить в будущем.

Правила именования

Имена файлов с фоновыми картинками должны начинаться с префикса bg-, иконок с icon-, кнопок с button-.
В качестве разделителя слов в названиях файлов необходимо использовать дефис.
Правила сокращения некоторых слов в именах файлов:
- left = l
- right = r (например, user-pic-l.png)
- top = t
- bottom = b
- ascending = asc
- descending = desc
- horizontal = h
- vertical = v
Допустимы объединения сокращений: bg-table-lb.png (фоновая картинка (bg-), левая (l) нижняя (b) часть).
Слова active, inactive, selected, up, down, field не сокращаются.

JavaScript (для случая использования jQuery)

Общие рекомендации

Код инициализации элементов на текущей странице по событию .ready() должен быть вынесен в отдельные файлы (по одному на страницу). Файл можно подключать как внешний ресурс или подставлять прямо в шаблон средствами серверных скриптов.
Если не оговорено иначе необходимо использовать jQuery.noConflict()

Скрипты для проекта

Плагины, не специфичные для данного проекта (общего назначения) должны придерживаться стандартных именований файлов для JQuery-плагинов, например, jquery.supertip.js
Плагины, специфичные для данного проекта (т.е. те, которые нельзя будет использовать нигде больше) необходимо именовать следующим образом: jquery.<кодовое название проекта>_<имя плагина>.js, название самого плагина в этом случае будет <кодовое название проекта>_<имя плагина>.

Сторонние библиотеки

Если сторонний плагин поставляется в сжатом (minimized, packed) и исходном виде оба файла должны быть включены в проект, но подключаться должен сжатый вариант. Исключение — библиотеки JQuery и JQuery UI, для них нужно использовать только минимизированные версии.
Если сторонний плагин требует кроме JavaScript-кода подключения CSS-файлов и наличия картинок, эти элементы должны быть вынесены в соответствующие подпапки проекта (см. пример структуры файлов проекта ниже).

Размещение файлов

При небольшом количестве файлов (до 10) файлы можно размещать в одной директории, если файлов больше и\или некоторые компоненты состоят из нескольких файлов лучше сделать подпапки для хранения.

Особые случаи

Для JSON-сериализации предпочтительнее использовать эту реализацию.

Flash

Для вставки Flash следует использовать swfobject если не используется библиотека jQuery и jQuery SWFObject если эта библиотека используется.

CSS

Организация файлов

CSS-код разбивается на несколько файлов по смыслу. Минимальный набор файлов:

reset.css — сброс стилей браузера по умолчанию.
layout.css — общие стили, формирующие сетку (макет, layout) страниц. Часто в этом файле могут использоваться следующие приёмы и техники
- Sticky footer
- Шрифты в em
- 120 dpi fix, который, кстати, не работает для Opera 10.5x.
print.css — CSS для печати.
widgets.css — общие элементы интерфейса (кнопки, иконки, поля ввода)
ui.css — более крупные элементы интерфейса (вкладки, группы полей и т.п.)
... (другие файлы по смыслу)

Часто используемые приёмы и техники (неполный список)

Творческое использование списков для формирования меню и т.п. элементов.
Творческое использование фоновых картинок для списков, иконок и т.п.
CSS-спрайты для уменьшения числа запросов на сервер, реализации hover-эффектов
Предзагрузка (preload) картинок с помощью CSS.
Выравнивание одной строки по вертикали с помощью line-height.
Выравнивание блоков по центру с помощью margin: 0px auto;.
Растягиваемые графические кнопки

Структура CSS

Для облегчения чтения кода нужно использовать отступы, иллюстрирующие вложенность элементов, а чтобы не допускать черезмерной глубины вложенности — «сбрасывать» отступы для каждого логического блока страницы.

Пример (наличие комментария с именем блока обязательно):

/*
	.b-user
*/
.b-user
	{
	...
	}

	.b-user .login
		{
		}

Селекторы вида #id допустимо использовать только для элементов, определяющих общий макет страницы, перечень стандартных наименований: #header, #footer, #sidebar, #main, #page, #content. Таких элементов должно быть минимальное количество, лучше от них полностью отказаться в пользу блоков с классами l-.
Все остальные элементы должны быть сверстаны с использованием классов, общие селекторы для тегов (например, h1, h2) использоваться не должны. Такой подход даст следующие преимущества:
- Если по мере развития сайта блок, который раньше был единственным на странице будет необходимо продублировать (был один блок новостей, стало два) не придётся менять селекторы.
- Это удобно для некоторых технологий, например, ASP.NET (особенно актуально для версий младше, чем 4.0), где генерация атрибута id осуществляется серверным кодом.
- Меньше вероятность конфликта наименований
Разделитель слов в именах классов — символ дефиса, стандартные обозначения блока-обёртки wrap, внутреннего блока — inner
Классы для колонок таблиц должны начинаться с префикса col-
TBD: Остальные гайдлайны этого уровня ещё в процессе упорядочивания, осмысления и проверки на практике, за основу взята техника вёрстки независимыми блоками

Структура одного CSS правила

Свойства указываются в следующем порядке (от общего к частному):
- position, left, top
- display
- float, clear
- width, height
- margin, padding, border
- vertical-align
- text-align
- background
- color
- font, text-decoration
- list-style
- white-space
- остальные свойства...
Следующие свойства должны использоваться только в сокращённом виде: margin, padding, border, background, list-style, кроме случаев, если нужно переопределить только одно из значений. Следующие свойства желательно указывать в сокращённом виде, если это возможно: font.
Цвета должны указываться в HEX-формате заглавными буквами, например: #F3F3F3.
Для указания гарнитуры шрифта следует максимально использовать наследование. Последним в списке всегда должно идти название универсального семейства (serif, sans-serif и т.п.).

Сторонние CSS-файлы

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

jquery.fancybox-1.3.1.css` -- оригинальный немодифицированный файл
jquery.fancybox.override.css` -- переопределение нужных правил

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

Поддержка IE6

В случае необходимости поддержки IE6 отдельный CSS-файл может использоваться в следующих целях:
- Замены картинок PNG24 на упрощённые аналоги
- Исправления ошибок рендеринга браузера
Предпочтительно обойтись упрощённой графикой, а не использовать png fix для IE6.
Отдельный CSS-файл для этого браузера необходимо подключать с помощью условных комментариев.

Поддержка IE7, IE8

Для IE7 и IE8 обычно можно обойтись без отдельного файла стилей.
Реализация следующих дизайнерских приёмов может быть реализована средствами CSS во всех браузерах, кроме указанных. Если некоторое упрощение внешнего вида допустимо, следует использовать CSS-решение:
- Закруглённые углы.
- Тени и glow (как для блоков так и для текста, может быть реализован в IE с помощью фильтров).

Особые случаи

Применение CSS-хаков следует свести к минимуму.
Использование конструкции !important нежелательно. В большистве случаев без неё можно обойтись.
Использования <div style="clear: both"></div> или <br clear="all" /> почти всегда можно избежать одним из способов (в порядке предпочтения):
- указав clear: both; в CSS для блока, который идёт ниже;
- использовав приём overflow:hidden (недостаток метода: блоки с абсолютным позиционированием, например всплывающее меню будет обрезано границами блока)
- использовав приём с display: table;.
- использовав Easy Clearing
- использовав любой другой приём
В случаях крайней оптимизации можно объединить CSS для экрана и для печати
Применение правильной версии кода для сброса стилей по умолчанию позволяет не использовать HTML-атрибуты cellspacing и cellpadding для таблиц.
Необходимо применять &nbsp и white-space: nowrap; там, где текст не должен переносится.

Пример структуры файлов проекта

В примере используется JQuery-плагин Fancybox в качестве примера плагина с собственными CSS-файлами и изображениями.

/css
	reset.css
	layout.css
	ie6.css
	...
	jquery.fancybox-1.3.1.css 
	jquery.fancybox.override.css 
	...
/images
	/icons
		...
	/teaser
		...
	/tables
		...
	/fancybox
		...
	/temp
		temp-informer100x100.gif
		temp-banner768x60.png
	favicon.ico (в реальном проекте должен быть в корне сайта)
/js
	jquery-1.4.2.min.js 
	...
	jquery.fancybox-1.3.1.js 
	jquery.fancybox-1.3.1.pack.js 
	...
/flash
	some-movie.swf
/templates
	header.php
	footer.php
	page_main.php
	page_user.php
	page_about.php
	...
index.php

Идеи для дальнейшей проработки

Бывают ли случаи, когда без style="display: none" нельзя обойтись?
Задокументировать стандартные приёмы создания CSS-layout'ов (2, 3 колонки фиксированные и резиновые)?

В облаках

Синдицируй это

Свеженькое

Популярное

Гайдлайны для вёрстки (мода сезона «Осень 2010»)

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

Философские вопросы

XHTML

Структура

Оформление

Содержимое

Особые случаи

Изображения

Правила именования

JavaScript (для случая использования jQuery)

Общие рекомендации

Скрипты для проекта

Сторонние библиотеки

Размещение файлов

Особые случаи

Flash

CSS

Организация файлов

Часто используемые приёмы и техники (неполный список)

Структура CSS

Структура одного CSS правила

Сторонние CSS-файлы

Поддержка IE6

Поддержка IE7, IE8

Особые случаи

Пример структуры файлов проекта

Идеи для дальнейшей проработки