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

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

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

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

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

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

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

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

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

  • Названия тегов и атрибутов всегда пишите в нижнем регистре.
  • На одной строке размещайте только один элемент.
  • Используйте дополнительный уровень отступов для каждого вложенного элемента.
  • Указывайте атрибуты без их значения, если это возможно (например, checked вместо checked="checked").
  • Всегда используйте двойные кавычки для значений атрибутов.
  • Не указывайте атрибут type в элементах link, style и script.
  • Всегда закрывайте теги.
  • Не используйте слеш в единичных тегах ( — правильно, — неправильно).

(Сохраняйте длину строки в пределах разумного максимума, например 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. Лицензия распространяется на все документы и переводы.

Дайджест Форвеба

Во фронтенде много хайпа и информационного шума. Соцсети и медиа перегружают нас информацией и вызывают синдром упущенной выгоды.

Дайджест Форвеба помогает бороться с этим: выходит раз в две недели и содержит только стоящие внимания события и материалы для фронтендеров.