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

Опубликовал: 3 года назад HTML, Уроки

Добрый день, дорогие друзья.
Сегодня рассмотрим с вами небольшой свод рекомендаций по написанию последовательного и идиоматического HTML — однородного HTML. Ныряем в полную версию статьи за подробностями.

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

Документ в режиме редактирования и наполнения и в настоящий момент не закончен. Если у вас есть идеи и предложения, вы можете внести свой вклад в развитие рекомендаций.

HTML

Содержание

  1. Общие принципы
  2. Пустое пространство
  3. Форматирование
  4. Порядок атрибутов
  5. Именование
  6. Практический пример
  7. Лицензия


1. Общие принципы

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

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

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

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

Совет: настройте свою IDE так, чтобы она показывала непечатные символы (show invisibles).  Это поможет устранять лишние пробелы и табы в документе и вам будет проще найти и устранить их

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

  • Всегда используйте строчные символы для тегов и атрибутов
  • Один элемент на одной строке!
  • Используйте дополнительный уровень отступов для вложенных элементов
  • Не используйте бесполезных атрибутов, если это возможно (например checked вместо checked=«checked»)
  • Для значений атрибутов используйте двойные кавычки
  • Забудьте про атрибут type в тегах: link, style и script
  • Всегда закрывайте теги
  • Забудьте про слеш в одиночных тегах (<img> — правильно, <img/> — неправильно)

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

Пример:

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

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

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

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

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

Пример:

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

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

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

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

Хороший пример:

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

Для того, чтобы закрепить все это рассмотрим практический пример:

Лицензия

Работа Николаса Галлахера лицензирована по Creative Commons Attribution 3.0 Unported License. Лицензия распространяется на все документы и переводы в этом репозитории.

Основано на github.com/necolas/idiomatic-html. Есть пожелания или исправления, пишите автору.

На этом всего вам хорошего. До скорой встречи


Новая система комментариев
comments powered by HyperComments