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

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

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

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

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

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

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

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

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

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

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