Обзор
Этот документ определяет формат написания и правила стиля для HTML/CSS. Он направлен на улучшение совместной работы и качества кода, а также на поддержку базовой инфраструктуры. Он применяется к файлам HTML/CSS, включая файлы GSS. Если качество кода можно поддерживать, его можно хорошо обфусцировать, сжимать и объединять с помощью инструментов.
Правила стиля
Протокол
Опускайте заголовок протокола при указании встраиваемых ресурсов
- Опускайте объявления заголовка протокола (http:, https:) в URL-адресах для изображений, медиафайлов, таблиц стилей и скриптов. Если URL-адрес не использует эти два объявления, не опускайте их.
- Пропуск объявления протокола делает URL относительными, предотвращая проблемы смешения контента и избегая избыточных загрузок небольших файлов.
<!-- 不推荐 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- 推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* 不推荐 */
.example {
background: url(http://www.google.com/images/example);
}
/* 推荐 */
.example {
background: url(//www.google.com/images/example);
}
Правила форматирования
Отступы
Используйте отступ в два пробела.
Регистр
Используйте только строчные буквы.
Пробелы в конце строк
Удалите конечные пробельные символы.
Правила метаданных
Кодирование
Используйте кодировку UTF-8 без заголовка BOM.
Настройте редактор на запись в формате кодировки UTF-8 без метки порядка байтов.
Указывайте кодировку в HTML-шаблонах и файлах с помощью <meta charset="utf-8">. Для таблиц стилей указывать кодировку не нужно; по умолчанию используется UTF-8.
(Дополнительную информацию о кодировке и о том, как её указать, см.Наборы символов и кодировки в XHTML, HTML и CSS。）
Комментарии
Объясняйте код, который вы пишете, как можно подробнее.
Используйте комментарии, чтобы объяснить код: что он включает, какова его цель, что он может делать, почему используется это решение, или это просто вопрос предпочтений?
(Это правило необязательно; не нужно описывать каждый фрагмент кода во всех подробностях, так как это увеличит вес HTML- и CSS-кода. Это зависит от сложности проекта.)
Задачи к выполнению
Используйте TODO, чтобы отмечать задачи и активные пункты действий.
Используйте только TODO для выделения ожидающих элементов; не используйте другие распространённые форматы, например @@.
Добавьте контакт (имя пользователя или список адресов электронной почты) в круглых скобках, например, TODO(contact).
Можно добавить описание действия после двоеточия, например, TODO: описание действия.
{# TODO(cha.jn): 重新置中 #}
<center>Test</center>
<!-- TODO: 删除可选元素 -->
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
Правила стиля HTML
Тип документа
Пожалуйста, используйте стандарт HTML5.
Валидность HTML-кода
По возможности используйте валидный HTML-код.
Пишите валидный HTML-код; в противном случае сложно добиться улучшения производительности.
Используйте для проверки такие инструменты, как этотW3C HTML validator.
Валидность HTML-кода — важный показатель качества, и она гарантирует, что HTML-код может быть использован правильно.
<!-- 不推荐 --> <title>Test</title> <article>This is only a test. <!-- 推荐 --> <!DOCTYPE html> <meta charset="utf-8"> <title>Test</title> <article>This is only a test.</article>
Семантика
Используйте элементы HTML в соответствии с их назначением.
При использовании элементов (иногда их ошибочно называют «тегами») знайте, зачем вы их используете и правильно ли это. Например, используйте элементы заголовков для заголовков, элементы p для абзацев, элементы a для якорей и т. д.
Использование элементов HTML в соответствии с их назначением важно; оно затрагивает такие вопросы, как доступность документа, повторное использование и эффективность кода.
<!-- 不推荐 --> <div onclick="goToRecommendations();">All recommendations</div> <!-- 推荐 --> <a href="recommendations/index.html">All recommendations</a>
Резервный вариант для мультимедиа
Предоставляйте альтернативное содержимое для мультимедиа.
Для мультимедиа, такого как изображения, видео и анимированные элементы, загружаемые через canvas, обеспечьте наличие альтернативного содержимого. Используйте осмысленный альтернативный текст (alt) для изображений, а также корректные расшифровки и субтитры для видео и аудио.
Предоставление альтернативного содержимого важно, потому что оно даёт незрячим пользователям описательный текст, используя @alt, чтобы сообщить им, о чём изображение, и даёт подсказки пользователям, которые могли не понять видео- или аудиосодержимое.
(Атрибут alt изображения может быть избыточным; если изображение используется только для оформления, которое невозможно сразу реализовать с помощью CSS, альтернативный текст не нужен, и можно написать alt="" .)
<!-- 不推荐 --> <img src="spreadsheet.png.html"> <!-- 推荐 --> <img src="spreadsheet.png.html" alt="电子表格截图">
Разделение ответственности
Разделяйте представление и поведение.
Строго разделяйте структуру (разметку), представление (стили) и поведение (скрипты), а взаимодействие между этими тремя свести к минимуму.
Убедитесь, что документы и шаблоны содержат только структуру HTML; помещайте всё представление в таблицы стилей, а всё поведение — в скрипты.
Кроме того, старайтесь минимизировать область соприкосновения скриптов и таблиц стилей в документах и шаблонах, то есть сократить внешние подключения.
Очень важно поддерживать разделение представления и поведения, потому что изменение структуры HTML-документа и шаблонов обходится дороже, чем обновление таблиц стилей и скриптов.
<!-- 不推荐 --> <!DOCTYPE html> <title>HTML sucks</title> <link rel="stylesheet" href="base.css.html" media="screen"> <link rel="stylesheet" href="grid.css.html" media="screen"> <link rel="stylesheet" href="print.css.html" media="print"> <h1 style="font-size: 1em;">HTML sucks</h1> <p>I’ve read about this on a few sites but now I’m sure: <u>HTML is stupid!!1</u> <center>I can’t believe there’s no way to control the styling of my website without doing everything all over again!</center> <!-- 推荐 --> <!DOCTYPE html> <title>My first CSS-only redesign</title> <link rel="stylesheet" href="default.css.html"> <h1>My first CSS-only redesign</h1> <p>I’ve read about this on a few sites but today I’m actually doing it: separating concerns and avoiding anything in the HTML of my website that is presentational. <p>It’s awesome!
Ссылки на сущности
Не используйте ссылки на сущности.
Нет необходимости использовать ссылки на сущности, такие как —, ” и ☺, при условии, что файлы и редакторы, используемые командой, используют одну и ту же кодировку (UTF-8).
Символы, имеющие особое значение в HTML-документах (например,
<
и
&
) являются исключениями. А ещё «невидимые» символы (например, неразрывный пробел).
<!-- 不推荐 --> 欧元货币符号是 “&eur;”。 <!-- 推荐 --> 欧元货币符号是 “€”。
Необязательные теги
Опускайте необязательные теги (необязательно).
Для оптимизации размера файла и валидации можно рассмотреть пропуск необязательных тегов. Чтобы узнать, какие теги являются необязательными, обратитесь кспецификации HTML5。
(Этот подход может потребовать более точных спецификаций, чтобы его закрепить, и у многих разработчиков разные мнения о нём. По соображениям согласованности и краткости необходимо опускать все необязательные теги.)
<!-- 不推荐 -->
<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>
<p>Sic.</p>
</body>
</html>
<!-- 推荐 -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
атрибут type
Опускайте атрибут type в тегах для таблиц стилей и скриптов.
type
атрибут
Не пишите type в тегах для таблиц стилей (если только не используется CSS) и скриптов (если только не используется JavaScript).
type
атрибута.
В HTML5 по умолчанию используется
type
является
text/css
и
text/javascript
type, поэтому нет необходимости его указывать. Даже старые браузеры его поддерживают.
<!-- 不推荐 --> <link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css"> <!-- 推荐 --> <link rel="stylesheet" href="//www.google.com/css/maia.css"> <!-- 不推荐 --> <script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script> <!-- 推荐 --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
Правила форматирования HTML
Каждый блочный элемент, элемент списка или элемент таблицы занимает отдельную строку, а каждый дочерний элемент имеет отступ относительно родительского элемента.
Стиль независимых элементов (поскольку CSS позволяет элементам принимать другую роль в зависимости от
display
свойства), размещайте блочные элементы, элементы списка или элементы таблицы на новой строке.
Кроме того, делайте отступ для дочерних элементов блочных элементов, элементов списка или элементов таблицы.
(Если возникают проблемы с текстовыми узлами пробелов вокруг элементов списка, попробуйте разместить все
li
элементы на одной строке.)
<blockquote>
<p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
<li>Moe
<li>Larry
<li>Curly
</ul>
<table>
<thead>
<tr>
<th scope="col">Income
<th scope="col">Taxes
<tbody>
<tr>
<td>$ 5.00
<td>$ 4.50
</table>