HTML

Базовый синтаксис

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

							
								<!DOCTYPE html>
								<html lang="en">
								<head>
									  <meta charset="UTF-8">
									  <title>Страница на HTML</title>
								</head>
								<body>
									  <h1>Моя первая страница</h1>
						                           		  <p>Описание моей первой страницы</p>
								</body>
								</html>
							
						
Использование селекторов

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

Закрывающие теги

Закрывающий слеш у одиночных тегов (<img>, <br> и другие) не ставится.
В остальных случаях (таких, как <body></body> или <ul></ul>) обязателен закрывающий тег.

							
								<body>
									  <ul>
										    <li>Один</li>
										    <li>Два</li>
										    <li>Три</li>
									  </ul>
								</body>
							
						
HTML-Doctype

В начале страницы обязательно должен быть указан актуальный <!DOCTYPE html>, чтобы браузер отображал её в режиме соответствия стандартам. Сейчас версия html5.

							
								<!DOCTYPE html>
								<html lang="ru">
								  <head>…</head>
								  <body>…</body>
								</html>
							
						
Кодировка символов

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

							
								<head>
								  <meta charset="utf-8">
								  <title>Заголовок страницы</title>
								</head>
							
						
Атрибут языка

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

							
								<!DOCTYPE html>
								<html lang="ru">
								...
								</html
							
						
Режим совместимости IE

Internet Explorer поддерживает специальный мета-тег, который указывает, в какой версии следует показать страницу. На данный момент целесообразно использовать так называемый Edge-мод.
Подробнее тут.

							
								<meta http-equiv="X-UA-Compatible" content="IE=Edge">
							
						
Подключение стилей

Стилевые файлы с помощью <link> подключаются внутри <head>. Атрибут type не указывается. А вот атрибут rel - обязателен, иначе страница "не поймет", что вы подключили.

							
								<!-- Правильно: стилевой файл подключён в секции head -->
								<!DOCTYPE html>
								<html lang="ru">
							  	  <head>
						    	    <link rel="stylesheet" href="main.css">
							  	  </head>
							  	  <body>…</body>
								</html>
							
						
							
								<!-- Неправильно: стилевой файл подключён в секции body -->
								<!DOCTYPE html>
								<html lang="ru">
							  	  <head>…</head>
							  	  <body>
						    	    <link rel="stylesheet" href="main.css">
							  	  </body>
								</html>
							
						
Порядок атрибутов

Атрибут класса у HTML-элементов пишется первым. Это важно для идентичности написания кода. Так проще увидеть какой-либо class, id и т.д. Остальные атрибуты можно указывать в любом порядке, но желательно чтобы их порядок от элемента к элементу сохранялся.

							
								<a class="element element-big" id="element" href="/" data-name="element">Ссылка</a>

								<input class="form-control" type="text" name="test">

								<img class="pets-picture" src="cats.jpg" alt="Изображение котиков">
							
						
Логические атрибуты

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

							
								<!-- disabled="disabled" необязательно -->
								<input type="checkbox" required checked>

								<input type="text" disabled>

								<select>
								  <option value="1" selected>1</option>
								</select>
							
						
Связи полей ввода

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

							
								<!-- Правильно: элемент формы radio связан с подписью через идентификатор -->
								<input type="radio" id="choose">
								<label for="choose">Радио кнопка</label>

								<!-- Правильно: элемент формы radio и подпись обёрнуты в label -->
								<label>
							  	  <input type="radio"> Радио кнопка
								</label>

								<!-- Неправильно: подпись не связана с элементом формы -->
								<input type="radio" id="choose"> Радио кнопка
							
						
Атрибут alt

Обязательно нужно указывать атрибут alt у тега img, чтобы было чем "заменить" непоявившееся по любой причине изображение.

							
								<!-- Правильно: атрибут alt задан -->
								<img src="img/picture.png" alt="Картинка">

								<!-- Неправильно: атрибут не задан -->
								<img src="img/picture.png" alt="">
							
						
Валидность

Документ должен проходить проверку на валидность. Для проверки используется современный валидатор.

CSS

Базовый синтаксис

Используйте для отступов везде два пробела. Это важно для читаемости кода, строк которого могут быть тысячи.
Для улучшения читаемости ставьте пробел перед открывающей фигурной скобкой.
Оставляйте пробел после двоеточия в каждом свойстве.
Каждое свойство на новой строке.
Обязательно использовать точку с запятой после каждого свойства.
Если в свойстве где-то нужна запятая - после нее обязателен пробел.
Однако в color: rgb(0,0,0) пробелы не нужны.
Все 16-е значение (например цвета) пишутся в нижнем регистре, и где возможно, используются сокращения (#fff вместо #ffffff)
Если используете селектор по атрибуту - пишите двойные кавычки (input[type="checkbox"])
Если используется нулевое значение (padding: 0) - единицы измерения не пишутся (кроме частных случаев поддержки браузеров).

							
								/* Правильно: */
								.selector {
								  padding: 15px;
								  margin: 0px 0px 15px;
								  background-color: rgba(0, 0, 0, 0.5);
								  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
								  top: 0;
								}

								/* Неправильно: */
								.selector{
								padding:15px;
								margin:0px 0px 15px
								background-color:rgba(0, 0, 0, 0.5);
								box-shadow:0 1px 2px #CCC,inset 0 1px 0 #FFFFFF
								top:0px;
								}
							
						
Сброс браузерных стилей

Пользуйтесь сбросом стилей. Это поможет избежать непредвиденных проблем со стилями таких элементов, как ul, p, и так далее. Минимальный (и в целом достаточный сброс):

							
								/* Пример минимального сброса стилей */
								/* Селектор * - обращение ко всем элементам в документе */
								* {
								  margin: 0;	
								  padding: 0;	
								  box-sizing: border-box;
								}
							
						
Не используйте @import

Правило @import - слишком медленное. Использовать его просто не принято, особенно когда есть <link>.

							
								<!-- Правильно: -->
								<link rel="stylesheet" href="core.css">

								<!-- Неправильно: -->
								<style>
							  	  @import url("more.css");
								</style>
							
						
Именование классов

Запрещено использовать camelCame. Лучше .header или .header-btn.
Если это кнопка - называть ее .knopka недопустимо. Используйте английский язык. Обязательно использовать осмысленные имена, чтобы было понятно, что это за элемент.

							
								/* Правильно: */
								.header { ... }
								.edit-button { ... }
								.time { ... }

								/* Неправильно: */
								.t { ... }
								.ssylka { ... }
								.asd { ... }
							
						
Упрощение селекторов

Старайтесь максимально упрощать селекторы\вложенность. Это влияет на скорость загрузки сайта и в целом на производительность.

							
								/* Хороший пример */
								.nav { ... }
								.list { ... }

								/* Плохой пример */
								nav.nav { ... }
								ul.list { ... }
							
						
Использование !important

Использовать !important можно только в САМЫХ крайних случаях. В остальном - категорически запрещено, так как вы потом не сможете переопределить свойство, если потребуется.

JavaScript

Точка с запятой

В JavaScript допустимо не ставить в конце строк точку с запятой. Но такое написание считается “плохим тоном”. В соответствии с данным стандартом все строки должны заканчиваться точками с запятой:

							
								// Неправильно
								var count = 10
								var obj = {a:5, b:10}
								var func = function(){
								  //code here
								}
							
							
								// Правильно
								var count = 10;
								var obj = {a:5, b:10};
								var func = function(){
								  //code here
								};
							
						
Табуляция

Отступы слева должны соответствовать уровню вложенности кода и должны быть единообразны во всём коде. Рекомендуемый одинарный отступ - одна табуляция. Пробелы для отступов слева использовать не рекомендуется.

							
								// Неправильно
								for(var i = 0; i < 10; i++) {
								if(a === b) {doThisAction(a);}
								}
							
							
								// Правильно
								for(var i = 0; i < 10; i++) {
								  if(a === b) {
								    doThisAction(a);
								  }
								}
							
						
Пробелы вокруг операторов

Вокруг операторов необходимо ставить по одному пробелу.

							
								var name = 1;
								var secondName = 2;
							
						
Фигурные скобки

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

							
								// Неправильно
								if(условие)
								{
									//code here
								}
							
							
								// Правильно
								if(условие) {
						  		  //code here
								}
							
						
Пробелы в массивах

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

							
								// Неправильно
								var array = [ 1, 2, 3, 4 ];
								var array = [1,2,3,4];
							
							
								// Правильно
								var array = [1, 2, 3, 4];
							
						
Пробелы при деструктуризации

В однострочных объектах и при деструктуризации фигурные скобки не должны отделяются пробелами от содержимого.

							
								// Неправильно
								var foo = { a: 1 };
								const { a, b } = someObject;
							
							
								// Правильно
								var foo = {a: 1};
								const {a, b} = someObject;
							
						
Пробелы в объектах

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

							
								// Неправильно
								var obj = {
								  key : value
								};
								var obj = {
								  key:      value
								};
							
							
								// Правильно
								var obj = {
							  	  key: value
								}
							
						
Именование переменных

Запрещено объявлять переменные, имена которых совпадают с именами используемых в коде лейблов, а так же ключевыми словами, которые используются самим Javascript.
Все переменные должны быть названы в верблюжьем регистре (camelCase). Исключения составляют константы которые должны именоваться прописными буквами в змеином регистре (UPPER_SNAKE_CASE)

							
								// Неправильно
								var my_variable = 5;
								var MYVARIABLE = 5;
								var myvariable = 5;
							
							
								// Правильно
								var myVariable = 5;
								var MY_VARIABLE = 5; 
							
						
Именование функций

Названия функций должны содержать глагол и четко отвечать на вопрос: “Что делает эта функция?”
Функции-конструкторы необходимо именовать с заглавной буквы.

							
								// Неправильно
								function myFunc() {};
								function randomNumber() {};
							
							
								// Правильно
								function getRandomNumber() {};
								function validateForm() {};
								function setNewColor() {};
							
						
Условные операторы

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

							
								// Неправильно
								if (number == 5) {
							   	  //code here
								}
							
							
								// Правильно
									if (number === 5) {
								   	  //code here
									}
							
						
Прочие правила

В строках рекомендуется используются одинарные кавычки. Разрешено использовать шаблонные строки.
Смысловые блоки кода отделяются друг от друга не более чем двумя пустыми строками.
Запрещено сравнение с NaN. Для проверки, является результат операции числовым, нужно использовать Number.isNaN.
Запрещено использовать case без break или return в блоках switch.
В коде не используется оставленных выводов в консоль.
В коде нет объявленных, но неиспользуемых переменных.
В коде нет выражений, значения которых не записываются в переменные, параметры функций или свойства объектов и не передаются как параметры функций.