Оформление контента. HTML код

Страница сайта представляет собой блок информации. От того, как представлена эта информация, зависит, будет ли она воспринята посетителем.
Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

Протокол

Не указывайте протокол при включении ресурсов на страницу.
Опускайте название протокола (http:, https:) в ссылках на картинки или другие медиа-ресурсы, файлы стилей или скрипты, конечно, если эти файлы доступны по обоим протоколам.
Отсутствие протокола делает ссылку относительной, что предотвращает смешивание ресурсов из разных протоколов и незначительно уменьшает размер файлов.

Не рекомендуем:

Рекомендуем:

Не рекомендуем:

.example {
background: url (http://www.google.com/images/example);
}

Рекомендуем:

.example {
background: url (//www.google.com/images/example);
}

Общее форматирование

Отступы
Всегда используйте для отступа 2 пробела.
Не смешивайте табуляцию с пробелами и не используйте табуляцию.
Рекомендуем:

• Пять
• Погулять

Рекомендуем:

.example {
color: blue;
}

Регистр
Всегда старайтесь писать в нижнем регистре.
Весь код должен быть написан в нижнем регистре: Это относится к названиям атрибутов, названиям элементов, значениям атрибутов (кроме текста/CDATA), селекторам, свойствам и их значениям (кроме текста).
Пробелы в конце строки
Убирайте пробелы в конце строки.
Пробелы в конце строк не обязательны и усложняют использование diff.
Не рекомендуем:

Что?_

Рекомендуем:

Вот так.

Общие мета правила

Кодировка
Рекомендуем использовать кодировку — UTF-8 (без BOM).
Убедитесь, что ваш редактор использует кодировку UTF-8 без метки порядка байтов (BOM).
Указывайте кодировку в HTML шаблонах и документах с помощью:

Опускайте кодировку для сss-файлов: для них UTF-8 задана по умолчанию.
Комментарии
По возможности поясняйте свой код, где это необходимо.
Используйте комментарии, чтобы пояснить свой код: за что отвечает, что он делает и почему используется выбранное решение.
(Этот пункт не обязателен, потому что нет смысла ожидать, что код всегда будет хорошо задокументирован. Полезность комментирования зависит от сложности проекта и может различаться для HTML и CSS кода.)

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

Тип документа
Настоятельно рекомендуем использовать HTML5.
HTML5 (HTML синтаксис) рекомендуется для всех html-документов: .
(Рекомендуется использовать HTML с типом контента text/html. Не используйте XHTML, так как application/xhtml+xml (англ.), хуже поддерживается браузерами и ограничивает возможность оптимизации. )
Валидность HTML
По возможности используйте валидный HTML.
Используйте валидный HTML код, кроме случаев, когда использование не позволяет достичь размера файла, необходимого для нужного уровня производительности.
Валидность — это важное и при этом измеряемое качество кода. Написание валидного HTML способствует изучению технических требований и ограничений и обеспечивает правильное использование HTML.
Семантика
Используйте HTML так, как это было задумано.
Используйте элементы (называемые “тегами”) по назначению: заголовки для заголовков, p для абзацев, a для ссылок и т.д.
Это облегчает чтение, редактирование и поддержку кода.
Альтернатива для мультимедиа
Всегда нужно указывать альтернативное содержимое для мультимедиа.
Постарайтесь указать альтернативное содержимое для мультимедиа: например для картинок, видео или анимаций, заданных с помощью canvas. Для картинок это осмысленный альтернативный текст (alt), а для видео и аудио расшифровки текста и подписи если это возможно.
Альтернативное содержимое может помочь людям с с ограниченными возможностями. Например человеку со слабым зрением сложно понять, что на картинке если для нее не задан @alt. Другим людям может быть тяжело понять о чем говорится в видео или аудио записи.
(Если для картинки alt избыточен, или она используется только в декоративных целях в местах, где нельзя использовать CSS, используйте пустой альтернативный текст alt="")
Ссылки-мнемоники
Не рекомендуем использовать ссылки-мнемоники.
Нет смысла использовать ссылки-мнемоники, такие как —, ”, или ☺, когда все команды в файлах, редакторах используют одну кодировку (UTF-8)
Единственное исключение из этого правила — служебные символы HTML (например < и &) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).
Не рекомендуем:

Валютный знак евро: “&eur;”.

Рекомендуем:

Валютный знак евро: “€”.

Атрибут 'type'
Не нужно указывать атрибут type при подключении стилей и скриптов в документ.
Не используйте атрибут type при подключении стилей (кроме вариантов когда используется что-то кроме CSS) и скриптов (кроме вариантов когда это не JavaScript).
Указывать атрибут type в данном случае не обязательно потому что HTML5 использует text/css (англ.) и text/javascript (англ.) по умолчанию. Это будет работать даже в старых браузерах.

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

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

/* Не рекомендуется: не имеет смысла */
#yee-1901 {}

/* Не рекомендуется: описание внешнего вида */
.button-green {}
.clear {}

Рекомендуем:

/* Рекомендуется: точно и по делу */
#gallery {}
#login {}
.video {}

/* Рекомендуется: шаблонное имя */
.aux {}
.alt {}

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

#navigation {}
.atr {}

Рекомендуем:

#nav {}
.author {}

Селекторы типа
Избегайте использование имен классов или идентификаторов с селекторами типа (тега) элемента.
Кроме случаев когда это не обходимо (например с классами-помощниками), не используйте названия элементов с именами классов или идентификаторами.
Не рекомендуем:

ul#example {}
div.error {}

Рекомендуем:

#example {}
.error {}

Сокращенные формы записи свойств
Где возможно используйте сокращенные формы записи свойств.
CSS предлагает множество различных сокращенных (англ.) форм записи (например font), которые рекомендуется использовать везде где это возможно, даже если задается только одно из значений. Использование сокращенной записи свойств полезно для большей эффективности и лучшего понимания кода.
Не рекомендуем:

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

Рекомендуем:

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0 и единицы измерения
Не указывайте единицы измерения для нулевых значений
Не указывайте единицы измерения для нулевых значений если на это нет причины.
Рекомендуем:

margin: 0;
padding: 0;

0 в целой части дроби
Не ставьте “0” в целой части дробных чисел.
Не ставьте 0 в целой части в значениях между -1 и 1.
Рекомендуем:

font-size: .7em;

Кавычки в ссылках
Не используйте кавычки в ссылках
Не используйте кавычки ("", '') с url ().
Рекомендуем:

@import url (//www.google.com/css/go.css);

Шестнадцатеричные названия цветов
Используйте трехсимвольную шестнадцатеричную запись где это возможно.
Трехсимвольная шестнадцатиричная запись для цветов короче и занимает меньше места.

Не рекомендуем:

color: #eebbcc;

Рекомендуем:

color: #ebc;

После объявлений
Ставьте точку с запятой после каждого объявления.
После каждого объявления ставьте точку с запятой для согласованности кода и облегчения добавления новых свойств.
Не рекомендуем:

.test {
display: block;
height: 100px
}

Рекомендуем:

.test {
display: block;
height: 100px;
}

После названий свойств
Используйте пробелы после двоеточий в объявлениях.
Всегда используйте один пробел после двоеточия (но не до) в объявлениях, для порядка в коде.
Не рекомендуем:

h3 {
font-weight:bold;
}

Рекомендуем:

h3 {
font-weight: bold;
}

Отделение селектора и объявления
Отделяйте селекторы и объявления переносом строки.
Начинайте каждый селектор или объявление с новой строки.
Не рекомендуем:

a:focus, a:active {
position: relative; top: 1px;
}

Рекомендуем:

h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}

Надеемся кому то будет полезно.