- В большинстве случаев необходимость использования !important в CSS возникает из-за неправильного обращения к элементам страницы через каскад. Однако, в редких случаях, без использования !important не обойтись.
-
Селекторы должны быть написаны так, чтобы их можно было переиспользовать в дальнейшем. Цепочки селекторов или селекторы с излишней вложенностью не должны создаваться без необходимости — это увеличивает специфичность правил и уменьшает возможность их переиспользования.
-
Длинные цепочки вложенных селекторов также усложняют код и его поддержку. Хорошим подходом считается использовать вложенность до 2 или 3 уровня. Псевдоэлементы или псевдоклассы не увеличивают уровень вложенности.
-
-
Идентификаторы id для стилизации не используются. Вместо идентификаторов для задания стилей используются селекторы по классам или тегам.
Cокращенные объявления не используются в тех случаях, когда это может косвенно переопределить другие значения. Наиболее часто злоупотребляют сокращением следующих свойств:
-
-
- padding
-
-
- margin
-
-
- border-radius
-
-
- border
-
-
- font
-
-
- background
-
-
-
- Сокращённые свойства, где элементы значений однотипные (например,
- margin: 10px 15px; или
- padding: 1px 2px 3px;) сложнее воспринимать, чем отдельные свойства (margin-top: 10px; padding-top: 1px;).
-
-
- Свойства с разнотипными элементами значений (например,
- border: 1px solid #000000;) в сокращённом виде считываются легче – их можно сокращать, если нет опасности переопределить другие значения.
-
Имена классов пишутся строчными буквами, используется дефис (но не знаки нижнего подчёркивания или camelCase). Дефисы служат разделителями во взаимосвязанных классах (например, .button и .button-danger).
-
Имена классов должны быть такими, чтобы по ним можно было быстро понять какому элементу страницы задан класс: избегайте сокращений (единственное исключение — .btn для кнопок), но не делайте их слишком длинными (более трёх слов).
-
Для написания классов используются английские слова и термины. Транслитом названия классов и атрибутов не пишутся.
- Альтернативные варианты шрифта и тип семейства указываются в конце перечисления font-family.
-
-
- В случае использования нестандартных шрифтов альтернативный веб-безопасный шрифт и тип семейства указываются, чтобы в случае отсутствия нестандартного шрифта в системе, изменения внешнего вида страницы были минимальны. Альтернативный шрифт должен быть такого же типа, что и нестандартный.
-
-
- Порядок шрифтов следующий:
-
-
-
нестандартный шрифт;
-
веб-безопасный;
-
тип шрифта.
-
-
- Список веб-безопасных шрифтов можно посмотреть здесь — cssfontstack.com.
-
- Объявления логически связанных свойств группируются в следующем порядке:
-
-
-
Позиционирование
-
Блочная модель
-
Типографика
-
Оформление
-
Анимация
-
Разное
-
-
- Позиционирование следует первым потому, что оно влияет на положение блоков в потоке документа. Блочная модель идёт следующей, так как она определяет размеры и расположение блоков.
-
-
- Все остальные объявления, которые изменяют вид внутренних частей блоков и не оказывают влияния на другие блоки, идут в последнюю очередь.
-
-
- Сгруппированные объявления в правиле отделяются друг от друга пустой строкой.
-
-
- Порядок объявления подробных правил, таких как font-size, font-family, line-height, должен соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой должна идти сокращённая версия.
-
После значения свойства обязательно ставится точка с запятой.
-
Для отступов внутри правил используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
-
Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов. Для записи используются строчные буквы. Например, #f5f5f5.
-
Названия тегов и свойств в правилах пишутся строчными буквами.
-
Начальный ноль для значений не сокращается (например, .5 вместо 0.5).
-
Во всех случаях в стилях используются двойные кавычки. В необязательных случаях кавычки не опускаются.
-
После двоеточия в правилах ставится один пробел (top: 10px;). А перед двоеточием пробел не нужен.
-
После запятых внутри значений rgb(), rgba(), hsl(), hsla() или rect() пробелы ставятся. Это повышает удобочитаемость.
-
До и после комбинатора между селекторами (например, p > a) ставится один пробел.
-
Каждое объявление в правиле пишется на новой строке.
-
Перед открывающейся фигурной скобкой ставится один пробел. После скобки запись идёт с новой строки:
-
.selector {
- color: #f5f5f5;
-}
-
-
Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило отделяется пустой строкой.
-
Единицы измерения не пишутся, там где в них нет необходимости. Например, border: 0.
-
Для проверки CSS-кода используйте файл конфигурации .stylelintrc для настройки валидатора stylelint.
-
Для автоматического применения этих правил используйте файл конфигурации csscomb.json для настройки CSSComb.
- Значение vertical-align должно быть явно указано для блоков с display: inline-block.
-
-
- Значение по умолчанию, baseline, может приводить к странному отображению блочно-строчных элементов. Например, когда в ряд стоят несколько элементов с разным количеством строк.
-
-
- Если вы хотите, чтобы элементы выравнивались по умолчанию, то явно укажите для vertical-align значение baseline. Это позволит другим понять, что вы знаете об особенностях отображения элементов с таким выравниванием и задали его намеренно.
-
- В разметке должно быть использовано минимальное возможное количество элементов. Не должно быть лишних оберток и блоков, которые используются для оформления и могут быть заменены на псевдоэлементы.
-
- Если сайт поддерживает оба протокола http: и https:, то при запросе файлов в HTML через полный URL часть с протоколом из адреса можно исключить. Это сделает URL относительным и избавит от проблем с доступом, а также немного сократит запись.
-
-
- Если сайт подерживает только один из протоколов, в URL лучше явно указывать соответствующий.
-
- Атрибут класса у HTML-элементов пишется первым. Единообразное написание помогает легче считывать код и быстрее разбираться в назначении блоков по их классам.
-
-
- Остальные атрибуты могут быть расставлены в любом порядке, но тоже единообразно для одинаковых элементов.
-
- Для логических атрибутов (например, checked, disabled, required) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе.
-
- В начале страницы обязательно должен быть указан актуальный doctype, чтобы браузер отображал её в режиме соответствия стандартам. Это гарантирует, что страница будет выглядеть единообразно во всех современных браузерах.
-
- Для улучшения взаимодействия пользователя с элементами форм, при нажатии на подпись поля, оно должно активироваться. Для этого элемент формы связывается с его описанием с помощью идентификатора и атрибута for тега <label>.
-
- Изображениям <img> должны быть явно заданы с помощью атрибута размеры в пикселях или в процентах. В случае пикселей размерность не нужна.
-
-
- По возможности изображениям указываются действительные размеры, так как это улучшает производительность отрисовки страницы: браузер не будет перерисовывать страницу в процессе загрузки и отображения изображения.
-
- Для элемента <html> в атрибуте lang должен указываться соответствующий язык документа. Это помогает инструментам синтеза речи определить, какое использовать произношение или системам перевода, какие использовать языковые правила.
-
- Стилевые файлы с помощью <link> подключаются внутри <head>. При этом атрибут type для тега <link> не указывается, так как его значение text/css устанавливается по умолчанию.
-
По ссылкам находятся конфигурации Академии для этих инструментов. Конфигурации частично покрывают то, что описано в этом стиле кода, и в них нет ничего, что не описано ниже.
+
+
+
+
+
+
Код
+
+
+
+
Группировка файлов
+
+
Файлы схожих типов группируются в папки: картинки, стили, скрипты, шрифты.
+
Если внутри папок файлов становится много или выделяются подгруппы, можно добавить вложенные папки.
По возможности изображениям указываются действительные размеры, так как это улучшает производительность отрисовки страницы: браузер не будет перерисовывать страницу в процессе загрузки и отображения изображения.
<!-- Хорошо -->
+<form method="post"></form>
+<form method="get"></form>
+
+<!-- Плохо -->
+<form method=""></form>
+<form></form>
+
+
+
+
+
+
+
+
Подключение стилей
+
+ Стилевые файлы подключены с помощью <link> внутри <head>. При этом атрибут type для тега <link> не указан, так как его значение text/css устанавливается по умолчанию.
+
Имена классов такие, что по ним можно быстро понять, какому элементу страницы задан класс. Избегайте сокращений, но не делайте их слишком длинными (более трёх слов).
+
Для написания классов использованы английские слова и термины. В названиях классов и атрибутов нет транслита.
+ Объявления логически связанных свойств сгруппированы в следующем порядке:
+
+
+
Позиционирование
+
Блочная модель
+
Типографика
+
Оформление
+
Анимация
+
Разное
+
+
+ Позиционирование следует первым, потому что оно влияет на положение блоков в потоке документа. Блочная модель идёт следующей, так как она определяет размеры и расположение блоков.
+
+
+ Все остальные объявления, которые изменяют вид внутренних частей блоков и не оказывают влияния на другие блоки, идут в последнюю очередь.
+
+
+ Сгруппированные объявления в правиле отделены друг от друга пустой строкой.
+
+
+ Порядок объявления подробных правил, таких как font-size, font-family, line-height, соответствует порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой идёт сокращённая версия.
+
Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
+
+
Для отступов используются два пробела. Знак табуляции не используется
+
+
При переносах в продолжении строки используется четыре пробела
+
+
Запрещено одновременное использование табов и пробелов для отступов
+
+
Для отступов ключевых слов, операторов и т. д. используется не более одного пробела
+
const name = 1;
+const longerName = 2;
+
+
const name = 1;
+const longerName = 2;
+
+
Открывающие скобки блоков кода находятся на одной строке с оператором, который их использует:
+
if (condition)
+{
+ // code
+}
+
+
if (condition) {
+ // code
+}
+
В однострочных блоках кода, код отделен от открывающей и закрывающей скобки пробелом
+
+
В однострочных массивах скобки не отделяются пробелами, первое значение идёт непосредственно после открывающей скобки, а закрывающая скобка идёт непосредственно после последнего значения массива
+
+
После запятой всегда должен ставиться пробел, если запятая не в конце строки
+
+
Обязательно переносить запятую на новую строку при объявлении массивов и объектов. Обязательно использовать запятую в конце списков, объектов или перечислений параметров функции
В однострочных объектах и при деструктуризации фигурные скобки не отделяются пробелами от содержимого
+
const foo = { a: 1 };
+
+
const foo = {a: 1};
+
+
const { a, b } = someObject;
+
+
const {a, b} = someObject;
+
+
Смысловые блоки кода отделяются друг от друга не более чем двумя пустыми строками
+
+
В качестве символа переноса строки используется стандартный символ, который используется в системе
+
+
При объявлении вычисляемых ключей в объектах с помощью синтаксиса ES2016 в квадратных скобках не используются пробелы
+
+
Оператор вызова функции () отделяется пробелом от названия функции
+
+
В объектах после объявления ключа не ставится пробел. После двоеточия, которое отделяет в объектах ключ от значения может стоять только один пробел, выравнивать несколько значений при объявлении многострочного объекта запрещено
+
+
Ключевые слова отделяются пробелами. Правило касается всех блоков, которые не оговорены отдельно в других правилах. В частности ключевые слова должны отделяться пробелами для условных операторов, циклов, операторов множественного выбора, блоков try..catch, объявлений классов и т. д.
+
+
В блоках кода первая и последняя строка не должны быть пустыми (код не отбивается от начала блока кода)
+
+
После двоеточий и точек с запятыми ставятся пробелы. Перед ними — не ставятся
+
+
Перед скобками начинающими новый блок кода должен ставиться пробел
+
+
В комментариях текст отбивается пробелом от начала комментария
+
+
При создании генераторов, звездочка идёт сразу после ключевого слова function без пробелов
+
+
Звездочка после ключевого слова yield не отбивается пробелом. После звездочки пробел ставится всегда
+
+
В spread-операторе точки не отделяются от названия коллекции
+
+
+
+
+
+
Строки
+
В строках, объявленных с помощью одинарных кавычек, запрещено использовать переносы
+
+
В строках запрещено указывать код спецсимволов в восьмеричной системе счисления
+
const foo = 'Copyright \251';
+
+
const foo = 'Copyright \u00A9';
+
+
При создании объектов через литералы свойства должны объявляться в едином стиле: или без кавычек или с ними
+
+
В строках используются одинарные кавычки. Разрешено использовать строковые шаблоны в случаях, когда необходима интерполяция
+
+
+
+
+
+
Числа
+
В числах запрещено опускать ноль в дробной и целой части
+
+
Запрещено использовать ведущий ноль при создании чисел, поскольку это приводит к созданию числа в восьмеричной системе счисления
+
+
+
+
+
+
Литералы
+
Массивы должны создаваться через литерал массива, а не через конструктор. Допустимое исключение — создание массива определенной длины
+
+
Объекты должны создаваться через литерал объекта, а не через конструктор
+
+
При создании объектов запрещено дублирование ключей
+
+
При описании функций запрещено дублировать названия параметров
+
+
В операторе switch запрещено дублировать условия (case)
+
+
+
+
+
+
Операторы
+
В бинарных и тернарных операторах операнды и символы оператора отделяются пробелами
+
+
Унарные операторы не отделяются от операнда пробелом. Исключения составляют операторы, состоящие из слов, а не символов, например оператор typeof
+
+
+
+
+
+
+
Именование
+
+
+
+
Все переменные должны быть названы в верблюжьем регистре (camelCase). Исключения составляют константы, которые должны именоваться прописными буквами в константном регистре (CONSTANT_CASE) и названия классов, функций-конструкторов и перечислений, которые именуются с заглавной буквы (PascalCase)
+
+
Запрещено использовать имена переменных, которые используются во внешних областях видимости
Запрещено использовать переменные, не объявленные ранее. При использовании переменной, объявленной в другом модуле в глобальной области видимости, нужно обращаться к ней как к свойству объекта window
+
+
Запрещено напрямую обращаться к значению undefined. Для проверки типа рекомендуется использовать typeof. Исключение составляет явная передача undefined при вызове функции вместо аргумента, чтобы использовать значение параметра по умолчанию
+
+
+
+
+
+
+
Предотвращение ошибок
+
+
+
+
Все точки с запятой должны быть проставлены явно, не стоит рассчитывать на автоматическую расстановку точек с запятой ASI (Automatic Semicolon Insertion)
+
+
Не рекомендуется использовать указатель Unicode BOM в коде, потому что код должен быть сохранен не в кодировке UTF-16, а в кодировке UTF-8, в которой нет указателя порядка бит
+
+
Обязательно используются блоки кода, даже если в выражении содержится одна строчка
+
+
В коде нет пустых блоков кода
+
+
Код работает в строгом режиме: в начале всех файлов явно прописана директива "use strict" или используются модули ECMAScript, которые по умолчанию работают в строгом режиме
+
+
+
+
+
+
Условные операторы
+
Запрещена «проверка Йоды» — в условных операторах в блоке условия при сравнении переменной или свойства со значением сначала идет переменная или свойство объекта и только потом значения, а не наоборот.
+
if (1 === myValue) { /*...*/ }
+
+
if (myValue === 1) { /*...*/ }
+
При сравнении двух значений используется оператор строгого сравнения вместо оператора нестрогого сравнения
+
+
В условных операторах не используется оператор присвоения
+
+
В условиях не используется небезопасное отрицание, например использование ! в in или instanceof без скобок
+
+
Запрещено сравнение с NaN. Для проверки, является ли результат операции числовым, нужно использовать Number.isNaN
+
+
Запрещено использовать case без break или return в блоках switch
+
+
Не используются вложенные тернарные операторы
+
+
+
+
+
+
Функции
+
Если в функции используется ветвление, в котором есть возврат значения, то return должен быть добавлен и в остальных ветках.
Это правило предотвращает создание функций, при использовании которых непонятно, вернут ли они какое-то значение. В первом примере, функция do может вернуть значение 1, а может undefined
+
+
Единственное исключение — использование return без значения для прекращения работы функции:
В стрелочных функциях всегда используются скобки для параметров, даже если параметр один
+
+
+
+
+
+
Операторы
+
В конструкторе классов-наследников обязательно вызывается super()
+
+
В конструкторе нет обращения к this до того, как будет вызван super()
+
+
+
+
+
+
Объявление переменных и функций
+
При объявлении переменных предпочтение отдается ключевым словам let и const. Переменные объявляются через var только при наличии проблем с поддержкой ECMAScript 2015
+
+
Запрещено переопределять с помощью ключевого слова ранее созданные переменные
+
+
Запрещено использовать множественное объявление через одно ключевое слово. Для каждой переменной используется отдельный var, let или const.
+
const a = 1, b = 2;
+
+
const a = 1;
+const b = 2;
+
Объявление функций
+
Запрещено переопределение функций, созданных с помощью функционального объявления (function declaration)
+
function myFunc() {};
+myFunc = 2;
+
+
Новые функции не создаются с помощью конструктора Function
+
+
Вместо коллекции arguments, используется rest-оператор, если это позволяет версия языка
+
+
Для превращения массива с данными в аргументы вместо вызова функции через apply используется spread-оператор, если это позволяет версия языка
+
Math.max.apply(null, [1, 100, 15, 1000]);
+
+
Math.max(...[1, 100, 15, 1000]);
+
+
Создание значений
+
Не вызываются служебные конструкторы, создающие объекты из глобальной области видимости Math(), JSON(), Reflect()
+
+
При создании непустых массивов запрещено опускать пустые значения (ставить подряд несколько запятых)
+
+
Для создания новых значений не используются конструкторы примитивов String, Number, Boolean
+
+
Конструкторы вызываются со скобками, даже если у них нет параметров
+
+
Символы (Symbol) создаются вызовом функции Symbol без ключевого слова new
+
+
+
+
+
+
Хорошие практики
+
Не используется конструкция with
+
+
Не используются alert
+
+
Не используется выполнение кода через eval
+
+
Не используется неявный eval — в функциях, которые поддерживают передачу исполняемого кода как строку, например setTimeout
+
+
В ссылках используется протокол javascript:
+
+
Конструкторы не используются без ключевого слова new
+
+
В функциях не используются обращения к caller и callee
+
+
Манкипатчинг
+
+
Встроенные в язык объекты и прототипы не расширяются в рантайме
+
+
Не переопределяются глобальные значения (undefined, null, Object, window и прочие)
+
+
Контекст
+
bind не используется вне методов классов
+
+
В функциях, которые не являются методами никакого объекта или класса, не используется this
+
+
Переменные
+
Переменные, объявленные через var не удаляются оператором delete
+
+
+
+
+
+
Приведение типов
+
Не используется лишнее приведение к Boolean. Например, нет большого смысла переводить в boolean условия в конструкциях if, while, for, в первом операнде тернарного оператора
+
+
Оператор typeof используется корректно — используются только правильные значения, возвращаемые оператором, не производится сравнения со строковыми литералами, которые содержат некорректные значения typeof
+
+
В parseInt обязательно передается второй параметр — основание системы счисления, даже в случае с десятичной системой счисления
+
+
Константы в условиях
+
+
В блоки условия операторов if, while, for и тернарного оператора не передается константное значение, которое подразумевает, что условие выполняется (или не выполняется) всегда
+
if (true) {}
+
+
if (a > 1) {}
+
+
const ternaryValue = true ? 'a' : 'b';
+
+
const ternaryValue = isA() ? 'a' : 'b';
+
+
+
+
+
+
+
Чистый код
+
+
+
+
Лишние символы
+
Не используются лишние (множественные) точки с запятой
+
+
+
+
+
+
Отладчик и консоль
+
В коде не используются оставленные выводы в консоль
+
+
В коде нет забытых инструкций debugger
+
+
+
+
+
+
Неиспользуемый код
+
В проекте нет недоступного кода, который никогда не выполнится
+
if (false) {
+ doSomething();
+}
+
+
if (needToDoSomething()) {
+ doSomething();
+}
+
+
В коде нет объявленных, но неиспользуемых переменных
+
+
+
+
+
+
Обработка ошибок и исключения
+
Для выбрасывания исключения в оператор throw передаются только объекты Error. Передавать литералы запрещено.
+
throw 'Passed value is out of range';
+
+
throw new RangeError('Passed value is out of range');
+
+
В конструкции try..catch запрещен пустой блок catch
+
+
+
+
+
+
+
Прочее
+
+
+
+
При итерировании по объектам через for..in при работе со свойствами используется конструкция hasOwnProperty
+
+
В объектах напрямую не переопределяется свойство __iterator__
+
+
В объектах напрямую не переопределяется свойство __proto__. Разрешено переопределять __proto__ через Object.create или запись в прототип, объектов, созданных другими конструкторами, но напрямую редактировать __proto__ нельзя
+
const obj = {
+ __proto__: Parent
+};
+
+
const Obj = function() {};
+Obj.prototype = new Parent();
+const obj = new obj;
+
+const obj = Object.create(Parent.prototype);
+
+
В коде не используются лейблы. Лейблы используются с конструкциями break и continue для направленного выхода из цикла и могут привести к слишком сложному для понимания коду
+
+
Блоки, использующиеся в коде, должны описывать тело функции, условия, оператора switch и прочие конструкции, относящиеся к группировке множественных операций. Блоки не должны использоваться сами по себе, любой блок должен быть частью другого выражения
+
+
В коде не используется оператор «запятая» для описания последовательностей действий. Для создания переменных используются отдельные ключевые слова let, const, var, операторы группировки, условные операторы и прочие конструкции. Исключение составляет начальное условие оператора for
+
const result = (1, 2); // 2
+
+
const result = 2;
+
+
switch (val = getVal(), val) {}
+
+
val = getVal();
+switch(val) {}
+
+for (let i = 0, l = 100; i < l; i++);
+
+
+
+
+
+
Регулярные выражения
+
В регулярных выражениях не используются «управляющие выражения»
+
+
В регулярных выражениях не используются пустые классы символов [] (блоки, ограниченные квадратными скобками)
+
+
В коде регулярные выражения не создаются через конструктор RegExp из строки, которая не может быть разобрана как правильное регулярное выражение
+
+
В регулярных выражениях не используются нескольких последовательных пробелов. Вместо этого предлагается использовать модификаторы количества
+
/ /.exec(myString);
+
+
/\s\s\s/.exec(myString);
+
+
/\s{3}/.exec(myString);
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/prism.js b/js/prism.js
new file mode 100644
index 0000000..8d62d4e
--- /dev/null
+++ b/js/prism.js
@@ -0,0 +1,6 @@
+/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
+var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(v instanceof a)){u.lastIndex=0;var b=u.exec(v),k=1;if(!b&&h&&m!=r.length-1){if(u.lastIndex=y,b=u.exec(e),!b)break;for(var w=b.index+(c?b[1].length:0),_=b.index+b[0].length,P=m,A=y,j=r.length;j>P&&_>A;++P)A+=r[P].length,w>=A&&(++m,y=A);if(r[m]instanceof a||r[P-1].greedy)continue;k=P-m,v=e.slice(y,A),b.index-=y}if(b){c&&(f=b[1].length);var w=b.index+f,b=b[0].slice(f),_=w+b.length,x=v.slice(0,w),O=v.slice(_),S=[m,k];x&&S.push(x);var N=new a(i,g?n.tokenize(b,g):b,d,b,h);S.push(N),O&&S.push(O),Array.prototype.splice.apply(r,S)}}}}}return r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,l=0;r=a[l++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var l={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==l.type&&(l.attributes.spellcheck="true"),e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o=Object.keys(l.attributes).map(function(e){return e+'="'+(l.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+l.tag+' class="'+l.classes.join(" ")+'"'+(o?" "+o:"")+">"+l.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,l=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),l&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,!document.addEventListener||n.manual||r.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
+Prism.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
+Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:{pattern:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
+Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
+Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*\*?|\/|~|\^|%|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript;
diff --git a/md/syntax.md b/md/syntax.md
new file mode 100644
index 0000000..76e0aad
--- /dev/null
+++ b/md/syntax.md
@@ -0,0 +1,218 @@
+# Стиль кода JS
+
+## Форматирование
+### Строка не должна быть длиннее 80 символов
+Строки более 80 символов длиной, снижают скорость чтения заставляя читателя
+перемещать глаза на большое расстояние.
+
+Не стоит забывать и о том, что код, написанный в Академии часто показывается
+в разного рода презентациях, что увеличивает требования к читаемости кода
+
+### Выравнивание знаков равенства запрещено
+Трудоемкий и очень хрупкий процесс. Если хотя бы одна из переменных
+
+### Перенос строк
+#### Блоки кода отделяются двумя пробелами
+Код внутри блока отбивается двумя пробелами относительно начала блока.
+Правило работает даже внутри кода с другим отступом.
+```diff
++ function factorial(number) {
++ if (number === 1 || number === 0) {
++ return 1;
++ }
++
++ return number * factorial(number - 1);
++ }
+```
+
+```diff
++ document.querySelectorAll('button').
++ addEventListener('click', function(evt) {
++ // Используются два пробела, потому что отступ делается
++ // внутри тела функции, хоть она и является неперенесенным
++ // аргументом при вызове addEventListener.
++ evt.preventDefault();
++ ga._trackEvent('click', evt.target.innerText);
++ }, true);
+```
+
+#### Аргументы функций и вызовы через цепочку отделяются четырьмя пробелами
+При переносе длинных вызовов функции и обращении к свойствам через точку
+по длинной цепочке, при переносе используются четыре пробела. Меньшее количество
+пробелов сделает отступ неотличимым при быстром чтении кода от отступа
+у вложенного блока.
+
+```diff
++
+```
+
+#### Альтернативный способ переносить аргументы — выравнивать их с открывающей скобкой
+В определенных случаях аргументы функции можно выравнивать вместе
+с открывающей скобкой вызова функции. Это можно делать в случае,
+если названия аргументов достаточно длинные.
+
+Такой же перенос можно использовать в проверке условий (`if`, `while`).
+
+```diff
++ while (footer.getBoundingClientRect().top - window.innerHeight > 0 &&
++ currentPageNumber < itemsToShow) {
++ displayNextPage();
++ }
+```
+
+_В обоих случаях при переносе аргументов функции, закрывающая скобка
+при вызове остается на последней строке._
+
+#### Объявление объектов и массивов
+При многострочном объявлении массивов и объектов, используется два пробела
+и закрывающая скобка ставится на отдельную строку.
+```diff
++ var AvailableDirection = [
++ Direction.TOP,
++ Direction.LEFT,
++ Direction.RIGHT
++ ];
+```
+
+#### В многострочных операциях, операторы ставятся в конце строки, а не в начале
+При переносе длинных вызовов (чейны, объявление массивов и объектов, функции
+с большим количеством аргументов, тернарные операторы) операторы остаются
+на предыдущей строке.
+
+Правила с переносом оператора хорошо работают в языках, где необязательно
+удалять забытые запятые в конце списков. Но даже в этом случае быстрое удаление
+и сортировка строк не будут работать, потому у списков будет отличаться первая
+строка, а у чейнов — последняя и после сортировки и удаления нужно перепроверить
+получившийся список на валидность.
+
+```diff
++ document.body.
++ querySelectorAll('div').
++ quertSelectorAll('span');
+
+- document.body
+- .querySelectorAll('div')
+- .quertSelectorAll('span');
+```
+
+```diff
++ var Direction = {
++ TOP: 0x01,
++ BOTTOM: 0x02,
++ LEFT: 0x04,
++ RIGHT: 0x08
++ };
+
+- var Direction = {
+- TOP: 0x01
+- ,BOTTOM: 0x02
+- ,LEFT: 0x04
+- ,RIGHT: 0x08
+- };
+```
+
+```diff
++ var AvailableDirection = [
++ Direction.TOP,
++ Direction.LEFT,
++ Direction.RIGHT
++ ];
+
+- var AvailableDirection = [
+- Direction.TOP
+- ,Direction.LEFT
+- ,Direction.RIGHT
+- ];
+```
+
+Если примеры с объявлением массивов и объектов или с цепочкой вызовов
+объясняются логически, то перенос разделителей в тернарном операторе
+не имеет никакого смысла
+
+```diff
+- var element = 'content' in document.createElement('template')
+- ? template.content.children[0].cloneNode(true)
+- : template.children[0].cloneNode(true);
+
++ var element = 'content' in document.createElement('template') ?
++ template.content.children[0].cloneNode(true) :
++ template.chilren[0].cloneNode(true);
+```
+
+## Правила языка
+В каждом файле нужно использовать директиву `'use strict'` для включения
+интерпретатора в строгий режим исполнения JavaScript.
+
+### Каждая переменная объявляется через свой var
+Один var для нескольких переменных является одним шагом исполнения, поэтому
+проходится как интерпретатором, так и отладчиком как единственная инструкция,
+даже если объявленных переменных несколько. В этом случае проблемной становится
+отладка программы, если в одной из объявленных переменных допущена ошибка
+
+```diff
+- var container = document.querySelector('.container'),
+- buttons = container.querySelectorAll('button'),
+- panels = container.querySelectorAll('.panel');
+
++ var container = document.querySelector('.container');
++ var buttons = container.querySelectorAll('button');
++ var panels = container.querySelectorAll('.panel');
+```
+
+### Функции объявляются как переменные
+Функции должны объявляться как переменные. Особенности «подвешивания» функций
+позволяют их использовать до того как они были объявлены. Зачастую функция
+объявляется в локальной области видимости и в этом случае ее объявление
+не должно затрагивать всю область видимости.
+
+Положительный побочный эффект такого стиля заключается в том,
+что при использовании его в обучающем процессе идея колбэков объясняется
+сильно проще
+
+```diff
+- function onAnimationEnd(callback) {
+- if (isExecuting) {
+- function callbackToQueue() {
+- callback();
+- queue.splice(queue.indexOf(callbackToQueue), 1);
+- }
+-
+- queue.push(callbackToQueue);
+- } else {
+- callback();
+- }
+- }
+
++ var onAnimationEnd = function(callback) {
++ if (isExecuting) {
++ var callbackToQueue = function() { // Совсем хорошо, если let
++ callback();
++ queue.splice(queue.indexOf(callbackToQueue), 1);
++ }
++
++ queue.push(callbackToQueue);
++ } else {
++ callback();
++ }
++ }
+```
+
+### Замыкания
+```diff
+- function onItemClick(item, i) {
+- item.onClick = function() {
+- var clickedItem = i;
+- };
+- }
+
++ function onItemClick(item, i) {
++ item.click = getClickHandler(i);
++ }
++
++ function getClickHandler(i) {
++ var clickedItem = i;
++ }
+```
diff --git a/package.json b/package.json
deleted file mode 100644
index 4da81de..0000000
--- a/package.json
+++ /dev/null
@@ -1,49 +0,0 @@
-{
- "name": "htmlacademy--codeguide",
- "version": "0.1.0",
- "private": true,
- "dependencies": {
- "normalize.css": "^4.1.1",
- "prismjs": "^1.4.1",
- "prismjs-default-theme": "0.0.1"
- },
- "devDependencies": {
- "babel-core": "^6.1.2",
- "babel-loader": "^6.1.0",
- "babel-preset-es2015": "^6.1.2",
- "browser-sync": "^2.10.0",
- "css-mqpacker": "^4.0.0",
- "eslint": "^1.9.0",
- "fs-extra": "^0.26.2",
- "gulp": "gulpjs/gulp#4.0",
- "gulp-compile-handlebars": "^0.5.0",
- "gulp-minify-css": "^1.2.1",
- "gulp-postcss": "^6.0.1",
- "gulp-rename": "^1.2.2",
- "hbs-helpers": "^1.0.3",
- "husky": "^0.10.1",
- "merge": "^1.2.0",
- "node-libs-browser": "^0.5.3",
- "postcss-assets": "^3.0.2",
- "postcss-css-variables": "^0.5.1",
- "postcss-cssnext": "^2.2.0",
- "postcss-import": "^7.1.3",
- "postcss-mixins": "^2.1.1",
- "postcss-nested": "^1.0.0",
- "require-dir": "^0.3.0",
- "webpack": "^1.12.4",
- "webpack-stream": "^2.1.1"
- },
- "scripts": {
- "build": "gulp build",
- "dev": "gulp start",
- "start": "npm run dev",
- "lint": "eslint .",
- "prepush": "npm run lint",
- "test": "npm run lint"
- },
- "engines": {
- "node": ">=0.12"
- },
- "license": "MIT"
-}
-
- 
+
+