Правила форматирования кода

Основная задача форматирования — это сделать текст читабельными и понятным по своей структуре. Существуют даже целые руководства по оформлению кодов, где рассписаны такие мелочи, вроде количества пробелов или отступы от фигурных скобок. На самом же деле, всё гораздо проще — вполне достаточно чтобы код был визуально читабельным, а пробелы или табуляторы — это дело двадцать шестое.

Однако, я хочу это особо отметить, если предполагается размещать код для других людей, то придется придерживаться некоторого «базового стандарта».

Отступы блоков

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

<div>
	<div>
		<h1></h1>
		<h2></h2>
		<blockquote></blockquote>
	</div>
</div>

То есть мы строим визуальную иерархию тэгов, в которой легко ориентироваться. Сравните с «плоским стилем»:

<div>
<div>
<h1></h1>
<h2></h2>
<blockquote></blockquote>
</div>
</div>

Современные текстовые редакторы, например Notepad++ автоматически делают такой отступ по Enter'у, что полностью снимает проблему с их ручной расстановкой. Обычно кодеры вначале создают открывающий и закрывающий тэг, а уже после его разбивают по строкам Enter'ом. Это гарантирует, что у открывающего тэга всегда будет закрывающий.

«Смыкающиеся» блоки

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

<div class="layout-center-wrap"><div class="layout-wrap">
	<div>
		<h1></h1>
		<h2></h2>
		<blockquote></blockquote>
	</div>
</div></div>

В данном примере div.layout-center-wrap всегда содержит непосредственного потомка div.layout-wrap без разрыва. Такие блоки можно визуально рассматривать как один. Вот еще один пример, где блоки можно разместить на одном уровне.

<!DOCTYPE HTML><html><head>
<meta charset="UTF-8">
<title>Титул</title>
</head><body>
<div class="layout-center-wrap"><div class="layout-wrap">
	<div>
		<h1></h1>
		<h2></h2>
		<blockquote></blockquote>
	</div>
</div></div>
</body></html>

Главное здесь — не переусердствовать: больше 2-3 блоков на одной строке/уровне размещать не стоит. Если же между блоками размещается текст или код, то их точно следует размещать на разных строках.

<div class="layout-center-wrap">Текст<div class="layout-wrap">

</div></div>

Такое форматирование не годится. Правильно будет так:

<div class="layout-center-wrap">Текст
	<div class="layout-wrap">

	</div>
</div>

Пробел или табулятор

Без разницы. Используйте то, что больше нравится. Насколько я знаю, то почти все кодеры используют табулятор, просто по тому, что это всего один раз нажать клавишу Tab.

Если же делать пробелами, то для каждого отступа нужно нажать 4 пробела. Частая проблема в том, что по ошибке можно нажать не 4, а 3, 5 или еще сколько-нибудь, и при этом нужно либо считать нажатия клавиш, либо визуально контролировать результат.

<div>
  <div>
    <h1></h1>
   <h2></h2>
      <blockquote></blockquote>
   </div>
</div>

В этом плане, табулятор гораздо «надежнее». С технической же точки зрения, что табулятор, что пробелы без разницы (html-код всё равно будет сжат).

Использование нескольких пробелов — это иммитация табулятора. Так что этот вопрос лежит в плоскости удобства использования. Но, если вы решили использовать пробелы, то на каждый отступ должно быть 4 символа, иначе текст теряет читабельность. Встречаются руководства, где рекомендуется ставить 2 пробела, но по мне такой код визуально «неряшливо куцый».

Верхний и нижний регистр

Если речь идёт о HTML, то все тэги должны быть в нижнем регистре. Технически, опять же, это не имеет значения, но заглавные буквы плохо читаются. Поэтому все тэги и их атрибуты пишутся строго в нижнем регистре.

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

Одинарные и двойные кавычки

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

<a onClick=" js-код('текст'); ">

В данном примере html-атрибут обрамлён двойными кавычками, а внутри js-кода уже используются одинарные. Использовать только один вид — невозможно.

Поэтому правило по кавычкам в HTML и CSS простое: основные кавычки — двойные, а если их не хватает, то используем одинарные.

Необязательные закрывающие теги

Тут просто - всегда ставим. Это касается тэгов P, LI и других.

Слэш в конце одиночных тэгов

Никогда не ставим. Это пережиток старого стандарта XHTML. Так неверно:

<meta charset="utf-8" />
<img src="" />

Так верно:

<meta charset="utf-8">
<img src="">

Порядок атрибутов в тэгах

Класс (class) всегда указывается первым. Собственно при разборе верстки всегда смотрится тэг и его классы, а уже после остальные атрибуты.

Те атрибуты, которые могут быть одиночными (вроде required) лучше указывать последними:

<input class="my1" type="email" id="my-email" name="my-email" required>

Пустые классы/атрибуты нужно удалять.

Форматирование CSS-кода

Класс размещается в отдельной строке и открывает блок свойств ({). После двоеточия свойства делается пробел. Каждое свойство размещается на одной строке и всегда завешается точкой с запятой (;).

.t-label {
	color: white;
	background: blue;
	font-size: .75rem;
	padding: 1px 10px;
	border-radius: 3px;
}

Если указываются сразу несколько классов, то их размещают на отдельных строках:

article,
aside,
footer,
header,
nav,
section {
	display: block;
}

Если класс короткий и состоит из одного свойства, то его можно разместить на одной строке:

.w100-max { max-width: 100%; }
.w-hide   { display: none; }
.w-auto   { width: auto; }

У нулей единицы измерения не пишутся (там где это не имеет значения), вместо 0px следует указывать просто 0.

У дробных чисел с нулем, вместо 0.8em лучше указать .8em. Однако это условие не обязательное и можно использовать любой вариант, главное, чтобы было единообразие хотя бы на уровне одного css-файла.

Если свойство поддерживает сокращённую запись, то ей можно воспользоваться, например вместо margin: 0 20px 0 20px; можно указать margin: 0 20px;

Если значение цвета можно сократить, то это можно сделать, например вместо #FFAA88 указать #FA8. Здесь важный момент в том, что часто такой цвет не набирается вручную, а копируется из программ «пипеток». Обычно у них используется полная запись из 6 цифр. Кроме того, некоторые программы отдают строчные буквы, а другие прописные: #FFAA88 или #ffaa88. Поэтому для задания цвета подходит любой вариант. Каждый раз вручную менять регистр букв — глупость.

Буквенные имена цветов следует использовать с осторожностью и лучше только на этапе прототипирования. В результирующем коде их лучше заменить на шестнадцатеричные значения, например вместо color: red; нужно указать color: #F00;. Такой подход позволит изменить цвет прямо в редакторе кода, вроде Notepad++ (он реагирует на символ #).

Порядок следования css-свойств может быть любым. Можно в порядке добавления, можно сгруппировать по функциональному назначению. Технически же порядок может быть любым, поэтому никаких правил здесь нет.

Следует понимать, что форматирование CSS-кода — это чистой воды условность. В реальности такой код будет сжат и минифицирован Sass-компилятором. Если потребуется его отформатировать для просмотра, то никто в здравом уме вручную это делать не будет: есть десятки онлайн-сервисов по красивому форматированию кода с любыми настройками. Поэтому CSS-форматирование требуется только на этапе разработки.


Главная страница Оглавление