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

Ну вот наконец-то я добрался и до второй части “стандартов”. Прошел месяц, а может быть даже и больше, блог я существенно проапгрейдил, так что писать в него теперь не стыдно (об этом в другой статье). Сейчас же я продолжу старую песню о правильной верстке. Ready? Steady? Go!

Элементы на странице, их поведение и стили

1. Поведение тега и его внешний вид не должны кардинально отличаться от стандартных
Широко используемые теги должны быть сброшены к виду, подходящему под конкретный дизайн:

• p всегда имеет отступ (для оформления переносов строк лучше использовать <br />);
• h1, h2, h3, h4, h5, h6 всегда отличаются друг от друга размером шрифта (выше уровень – больше шрифт) и прочим форматированием;
• a (ссылка) всегда заметно выделяется из прочего текста форматированием (обычно – подчеркнута);
• img, который обрамлен ссылкой не должен иметь границ;
• table имеет стандартный для данного сайта дизайн;
• th отличается от td своим внешним видом.

2. Глобальные CSS-ресеты (CSS resets)  должны задавать внешний вид основных тегов по умолчанию.
К основным тегам по умолчанию я обычно причисляю следующие

• Теги форматирования текста: a, h1..h6, p, address, img
• Теги форм: input (советую использовать классы text, checkbox и другие для большего удобства), button, textarea, select
• Таблицы: table, tr, td и др.

Наличие CSS-резетов позволит упростить процесс разработки и избежать использования “лишних” классов в коде

3. CSS-ресеты вида * {…} категорически запрещены
Сбрасывать у элементов padding или margin, выставлять абсолютно всему, что есть на странице, какой-то конкретный шрифт или цвет нельзя: рано или поздно вы … запутаетесь. Поверьте на слово ;)

4. Использование !important крайне не рекомендуется
Параметр !important очень удобен, однако он разрушает логику верстки и сбивает с толку как вас, так и браузер. Задав свойство с помощью !important вы сможете перегрузить (заменить его) в другом классе только с помощью очередного !important

5. Тег body должен иметь цвет фона
Думаете, бред? По умолчанию документ имеет белый фон, однако никто не мешает пользователю поменять его в настройках браузера. Получается, что если вы верстаете белый сайт и не указываете цвет фона,  то в 0,1% случаев сайт будет иметь серый или голубоватый фон (спасибо цветовым схемам винды ;) ).

6. Размер шрифта можно задавать в % или в em, использование px крайне не рекомендуется
Пользователь может иметь свои настройки шрифтов. По умолчанию размер шрифта составляет 16 пикс, однако никто не мешает юзеру поставить собственные настройки (например, увеличить стандартные размеры), если он плохо видит. Я использую в верстке em, однако перед тем как приступать к работе, я задаю в body размер шрифта “по умолчанию”. Обычно он равен 75% (12 пикс). Далее я отталкиваюсь от этого размера, а em использую в качестве множителя.
Старые браузеры вроде IE6 умеют увеличивать масштаб страницы меняя размеры самого шрифта, если он указан в em, однако размеры, указанные в px изменяться им не могут. Следовательно, вы отбираете у пользователя часть важного для него функционала.

7. “Кликабельный” элемент должен являться либо кнопкой, либо ссылкой
Думаю, в случае с обычными ссылками и с кнопками вроде “Отправить” или “Очистить” все понятно. Но что делать с разными “вебдванольностями” вроде аяксовых ссылок “ответить” (чуть ниже выдвигается форма ответа), “выбрать город” (раскрывается список городов и т.д.)? В этом случае логично использовать ссылки: по ссылкам можно двигаться Tab-ом, по наведению на ссылку появляется “палец” (нет необходимости ставить его в CSS) и действие по клику можно продублировать в href для тех, у кого JavaScript отключен.

8. В том случае, если ссылка обрабатывается JavaScript-ом, в параметре href не должны содержаться вызовы функций
Параметр href выполняет не только служебные функции. В большинстве браузеров содержимое href-а показывается в статусбаре при наведении на ссылку. Таким образом, пользователь увидит вызов яваскриптовой функции.
Однако это не единственный недостаток: любую ссылку можно открыть в новом окне правой кнопкой мыши. Открыв новое окно из “неправильной ссылки” мы увидим JavaScript-код в строке адреса. Никакое действие выполнено не будет.
Суммируя два предыдущий пункта мы несколько вариантов решения проблемы. Вот первый (неверный) вариант:

<a href="javascript: doSomeAction();">нажми меня</a>

Этот вариант немного лучше:

<a href="#" onclick="doSomeAction(); return false;">нажми меня</a>

А вот этот наиболее близок к идеалу:

<a id="link" href="#">нажми меня</a>
<script type="text/javascript">
 document.getElementById('link').onclick = function () { doSomeAction(); }
</script>

9. Тег img может использоваться только в том случае, если изображение несет смысловую нагрузку
Дело не столько в том, что пользователь должен копировать только нужные ему изображения, а в том, что тег img, использованный для вставки сепаратора/фона/украшательства не имеет смысла и лишний раз путает разработчика. Гораздо удобнее пользоваться параметром background.

10. В обработке изображений основное внимание уделяется качеству картинки, а не ее размеру. В случае монотонных изображений лучше использовать формат PNG8 нежели GIF.
Формат PNG8 чуть более качественный, правда, отображаются PNG в IE неверно, но эта проблема решаема ;)

11. Использование CSS-спрайтов крайне желательно
О CSS-спрайтах, наверное, ходят легенды. Вкратце – это технология размещения нескольких изображений в одном файле. Использование спрайтов позволяет существенно сократить время загрузки изображений и число обращений к серверу. Следовательно, сократится и общее время загрузки страницы.

12. Нельзя использовать элементы для создания отступов между блоками на сайте
Если есть такие отличные вещи, как margin и padding, то зачем нарушать семантику кода и добавлять лишние элементы? Правильно, незачем
Стоит однако отметить, что в том случае, если принадлежность к DOCTYPE не указана, браузеры будут обсчитывать padding и margin по-разному и без разного рода “распорок”, увы, не обойтись

13. Теги nobr, noframes, noscript противопоказаны
А и правда, зачем они? Без них тоже можно писать правильный код ;)

14. Использование таблиц для разметки крайне нежелательно

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

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