HTML

- Синтаксис

  • Для отступов у вложенных элементов используются четыре пробела (tab);
  • Теги и их атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки;
  • Необязательный закрывающий слеш у одиночных тегов (<img>, <br> и другие) не ставится;
  • Необязательные закрывающие теги (например, </li> или </body>) не пропускаются;
  • Отдельные логические блоки отбиваются пустой строкой;
  • Не ставим пробелов перед и после символа =;
  • Между атрибутами один пробел;

- Валидность

- HTML-доктайп

  • В начале страницы обязательно должен быть указан актуальный doctype, чтобы браузер отображал её в режиме соответствия стандартам. Это гарантирует, что страница будет выглядеть единообразно во всех современных браузерах;

- Кодировка символов

  • Кодировка символов на странице всегда должна быть явно указана, чтобы обеспечить корректное отображение текста. Кодировка utf-8 предпочтительна;

- Подключение стилей

  • Стилевые файлы с помощью <link> подключаются внутри <head>. При этом атрибут type для тега <link> не указывается, так как его значение text/css устанавливается по умолчанию;

- Подключение скриптов

  • Скрипты должны подключаться в самом низу страницы, чтобы при её загрузке не блокировать отображение содержимого;
  • При подключении скриптов в теге <script> атрибут type не указывается, так как его значение text/javascript устанавливается по умолчанию;

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

  • Атрибут класса у HTML-элементов пишется первым. Единообразное написание помогает легче считывать код и быстрее разбираться в назначении блоков по их классам;
  • Остальные атрибуты могут быть расставлены в любом порядке, но тоже единообразно для одинаковых элементов;

- Логические атрибуты

  • Для логических атрибутов (например, checked, disabled, required) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе;

- Подписи полей ввода

  • Для улучшения взаимодействия пользователя с элементами форм, при нажатии на подпись поля, оно должно активироваться. Для этого элемент формы связывается с его описанием с помощью идентификатора и атрибута for тега <label>;

- Размеры картинок

  • Изображениям <img> должны быть явно заданы с помощью атрибута размеры в пикселях. В случае пикселей размерность не нужна;
  • По возможности изображениям указываются действительные размеры, так как это улучшает производительность отрисовки страницы: браузер не будет перерисовывать страницу в процессе загрузки и отображения изображения;

- Атрибут языка

  • Для элемента <html> в атрибуте lang должен указываться соответствующий язык документа. Это помогает инструментам синтеза речи определить, какое использовать произношение или системам перевода, какие использовать языковые правила;

CSS

- Синтаксис

  • После значения свойства обязательно ставится точка с запятой;
  • Для отступов внутри правил используются четыре пробела (tab);
  • Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов. Для записи используются строчные буквы. Например, #f5f5f5;
  • Названия тегов и свойств в правилах пишутся строчными буквами;
  • Начальный ноль для значений сокращается (например, .5 вместо 0.5);
  • Во всех случаях в стилях используются двойные кавычки. В необязательных случаях кавычки не опускаются;
  • После двоеточия в правилах ставится один пробел (top: 10px;). А перед двоеточием пробел не нужен;
  • После запятых внутри значений rgb(), rgba(), hsl(), hsla() или rect() пробелы ставятся. Это повышает удобочитаемость;
  • До и после комбинатора между селекторами (например, p > a) ставится один пробел;
  • Каждое объявление в правиле пишется на новой строке;
  • Перед открывающейся фигурной скобкой ставится один пробел. После скобки запись идёт с новой строки;
  • Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило отделяется пустой строкой;
  • Единицы измерения не пишутся, там где в них нет необходимости. Например, border: 0;

- Порядок свойств

Объявления логически связанных свойств группируются в следующем порядке:

  • Позиционирование
  • Блочная модель
  • Типографика
  • Оформление
  • Анимация
  • Разное
.declaration-order {
	/* Позиционирование */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;

	/* Блочная модель */
	display: block;
	float: right;
	width: 100px;
	height: 100px;
	margin: 10px;
	padding: 10px;

	/* Типографика */
	font: normal 13px/1.5 "Arial", sans-serif;
	font-style: normal;
	font-size: 13px;
	line-height: 1.5;
	font-family: "Arial", sans-serif;
	text-align: center;
	color: #333333;

	/* Оформление */
	background-color: #f5f5f5;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	opacity: 1;

	/* Анимация */
	transition: color 1s;

	/* Разное */
	will-change: auto;
}

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

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

- Имена классов

  • Имена классов пишутся строчными буквами, используется дефис (следуя принципу BEM);
  • Имена классов должны быть такими, чтобы по ним можно было быстро понять какому элементу страницы задан класс;
  • Для написания классов используются английские слова;

- Правило @import

  • Правило @import работает медленнее, чем тег <link>. В стилях @import не должен использоваться;

- Варианты шрифта

  • Альтернативные варианты шрифта и тип семейства указываются в конце перечисления font-family;

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

Порядок шрифтов следующий:

  1. нестандартный шрифт;
  2. веб-безопасный;
  3. тип шрифта.

Список веб-безопасных шрифтов можно посмотреть здесь.