Принципы написания однородного HTML

Этот документ представляет собой общие рекомендации по стилю написания HTML-разметки. Данное руководство призывает к использованию общепринятых и устоявшихся подходов к написанию кода.

1. Основные принципы

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

Строго следуйте принятому стилю.

Если вы сомневаетесь в том, какой стиль использовать, пользуйтесь общепринятыми и устоявшимися подходами.

2. Пустое пространство

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

Никогда не смешивайте табы и пробелы в отступах.

Выберите между мягкой табуляцией (пробелы) и реальными табами. Придерживайтесь выбранного подхода (предпочтительны пробелы).

Если вы используете пробелы, выберите количество символов для отступа (предпочтительно 4 пробела).

Совет: настройте свой текстовый редактор так, чтобы он показывал непечатные символы. Это позволит вам устранить появление лишних пробелов и табов в конце строк или ещё где-либо.

3. Форматирование

Названия тегов и атрибутов всегда пишите в нижнем регистре.

На одной строке размещайте только один элемент.

Используйте дополнительный уровень отступов для каждого вложенного элемента.

Указывайте атрибуты без их значения, если это возможно (например, checked вместо checked="checked").

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

Не указывайте атрибут type в элементах link, style и script.

Всегда закрывайте теги.

Не используйте слеш в единичных тегах (<img> — правильно, <img/> — неправильно).

Сохраняйте длину строки в пределах разумного максимума, например 80 символов.

Пример:

<div class="tweet">
    <a href="path/to/somewhere">
        <img src="path/to/image.png" alt="">
    </a>
    <p>[tweet text]</p>
    <button disabled>Reply</button>
</div>

Исключения и небольшие допущения

В элементах с несколькими атрибутами эти атрибуты можно расположить на отдельных строках, чтобы улучшить читабельность:

<a class="[value]"
 data-action="[value]"
 data-id="[value]"
 href="[url]">
    <span>[text]</span>
</a>

4. Порядок атрибутов

HTML-атрибуты должны быть перечислены в порядке, учитывающем то, что названия классов — базовая вещь, которая позволяет выбирать элементы с помощью JavaScript или CSS:

  1. class
  2. id
  3. data-*
  4. Любые другие атрибуты

Пример:

<a class="[value]" id="[value]" data-name="[value]" href="[url]">[text]</a>

5. Именование

Именование — вещь сложная, но очень важная. Это ключевая часть процесса написания поддерживаемого кода. Без правильного именования невозможно иметь относительно масштабируемый интерфейс между HTML и CSS/JS.

Используйте простые, понятные и уместные имена для классов. Имена должны быть информативны вне зависимости от контекста — как в разметке, так и в CSS-файлах.

Избегайте систематического сокращения имён классов. Не усложняйте код.

Пример с плохим именованием классов:

<div class="cb s-scr"></div>

.s-scr {
  overflow: auto;
}

.cb {
  background: #000;
}

Хороший пример именования:

<div class="column-body is-scrollable"></div>

.is-scrollable {
    overflow: auto;
}

.column-body {
    background: #000;
}

6. Практический пример

Пример различных соглашений.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Document</title>
        <link rel="stylesheet" href="main.css">
        <script src="main.js"></script>
    </head>
    <body>
        <article class="post" id="1234">
            <time class="timestamp">March 15, 2012</time>
            <a data-id="1234"
              data-analytics-category="[value]"
              data-analytics-action="[value]"
              href="[url]">[text]</a>
            <ul>
                <li>
                    <a href="[url]">[text]</a>
                    <img src="[url]" alt="[text]">
                </li>
                <li>
                    <a href="[url]">[text]</a>
                </li>
            </ul>

            <a class="link-complex" href="[url]">
                <span class="link-complex__target">[text]</span>
                [text]
            </a>

            <input value="text" readonly>
        </article>
    </body>
</html>

Это перевод Principles of writing consistent, idiomatic HTML Николаса Галлахера. Оригинал лицензирован по Creative Commons Attribution 3.0 Unported License. Лицензия распространяется на все документы и переводы.