Оглавление
HTML
Теги и их атрибуты пишутся строчными буквами.
Для значений атрибутов всегда используются двойные кавычки.
Для отступов у вложенных элементов используется табуляция (рекомендуется выставлять размер табуляции - 2).
<!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>
В начале страницы обязательно должен быть указан актуальный <!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
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 у тега img, чтобы было чем "заменить" непоявившееся по любой причине изображение.
<!-- Правильно: атрибут alt задан -->
<img src="img/picture.png" alt="Картинка">
<!-- Неправильно: атрибут не задан -->
<img src="img/picture.png" alt="">
Документ должен проходить проверку на валидность. Для проверки используется современный валидатор.
CSS
Используйте для отступов везде табуляцию размером 2. Это важно для читаемости кода, строк которого могут быть тысячи.
Для улучшения читаемости ставьте пробел перед открывающей фигурной скобкой.
Оставляйте пробел после двоеточия в каждом свойстве.
Между каждым селектором оставляйте строку отступа.
Каждое свойство на новой строке.
В url() обязательно пишите кавычки.
Обязательно использовать точку с запятой после каждого свойства.
Если в свойстве где-то нужна запятая - после нее обязателен пробел.
Однако в color: rgb(0,0,0) пробелы не нужны.
Все 16-е значение (например цвета) пишутся в нижнем регистре, и где возможно, используются сокращения (#fff вместо #ffffff)
Если нужен альфа-канал (прозрачность) - используется rgba.
Если используете селектор по атрибуту - пишите двойные кавычки (input[type="checkbox"])
Если используется нулевое значение (padding: 0) - единицы измерения не пишутся (кроме частных случаев поддержки браузеров).
/* Правильно: */
.selector {
padding: 15px;
margin: 0 0 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;
}
Пользуйтесь сбросом стилей осторожно и осознанно. Это поможет избежать непредвиденных проблем со стилями по умолчанию. Рекомендуется делать базовый сброс box-sizing, а остальное делать только напрямую у элементов по классу.
/* Пример минимального сброса стилей */
/* Селектор * - обращение ко всем элементам в документе */
* {
box-sizing: border-box;
}
/* Представим, что класс .title у заголовка h1, и нам нужно сбросить отступ сверху, а снизу поставить свой */
.title {
margin: 0;
margin-bottom: 30px;
}
Соблюдайте определенный порядок стилей для удобства и читаемости кода. Сперва идут свойства позиционирования, затем блочной модели, потом - шрифты. В самом конце - прочее оформление и анимации.
.element {
/* Позиционирование */
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
/* Блочная модель */
display: flex;
align-items: center;
margin: 10px;
padding: 10px 20px;
border: 1px solid red;
width: 200px;
height: 100px;
box-sizing: border-box;
/* Типографика */
font-family: Arial;
font-size: 25px;
font-style: italic;
text-decoration: none;
color: red;
/* Оформление */
background: red;
opacity: 1;
/* Анимации */
transform: translateX(5px);
animation: shake 0.3s infinite;
}
Запрещено использовать camelCase. Лучше .header или .header-btn. Использовать нижнее подчеркивание можно только при именовании по БЭМ.
Если это кнопка - называть ее .knopka недопустимо. Используйте английский язык.
Обязательно использовать осмысленные имена, чтобы было понятно, что это за элемент.
/* Правильно: */
.header { ... }
.edit-button { ... }
.time { ... }
/* Неправильно: */
.t { ... }
.ssylka { ... }
.asd { ... }
Старайтесь максимально упрощать селекторы\вложенность. Это влияет на скорость загрузки сайта и в целом на производительность.
/* Хороший пример */
.nav { ... }
.list { ... }
/* Плохой пример */
nav.nav { ... }
ul.list { ... }
Использовать !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.
В коде не используется оставленных выводов в консоль.
В коде нет объявленных, но неиспользуемых переменных.
В коде нет выражений, значения которых не записываются в переменные, параметры функций или свойства объектов и не передаются как параметры функций.