Руководство по стилю Google HTML/CSS

В этой статье представлены рекомендованные Google соглашения форматирования HTML и CSS для формирования хороших личных привычек кодирования.

Общие правила стиля

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

<!-- 不推荐 -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- 推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

/* 不推荐 */
.example {
  background: url("https://www.google.com/images/example");
}
/* 推荐 */
.example {
  background: url("//www.google.com/images/example");
}

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

Отступы

Делайте отступ в 2 пробела. Не используйте табуляцию и не смешивайте табуляцию и пробелы для отступов.

<ul>
  <li>Fantastic
  <li>Great
</ul>
.example {
  color: blue;
}

Регистр

Для следующего используйте только нижний регистр: имён элементов HTML, атрибутов, значений атрибутов (кроме текста/CDATA), CSS-селекторов, свойств и значений свойств.

<!-- 不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<img src="google.png.html" alt="Google">
/* 不推荐 */
color: #E5E5E5;
/* 推荐 */
color: #E5E5E5;

Пробелы в конце строк

<!-- 不推荐 -->
<p>What?_
<!-- 推荐 -->
<p>Yes please.

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

Кодирование

Указывайте кодировку в HTML с помощью <meta charset="utf-8">. Нет необходимости указывать её в CSS, потому что UTF-8 используется по умолчанию.

Комментарии

Используйте комментарии для объяснения кода: содержащихся в нём модулей, его функциональности и преимуществ.

Пункты задач

Используйте TODO для отметки пунктов задач, а не другие маркеры вроде @ @.

<!-- TODO: remove optional tags -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

Правила стиля HTML

Тип документа

HTML-документы должны использовать тип документа HTML5: <!DOCTYPE html>.

Пустые элементы не требуют самозакрытия,<br>Не пишите<br />。

Валидность 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>

Семантика

<!-- 不推荐 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推荐 -->
<a href="recommendations/index.html">All recommendations</a>

Резервный вариант для мультимедиа

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

<!-- 不推荐 -->
<img src="spreadsheet.png.html">
<!-- 推荐 -->
<img src="spreadsheet.png.html" alt="Spreadsheet screenshot.">

Разделение ответственности

Разделяйте разметку, стили и скрипты, обеспечивая минимальную связность между ними.

Ссылки на сущности

Если файлы и редакторы команды используют одну и ту же кодировку, нет необходимости использовать ссылки на сущности, например&mdash;， &rdquo;，&#x263a;, за исключением некоторых символов, имеющих особое значение в HTML (например, < и &), и невидимых символов (например, пробелов).

<!-- 不推荐 -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.
<!-- 推荐 -->
The currency symbol for the Euro is “€”.

Атрибут type

Не указывайте атрибут type при подключении таблиц стилей и скриптов, если только это не CSS или JavaScript.
Потому что в HTML5 тип по умолчанию для стилей — text/css, а для скриптов — text/javascript.

<!-- 不推荐 -->
<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

Кавычки в HTML

Используйте двойные кавычки для значений атрибутов.

<!-- 不推荐 -->
<a class='maia-button maia-button-secondary'>Sign in</a>
<!-- 推荐 -->
<a class="maia-button maia-button-secondary">Sign in</a>

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

Именование ID и классов

Используйте осмысленные имена id и class.

/* 不推荐: 含义不明确 */
#yee-1901 {}

/* 不推荐: 按直觉来的 */
.button-green {}
.clear {}
/* 推荐: 指定含义 */
#gallery {}
#login {}
.video {}

/* 推荐: 通用 */
.aux {}
.alt {}

Стиль именования ID и классов

id и class должны быть как можно короче, но при этом оставаться понятными.

/* 不推荐 */
#navigation {}
.atr {}
/* 推荐 */
#nav {}
.author {}

Селекторы

Не добавляйте имя элемента перед id или class, если это не обязательно.

/* 不推荐 */
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 и единицы

Не добавляйте единицу измерения, когда значение равно 0.

margin: 0;
padding: 0;

Ведущий 0

Когда значение находится между -1 и 1, ведущий 0 не нужен.

font-size: .8em;

Шестнадцатеричная нотация

/* 不推荐 */
color: #EEBBCC;
/* 推荐 */
color: #ebc;

Префиксы

Использование пространств имён с префиксами может предотвратить конфликты имён и улучшить сопровождаемость кода.

.adw-help {} /* AdWords */
#maia-note {} /* Maia */

Разделители ID и имён классов

Использование дефисов в селекторах улучшает читаемость.

/* 不推荐:  “demo” 和 “image” 之间没有分隔符 */
.demoimage {}

/* 不推荐: 使用下划线 */
.error_status {}

/* 推荐 */
#video-id {}
.ads-sample {}

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

Порядок объявлений

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

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

Отступы содержимого блока

Чтобы отразить иерархию и улучшить читаемость, всё содержимое блока должно иметь отступы.

@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}

Точки с запятой в объявлениях

Каждая строка CSS должна заканчиваться точкой с запятой.

/* 不推荐 */
.test {
  display: block;
  height: 100px
}
/* 推荐 */
.test {
  display: block;
  height: 100px;
}

Разделение имени свойства

Между именем свойства и значением должен быть пробел.

/* 不推荐 */
h3 {
  font-weight:bold;
}
/* 推荐 */
h3 {
  font-weight: bold;
}

Отделение блока объявлений

Используйте пробел между селектором и {}.

/* Not recommended: missing space */
#video{
  margin-top: 1em;
}

/* Not recommended: unnecessary line break */
#video
{
  margin-top: 1em;
}
/* 推荐 */
#video {
  margin-top: 1em;
}

Отделение селектора и объявления

Каждый селектор начинается с новой строки.

/* 不推荐 */
a:focus, a:active {
  position: relative; top: 1px;
}
/* 推荐 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

Разделение правил

Разделяйте правила пустыми строками.

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

Кавычки в CSS

Используйте одинарные кавычки для селекторов атрибутов и значений свойств. Значения URI не нуждаются в кавычках.

/* 不推荐 */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}
/* 推荐 */
@import url(//www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

Метаправила CSS

Комментарии к разделам

Используйте комментарии, чтобы разделить CSS на разделы.

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

Исходный URL: https://google.github.io/styleguide/htmlcssguide.xml