From b08f107a87c7bfb892ba20853e802e59ff6898f6 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Wed, 9 Dec 2020 17:57:43 +0300 Subject: [PATCH 01/55] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20normalize=20=D0=B4=D0=BE=20=D0=BF=D0=BE?= =?UTF-8?q?=D1=81=D0=BB=D0=B5=D0=B4=D0=BD=D0=B5=D0=B9=20=D0=B2=D0=B5=D1=80?= =?UTF-8?q?=D1=81=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/normalize.css | 166 ++++++++++++---------------------------------- 1 file changed, 44 insertions(+), 122 deletions(-) diff --git a/css/normalize.css b/css/normalize.css index b26c100..192eb9c 100644 --- a/css/normalize.css +++ b/css/normalize.css @@ -1,17 +1,15 @@ -/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. + * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } @@ -19,15 +17,18 @@ html { ========================================================================== */ /** - * Add the correct display in IE 9-. + * Remove the margin in all browsers. */ -article, -aside, -footer, -header, -nav, -section { +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { display: block; } @@ -44,25 +45,6 @@ h1 { /* Grouping content ========================================================================== */ -/** - * Add the correct display in IE 9-. - * 1. Add the correct display in IE. - */ - -figcaption, -figure, -main { /* 1 */ - display: block; -} - -/** - * Add the correct margin in IE 8. - */ - -figure { - margin: 1em 40px; -} - /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. @@ -88,17 +70,15 @@ pre { ========================================================================== */ /** - * 1. Remove the gray background on active links in IE 10. - * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + * Remove the gray background on active links in IE 10. */ a { - background-color: transparent; /* 1 */ - -webkit-text-decoration-skip: objects; /* 2 */ + background-color: transparent; } /** - * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ @@ -108,15 +88,6 @@ abbr[title] { text-decoration: underline dotted; /* 2 */ } -/** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. - */ - -b, -strong { - font-weight: inherit; -} - /** * Add the correct font weight in Chrome, Edge, and Safari. */ @@ -138,23 +109,6 @@ samp { font-size: 1em; /* 2 */ } -/** - * Add the correct font style in Android 4.3-. - */ - -dfn { - font-style: italic; -} - -/** - * Add the correct background and color in IE 9-. - */ - -mark { - background-color: #ff0; - color: #000; -} - /** * Add the correct font size in all browsers. */ @@ -188,44 +142,19 @@ sup { ========================================================================== */ /** - * Add the correct display in IE 9-. - */ - -audio, -video { - display: inline-block; -} - -/** - * Add the correct display in iOS 4-7. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Remove the border on images inside links in IE 10-. + * Remove the border on images inside links in IE 10. */ img { border-style: none; } -/** - * Hide the overflow in IE. - */ - -svg:not(:root) { - overflow: hidden; -} - /* Forms ========================================================================== */ /** - * Remove the margin in Firefox and Safari. + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. */ button, @@ -233,7 +162,10 @@ input, optgroup, select, textarea { - margin: 0; + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ } /** @@ -257,16 +189,14 @@ select { /* 1 */ } /** - * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` - * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS and Safari. + * Correct the inability to style clickable types in iOS and Safari. */ button, -html [type="button"], /* 1 */ +[type="button"], [type="reset"], [type="submit"] { - -webkit-appearance: button; /* 2 */ + -webkit-appearance: button; } /** @@ -292,6 +222,14 @@ button:-moz-focusring, outline: 1px dotted ButtonText; } +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. @@ -309,17 +247,15 @@ legend { } /** - * 1. Add the correct display in IE 9-. - * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ + vertical-align: baseline; } /** - * Remove the default vertical scrollbar in IE. + * Remove the default vertical scrollbar in IE 10+. */ textarea { @@ -327,8 +263,8 @@ textarea { } /** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. */ [type="checkbox"], @@ -357,10 +293,9 @@ textarea { } /** - * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + * Remove the inner padding in Chrome and Safari on macOS. */ -[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } @@ -379,12 +314,10 @@ textarea { ========================================================================== */ /* - * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. + * Add the correct display in Edge, IE 10+, and Firefox. */ -details, /* 1 */ -menu { +details { display: block; } @@ -396,30 +329,19 @@ summary { display: list-item; } -/* Scripting +/* Misc ========================================================================== */ /** - * Add the correct display in IE 9-. - */ - -canvas { - display: inline-block; -} - -/** - * Add the correct display in IE. + * Add the correct display in IE 10+. */ template { display: none; } -/* Hidden - ========================================================================== */ - /** - * Add the correct display in IE 10-. + * Add the correct display in IE 10. */ [hidden] { From 36640b9fee1420de162b1dccc3e899cb9990cca4 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Wed, 9 Dec 2020 18:09:42 +0300 Subject: [PATCH 02/55] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D1=8F=D0=B5=D1=82=20=D0=BE=D0=BF=D0=B5=D1=87=D0=B0=D1=82?= =?UTF-8?q?=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- md/syntax.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/md/syntax.md b/md/syntax.md index ab1bdd7..76e0aad 100644 --- a/md/syntax.md +++ b/md/syntax.md @@ -2,7 +2,7 @@ ## Форматирование ### Строка не должна быть длиннее 80 символов -Строки более 80 символов длиной, снижают скорость чтения заставляя читатаеля +Строки более 80 символов длиной, снижают скорость чтения заставляя читателя перемещать глаза на большое расстояние. Не стоит забывать и о том, что код, написанный в Академии часто показывается @@ -36,7 +36,7 @@ + }, true); ``` -#### Аргументы функций и вызовы через цепчку отделяются четырьмя пробелами +#### Аргументы функций и вызовы через цепочку отделяются четырьмя пробелами При переносе длинных вызовов функции и обращении к свойствам через точку по длинной цепочке, при переносе используются четыре пробела. Меньшее количество пробелов сделает отступ неотличимым при быстром чтении кода от отступа @@ -83,7 +83,7 @@ _В обоих случаях при переносе аргументов фу на предыдущей строке. Правила с переносом оператора хорошо работают в языках, где необязательно -удалять забытые запятые в конце спиков. Но даже в этом случае быстрое удаление +удалять забытые запятые в конце списков. Но даже в этом случае быстрое удаление и сортировка строк не будут работать, потому у списков будет отличаться первая строка, а у чейнов — последняя и после сортировки и удаления нужно перепроверить получившийся список на валидность. @@ -169,7 +169,7 @@ _В обоих случаях при переносе аргументов фу не должно затрагивать всю область видимости. Положительный побочный эффект такого стиля заключается в том, -что при использовании его в обучающем процессе идея коллбэков объясняется +что при использовании его в обучающем процессе идея колбэков объясняется сильно проще ```diff From 55c28c13e127cf8fa57126cd5b42b72299015dd9 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Wed, 9 Dec 2020 18:33:50 +0300 Subject: [PATCH 03/55] =?UTF-8?q?=D0=92=D1=8B=D0=BD=D0=BE=D1=81=D0=B8?= =?UTF-8?q?=D1=82=20
=20=D0=B8=D0=B7=20
?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 javascript.html | 46 +++++++++++++++-------------------------------
 1 file changed, 15 insertions(+), 31 deletions(-)

diff --git a/javascript.html b/javascript.html
index ff27057..cf32a86 100644
--- a/javascript.html
+++ b/javascript.html
@@ -61,7 +61,7 @@ 
Отступы, пробелы и переносы

 const longerName = 2;
-

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

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

if (condition)
 {
   // code
@@ -72,8 +72,6 @@ 
Отступы, пробелы и переносы

   // code
 }
-

-

В однострочных блоках кода, код отделен от открывающей и закрывающей скобки пробелом

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

@@ -150,13 +148,12 @@

Отступы, пробелы и переносы

Строки

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

-

В строках запрещено указывать код спецсимволов в восьмеричной системе счисления +

В строках запрещено указывать код спецсимволов в восьмеричной системе счисления

const foo = "Copyright \251";
 
const foo = "Copyright \u00A9";
-

При создании объектов через литералы свойства должны объявляться в едином стиле: или без кавычек или с ними

@@ -238,13 +235,12 @@

Предотвращение ошибок

Условные операторы

-

Запрещена «проверка Йоды» — в условных операторах в блоке условия при сравнении переменной или свойства со значением сначала идет переменная или свойство объекта и только потом значения, а не наоборот. +

Запрещена «проверка Йоды» — в условных операторах в блоке условия при сравнении переменной или свойства со значением сначала идет переменная или свойство объекта и только потом значения, а не наоборот.

if (1 === myValue) { /*...*/ }
 
if (myValue === 1) { /*...*/ }
-

- +

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

В условных операторах не используется оператор присвоения

@@ -318,33 +314,29 @@

Объявление переменных и функций

Запрещено переопределять с помощью ключевого слова ранее созданные переменные

-

Запрещено использовать множественное объявление через одно ключевое слово. Для каждой переменной используется отдельный var, let или const. +

Запрещено использовать множественное объявление через одно ключевое слово. Для каждой переменной используется отдельный var, let или const.

const a = 1, b = 2;
 
const a = 1;
 const b = 2;
-

-

Объявление функций

-

Запрещено переопределение функций, созданных с помощью функционального объявления (function declaration) +

Запрещено переопределение функций, созданных с помощью функционального объявления (function declaration)

function myFunc() {};
 myFunc = 2;
-

+

Новые функции не создаются с помощью конструктора Function

Вместо коллекции arguments, используется rest-оператор, если это позволяет версия языка

-

Для превращения массива с данными в аргументы вместо вызова функции через apply используется spread-оператор, если это позволяет версия языка - +

Для превращения массива с данными в аргументы вместо вызова функции через apply используется spread-оператор, если это позволяет версия языка

Math.max.apply(null, [1, 100, 15, 1000]);
 
Math.max(...[1, 100, 15, 1000]);
-

Создание значений

Не вызываются служебные конструкторы, создающие объекты из глобальной области видимости Math(), JSON(), Reflect()

@@ -405,7 +397,7 @@

Приведение типов

Константы в условиях

-

В блоки условия операторов if, while, for и тернарного оператора не передается константное значение, которое подразумевает, что условие выполняется (или не выполняется) всегда +

В блоки условия операторов if, while, for и тернарного оператора не передается константное значение, которое подразумевает, что условие выполняется (или не выполняется) всегда

if (true) {}
@@ -417,7 +409,6 @@

Константы в условиях

const ternaryValue = isA() ? 'a' : 'b';
-

@@ -445,8 +436,7 @@

Отладчик и консоль

Неиспользуемый код

-

В проекте нет недоступного кода, который никогда не выполнится - +

В проекте нет недоступного кода, который никогда не выполнится

if (false) {
   doSomething();
 }
@@ -456,7 +446,6 @@ 
Неиспользуемый код

   doSomething();
 }
-

В коде нет объявленных, но неиспользуемых переменных

@@ -465,13 +454,12 @@

Неиспользуемый код

Обработка ошибок и исключения

-

Для выбрасывания исключения в оператор throw передаются только объекты Error. Передавать литералы запрещено. - +

Для выбрасывания исключения в оператор throw передаются только объекты Error. Передавать литералы запрещено.

throw 'Passed value is out of range';
 
throw new RangeError('Passed value is out of range');
-

+

В конструкции try..catch запрещен пустой блок catch

@@ -488,7 +476,7 @@

Прочее

В объектах напрямую не переопределяется свойство __iterator__

-

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

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

const obj = {
   __proto__: Parent
 };
@@ -500,13 +488,12 @@ 
Прочее

 
 const obj = Object.create(Parent.prototype);
-

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

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

-

В коде не используется оператор «запятая» для описания последовательностей действий. Для создания переменных используются отдельные ключевые слова let, const, var, операторы группировки, условные операторы и прочие конструкции. Исключение составляет начальное условие оператора for +

В коде не используется оператор «запятая» для описания последовательностей действий. Для создания переменных используются отдельные ключевые слова let, const, var, операторы группировки, условные операторы и прочие конструкции. Исключение составляет начальное условие оператора for

const result = (1, 2); // 2
@@ -521,7 +508,6 @@

Прочее

for (let i = 0, l = 100; i < l; i++); -

@@ -534,8 +520,7 @@

Регулярные выражения

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

-

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

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

/   /.exec(myString);
@@ -544,7 +529,6 @@

Регулярные выражения

/\s{3}/.exec(myString);
-

From 0be034b8a6c12fafcd13f95f10638a4edcb5ffb4 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Wed, 9 Dec 2020 18:47:20 +0300 Subject: [PATCH 04/55] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D1=81=D1=81=D1=8B=D0=BB=D0=BA=D1=83=20?= =?UTF-8?q?=D0=BD=D0=B0=20=D1=81=D0=B0=D0=B9=D1=82=D0=B0=20=D0=B2=20readme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Readme.md b/Readme.md index 84f76ec..e2c4d55 100644 --- a/Readme.md +++ b/Readme.md @@ -1,4 +1,5 @@ # Стиль кода Академии HTML +Стиль кода можно [посмотреть тут](https://codeguide.academy/). ## Благодарности From 9f8dfb8f6f8c5c71ec6875a7dd223afe0eac50cc Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Thu, 10 Dec 2020 10:50:44 +0300 Subject: [PATCH 05/55] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D1=8F=D0=B5?= =?UTF-8?q?=D1=82=20=D1=81=D1=82=D0=B0=D1=80=D1=8B=D0=B9=20ga?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 2 -- index.html | 2 -- javascript.html | 2 -- 3 files changed, 6 deletions(-) diff --git a/html-css.html b/html-css.html index a757a83..4f14d48 100644 --- a/html-css.html +++ b/html-css.html @@ -15,8 +15,6 @@ - - diff --git a/index.html b/index.html index b3dbc00..17a8433 100644 --- a/index.html +++ b/index.html @@ -15,8 +15,6 @@ - - diff --git a/javascript.html b/javascript.html index ff27057..08cb6cb 100644 --- a/javascript.html +++ b/javascript.html @@ -16,8 +16,6 @@ - - + + + + From 013452c1390ded203ad9403bda2af0db79c3df91 Mon Sep 17 00:00:00 2001 From: Dima Os Date: Sat, 18 Jul 2020 01:00:49 +0300 Subject: [PATCH 07/55] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D1=8F=D0=B5=D1=82=20=D0=BE=D0=BF=D0=B5=D1=87=D0=B0=D1=82?= =?UTF-8?q?=D0=BA=D1=83=20=D0=B2=20=D0=BA=D0=BE=D0=B4=D0=B3=D0=B0=D0=B9?= =?UTF-8?q?=D0=B4=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- javascript.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/javascript.html b/javascript.html index ff27057..51b5fed 100644 --- a/javascript.html +++ b/javascript.html @@ -210,7 +210,7 @@

Именование

Запрещено называть переменные и свойства ключевыми словами JS

-

Запрещено использовать переменные, не объявленные ранее. При использовании переменной, объявленной в другом модуле в глобальной области видимости нужно обращаться к ней как в свойству объекта window

+

Запрещено использовать переменные, не объявленные ранее. При использовании переменной, объявленной в другом модуле в глобальной области видимости нужно обращаться к ней как к свойству объекта window

Запрещено напрямую обращаться к значению undefined. Для проверки типа рекомендуется использовать typeof. Исключение составляет явная передача undefined при вызове функции вместо аргумента, чтобы использовать значение параметра по умолчанию

From 204e762a8df00a5e33067e598f2743bae1afa469 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Thu, 10 Dec 2020 15:07:25 +0300 Subject: [PATCH 08/55] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20ga=20=D0=B4=D0=BE=20tagmanager?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 15 ++++++--------- index.html | 14 ++++++-------- javascript.html | 15 ++++++--------- 3 files changed, 18 insertions(+), 26 deletions(-) diff --git a/html-css.html b/html-css.html index 05e00c0..e409b0d 100644 --- a/html-css.html +++ b/html-css.html @@ -16,17 +16,14 @@ - - - + + + - + + +
diff --git a/index.html b/index.html index 0617246..1de67ff 100644 --- a/index.html +++ b/index.html @@ -16,16 +16,14 @@ - - - + + + + + +
diff --git a/javascript.html b/javascript.html index 41658d9..10c0aa2 100644 --- a/javascript.html +++ b/javascript.html @@ -24,17 +24,14 @@ } - - - + + + - + + +
From 5ac4d5a54038ae555b12af5afb0d18c20d3bdb95 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Mon, 21 Dec 2020 18:42:15 +0300 Subject: [PATCH 09/55] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20visually-hidden?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/html-css.html b/html-css.html index e409b0d..cc74abe 100644 --- a/html-css.html +++ b/html-css.html @@ -60,6 +60,7 @@

CSS

  • Имена классов
  • Правило @import
  • Варианты шрифта
    • +
  • Доступное скрытие
    • @@ -541,6 +542,47 @@

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

    + +
    +
    +

    Доступное скрытие

    +

    + Для того, чтобы контент был скрыт от глаз, но доступен для скринридеров и поисковиков его нужно скрывать используя утилитарный класс visually-hidden. +

    +
    +
    +
    + 
    /* Плохо: скрывать элемент с помощью font-size, display:none */
+h1 {
+  font-size: 0;
+}
+
+.title {
+  display: none;
+}
    +
    +
    + 
    
+/* Хорошо: использован класс visually-hidden */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  white-space: nowrap;
+  clip-path: inset(100%);
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}
    +
    +
    + 
    
+<h2 class="visually-hidden">Заголовок</h2>
    +
    +
    +
    From 864d391325a136d24fece46a1ddb86b4edadcd17 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Mon, 21 Dec 2020 22:44:49 +0300 Subject: [PATCH 10/55] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D1=8F=D0=B5=D1=82=20=D1=81=D1=81=D1=8B=D0=BB=D0=BA=D1=83?= =?UTF-8?q?=20=D0=BD=D0=B0=20=D0=B1=D0=BB=D0=BE=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html-css.html b/html-css.html index cc74abe..d6cbdb4 100644 --- a/html-css.html +++ b/html-css.html @@ -545,7 +545,7 @@

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

    -

    Доступное скрытие

    +

    Доступное скрытие

    Для того, чтобы контент был скрыт от глаз, но доступен для скринридеров и поисковиков его нужно скрывать используя утилитарный класс visually-hidden.

    From 875e1f72066ae2fab9dd46029f259c3727f3b12e Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 22 Dec 2020 13:04:06 +0300 Subject: [PATCH 11/55] =?UTF-8?q?=D0=94=D0=B5=D0=BB=D0=B0=D0=B5=D1=82=20?= =?UTF-8?q?=D1=81=D0=BA=D1=80=D0=BE=D0=BB=D0=BB=20=D0=BF=D0=BB=D0=B0=D0=B2?= =?UTF-8?q?=D0=BD=D1=8B=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/style.css b/css/style.css index 87eeb07..db098b5 100644 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,6 @@ html { font-size: 16px; + scroll-behavior: smooth; } body { From afc18c9ee1a8d7c15e222fd09fe9d95ebc31c270 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 22 Dec 2020 13:08:17 +0300 Subject: [PATCH 12/55] =?UTF-8?q?=D0=A7=D0=B8=D0=BD=D0=B8=D1=82=20=D1=81?= =?UTF-8?q?=D0=BC=D0=B5=D1=89=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=81=D0=BA=D1=80?= =?UTF-8?q?=D0=BE=D0=BB=D0=BB=D0=B0=20=D0=BA=20=D1=8D=D0=BB=D0=B5=D0=BC?= =?UTF-8?q?=D0=B5=D0=BD=D1=82=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/style.css b/css/style.css index db098b5..1765483 100644 --- a/css/style.css +++ b/css/style.css @@ -49,6 +49,7 @@ h2 { h3 { font-size: 1.75rem; + scroll-margin-top: 60px; } code, From f21f20f4d2d7b2ed6f74e0dcfa12afdb9d658f8a Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 22 Dec 2020 18:29:49 +0300 Subject: [PATCH 13/55] =?UTF-8?q?#32=20=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2?= =?UTF-8?q?=D0=BB=D1=8F=D0=B5=D1=82=20=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB?= =?UTF-8?q?=D0=BE=20=D0=B4=D0=BB=D1=8F=20camelCase-=D0=B0=D1=82=D1=80?= =?UTF-8?q?=D0=B8=D0=B1=D1=83=D1=82=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .htmlhintrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.htmlhintrc b/.htmlhintrc index 6feda33..53f0c00 100644 --- a/.htmlhintrc +++ b/.htmlhintrc @@ -1,6 +1,6 @@ { "tagname-lowercase": true, - "attr-lowercase": true, + "attr-lowercase": ["viewBox", "preserveAspectRatio"], "attr-value-double-quotes": true, "attr-value-not-empty": false, "attr-no-duplication": true, From b3586c69ffe43538f136ed1b3c9c1ee87f9ce18b Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Wed, 23 Dec 2020 17:28:20 +0300 Subject: [PATCH 14/55] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=BD=D0=BE?= =?UTF-8?q?=D1=81=D0=B8=D1=82=20htmlhint=20=D0=B2=20=D0=B4=D1=80=D1=83?= =?UTF-8?q?=D0=B3=D0=BE=D0=B9=20=D1=80=D0=B5=D0=BF=D0=BE=D0=B7=D0=B8=D1=82?= =?UTF-8?q?=D0=BE=D1=80=D0=B8=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .htmlhintrc | 24 ------------------------ Readme.md | 4 ++++ 2 files changed, 4 insertions(+), 24 deletions(-) delete mode 100644 .htmlhintrc diff --git a/.htmlhintrc b/.htmlhintrc deleted file mode 100644 index 53f0c00..0000000 --- a/.htmlhintrc +++ /dev/null @@ -1,24 +0,0 @@ -{ - "tagname-lowercase": true, - "attr-lowercase": ["viewBox", "preserveAspectRatio"], - "attr-value-double-quotes": true, - "attr-value-not-empty": false, - "attr-no-duplication": true, - "doctype-first": true, - "tag-pair": true, - "tag-self-close": false, - "spec-char-escape": true, - "id-unique": true, - "src-not-empty": true, - "title-require": true, - "alt-require": true, - "doctype-html5": true, - "id-class-value": "dash", - "style-disabled": false, - "inline-style-disabled": false, - "inline-script-disabled": false, - "space-tab-mixed-disabled": "space", - "id-class-ad-disabled": false, - "href-abs-or-rel": false, - "attr-unsafe-chars": true -} diff --git a/Readme.md b/Readme.md index 84f76ec..64c0754 100644 --- a/Readme.md +++ b/Readme.md @@ -16,3 +16,7 @@ ESLint — https://github.com/htmlacademy/eslint-config-htmlacademy Stylelint — https://github.com/htmlacademy/stylelint-config-htmlacademy + +### Устаревшее + +HTMLHint - https://github.com/htmlacademy/htmlhint-config-htmlacademy From 3c63fdb95f71b7749f5d577c213f462134bfca8b Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Fri, 25 Dec 2020 11:15:49 +0300 Subject: [PATCH 15/55] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D1=8F=D0=B5?= =?UTF-8?q?=D1=82=20=D0=BF=D1=80=D0=BE=20"=D1=83=D1=81=D1=82=D0=B0=D1=80?= =?UTF-8?q?=D0=B5=D0=B2=D1=88=D0=B5=D0=B5"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Readme.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/Readme.md b/Readme.md index 64c0754..878e584 100644 --- a/Readme.md +++ b/Readme.md @@ -17,6 +17,4 @@ ESLint — https://github.com/htmlacademy/eslint-config-htmlacademy Stylelint — https://github.com/htmlacademy/stylelint-config-htmlacademy -### Устаревшее - HTMLHint - https://github.com/htmlacademy/htmlhint-config-htmlacademy From 6075210f08a33cd0ce7b08504e3bbd201367029f Mon Sep 17 00:00:00 2001 From: Nick Petrenko <63558439+extendsnull@users.noreply.github.com> Date: Wed, 13 Jan 2021 23:04:41 +0200 Subject: [PATCH 16/55] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D1=81=D0=B0=D0=B9=D0=B4=D0=B1=D0=B0=D1=80?= =?UTF-8?q?=20=D1=81=20=D0=BD=D0=B0=D0=B2=D0=B8=D0=B3=D0=B0=D1=86=D0=B8?= =?UTF-8?q?=D0=B5=D0=B9=20(#49)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Добавляет сайдбар с навигацией * Возвращает исходные размеры текста. * Удаляет ненужные стили * Изменяет scroll-margin-top у заголовков * Изменяет адрес ссылки с котиком * Форматирует отступы для листингов кода * Форматирует отступы в листингах кода --- css/style.css | 159 ++++++++++- html-css.html | 699 ++++++++++++++++++++++++------------------------ index.html | 2 +- javascript.html | 662 +++++++++++++++++++++++---------------------- 4 files changed, 840 insertions(+), 682 deletions(-) diff --git a/css/style.css b/css/style.css index 1765483..acb48a7 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,9 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + html { font-size: 16px; scroll-behavior: smooth; @@ -14,12 +20,14 @@ body { a:link, a:visited { - color: #5a5a5a; - text-decoration: underline; + color: #3f3ccb; + text-decoration: none; } -a:hover { - text-decoration: none; +a:hover, +a:focus { + color: #302683; + text-decoration: underline; } h1, @@ -49,7 +57,7 @@ h2 { h3 { font-size: 1.75rem; - scroll-margin-top: 60px; + scroll-margin-top: 20px; } code, @@ -155,12 +163,62 @@ header a:visited { height: 300px; } -.chapter h2 { +.guide-content { + display: flex; + flex-wrap: wrap; +} + +.sidebar { + display: flex; + flex-direction: column; + + width: 100%; +} + +.sidebar a { + display: block; + color: #5a5a5a; +} + +.sidebar a:hover { + color: #3f3ccb; +} + +.sidebar-col { padding: 2rem 1rem; +} + +.sidebar-col + .sidebar-col { + border-top: 1px solid #e5e5e5; +} + +.sidebar-col > a { + font-size: 1.75rem; + line-height: 1.25; +} +.sidebar-menu { + padding-left: 1rem; +} + +.chapters { + width: 100%; +} + +.chapter h2 { + padding: 2rem 1rem; + word-break: break-word; background-color: #e5e5e5; } +.chapter h3[id]::before { + display: block; + height: 2rem; + margin-top: -2rem; + visibility: hidden; + content: ""; +} + .chapter-part { display: flex; flex-direction: column; @@ -275,6 +333,22 @@ footer { } @media (min-width: 48em) { + .sidebar { + flex-direction: row; + flex-wrap: wrap; + + padding: 2rem 0; + } + + .sidebar-col { + width: 50%; + padding: 1rem 3rem; + } + + .sidebar-col + .sidebar-col { + border-top: 0; + } + .chapter h2 { padding: 2rem 3rem 2.5rem; } @@ -285,7 +359,7 @@ footer { .chapter-part-col { width: 50%; - padding: 3rem; + padding: 3rem 1.5rem; } .chapter-part-col--full-width { @@ -297,6 +371,77 @@ footer { } } +@media (min-width: 75em) { + .chapters { + width: calc(100% - 230px); + } + + .sidebar { + position: sticky; + top: 0; + bottom: 0; + + flex-direction: column; + flex-wrap: nowrap; + align-self: flex-start; + + width: 230px; + height: 100vh; + padding: 0 1rem; + + overflow-y: auto; + line-height: 1.25; + border-right: 1px solid #e5e5e5; + } + + .sidebar-col { + flex-shrink: 0; + + width: 100%; + padding: 0; + } + + .sidebar-col-first { + padding-top: 1.75rem; + } + + .sidebar-col-last { + padding-bottom: 1.75rem; + } + + .sidebar-col + .sidebar-col { + margin-top: 1.75em; + } + + .sidebar-col > a { + display: block; + + font-size: 0.8rem; + font-weight: bold; + } + + .sidebar-menu { + padding: 0; + margin: 0.5em 0 0; + + list-style: none; + + font-size: 0.7rem; + } + + .sidebar-menu li { + margin: 0; + + line-height: 1.45; + } + + .sidebar-menu a { + display: block; + + padding: 0.25em 0; + } +} + /* override default prism theme */ code[class*="language-"], pre[class*="language-"] { diff --git a/html-css.html b/html-css.html index d6cbdb4..0864422 100644 --- a/html-css.html +++ b/html-css.html @@ -25,64 +25,65 @@
    - +

    Стиль кода Академии HTML

    github.com/htmlacademy/codeguide

    -
    -
    -

    Оглавление

    -
    -
    -

    HTML

    - -
    -
    -

    CSS

    - -
    -
    -
    - -
    -

    HTML

    - -
    -
    -

    Синтаксис

    -
      -
    • Для отступов у вложенных элементов используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
      • -
    • Теги и их атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки.
      • -
    • Необязательный закрывающий слеш у одиночных тегов (<img>, <br> и другие) не ставится.
      • -
    • Необязательные закрывающие теги (например, </li> или </body>) не пропускаются.
      • -
    • Для проверки HTML-кода используйте файл конфигурации .htmlhintrc для настройки валидатора HTMLHint.
      • -
    -
    -
    -
    - 
    <!DOCTYPE html>
+    
    
+      
+
+      
    
+        
    
+          
    HTML
    
+
+          
    
+            
    
+              
    Синтаксис
    
+              
      
+                
    • Для отступов у вложенных элементов используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
      • 
+                
    • Теги и их атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки.
      • 
+                
    • Необязательный закрывающий слеш у одиночных тегов (<img>, <br> и другие) не ставится.
      • 
+                
    • Необязательные закрывающие теги (например, </li> или </body>) не пропускаются.
      • 
+                
    • Для проверки HTML-кода используйте файл конфигурации .htmlhintrc для настройки валидатора HTMLHint.
      • 
+              
    
+            
    
+            
    
+              
    
+                
    <!DOCTYPE html>
 <html lang="ru">
   <head>
     <meta charset="utf-8">
@@ -98,64 +99,64 @@ 
    Синтаксис
    
     </article>
   </body>
 </html>
    
-            
    
-          
    
-        
    
-
-        
    
-          
    
-            
    Валидность
    
-            
    
-              Документ должен проходить проверку на валидность. Для проверки используется современный валидатор.
-            
    
-          
    
-        
    
-
-        
    
-          
    
-            
    HTML-доктайп
    
-            
    
-              В начале страницы обязательно должен быть указан актуальный doctype, чтобы браузер отображал её в режиме соответствия стандартам. Это гарантирует, что страница будет выглядеть единообразно во всех современных браузерах.
-            
    
-          
    
-          
    
-            
    
-              
    <!DOCTYPE html>
+              
    
+            
    
+          
    
+
+          
    
+            
    
+              
    Валидность
    
+              
    
+                Документ должен проходить проверку на валидность. Для проверки используется современный валидатор.
+              
    
+            
    
+          
    
+
+          
    
+            
    
+              
    HTML-доктайп
    
+              
    
+                В начале страницы обязательно должен быть указан актуальный doctype, чтобы браузер отображал её в режиме соответствия стандартам. Это гарантирует, что страница будет выглядеть единообразно во всех современных браузерах.
+              
    
+            
    
+            
    
+              
    
+                
    <!DOCTYPE html>
 <html lang="ru">
   <head>…</head>
   <body>…</body>
 </html>
    
-            
    
-          
    
-        
    
-
-        
    
-          
    
-            
    Кодировка символов
    
-            
    
-              Кодировка символов на странице всегда должна быть явно указана, чтобы обеспечить корректное отображение текста. Кодировка utf-8 предпочтительна.
-            
    
-          
    
-          
    
-            
    
-              
    <head>
+              
    
+            
    
+          
    
+
+          
    
+            
    
+              
    Кодировка символов
    
+              
    
+                Кодировка символов на странице всегда должна быть явно указана, чтобы обеспечить корректное отображение текста. Кодировка utf-8 предпочтительна.
+              
    
+            
    
+            
    
+              
    
+                
    <head>
   <meta charset="utf-8">
   <title>Заголовок страницы</title>
 </head>
    
-            
    
-          
    
-        
    
-
-        
    
-          
    
-            
    Подключение стилей
    
-            
    
-              Стилевые файлы с помощью <link> подключаются внутри <head>. При этом атрибут type для тега <link> не указывается, так как его значение text/css устанавливается по умолчанию.
-            
    
-          
    
-          
    
-            
    
-              
    <!-- Хорошо: стилевой файл подключён в секции head -->
+              
    
+            
    
+          
    
+
+          
    
+            
    
+              
    Подключение стилей
    
+              
    
+                Стилевые файлы с помощью <link> подключаются внутри <head>. При этом атрибут type для тега <link> не указывается, так как его значение text/css устанавливается по умолчанию.
+              
    
+            
    
+            
    
+              
    
+                
    <!-- Хорошо: стилевой файл подключён в секции head -->
 <!DOCTYPE html>
 <html lang="ru">
   <head>
@@ -172,23 +173,23 @@ 
    Подключение стилей
    
     <link rel="stylesheet" href="http://github.com/style.css">
   </body>
 </html>
    
-            
    
-          
    
-        
    
-
-        
    
-          
    
-            
    Подключение скриптов
    
-            
    
-              Скрипты должны подключаться в самом низу страницы, чтобы при её загрузке не блокировать отображение содержимого.
-            
    
-            
    
-              При подключении скриптов в теге <script> атрибут type не указывается, так как его значение text/javascript устанавливается по умолчанию.
-            
    
-          
    
-          
    
-            
    
-              
    <!-- Хорошо: скрипт подключается перед </body> -->
+              
    
+            
    
+          
    
+
+          
    
+            
    
+              
    Подключение скриптов
    
+              
    
+                Скрипты должны подключаться в самом низу страницы, чтобы при её загрузке не блокировать отображение содержимого.
+              
    
+              
    
+                При подключении скриптов в теге <script> атрибут type не указывается, так как его значение text/javascript устанавливается по умолчанию.
+              
    
+            
    
+            
    
+              
    
+                
    <!-- Хорошо: скрипт подключается перед </body> -->
 <!DOCTYPE html>
 <html lang="ru">
   <head>…</head>
@@ -206,41 +207,41 @@ 
    Подключение скриптов
    
   </head>
   <body>…</body>
 </html>
    
-            
    
-          
    
-        
    
-
-        
    
-          
    
-            
    Порядок атрибутов
    
-            
    
-              Атрибут класса у HTML-элементов пишется первым. Единообразное написание помогает легче считывать код и быстрее разбираться в назначении блоков по их классам.
-            
    
-            
    
-              Остальные атрибуты могут быть расставлены в любом порядке, но тоже единообразно для одинаковых элементов.
-            
    
-          
    
-          
    
-            
    
-              
    <a class="element element-big" id="element" href="http://github.com/" data-name="element">Ссылка</a>
+              
    
+            
    
+          
    
+
+          
    
+            
    
+              
    Порядок атрибутов
    
+              
    
+                Атрибут класса у HTML-элементов пишется первым. Единообразное написание помогает легче считывать код и быстрее разбираться в назначении блоков по их классам.
+              
    
+              
    
+                Остальные атрибуты могут быть расставлены в любом порядке, но тоже единообразно для одинаковых элементов.
+              
    
+            
    
+            
    
+              
    
+                
    <a class="element element-big" id="element" href="http://github.com/" data-name="element">Ссылка</a>
 
 <input class="form-control" type="text" name="test">
 
 <img class="pets-picture" src="http://github.com/cats.jpg" alt="Изображение котиков">
    
-            
    
-          
    
-        
    
-
-        
    
-          
    
-            
    Логические атрибуты
    
-            
    
-              Для логических атрибутов (например, checked, disabled, required) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе.
-            
    
-          
    
-          
    
-            
    
-              
    <!-- checked="checked" необязательно -->
+              
    
+            
    
+          
    
+
+          
    
+            
    
+              
    Логические атрибуты
    
+              
    
+                Для логических атрибутов (например, checked, disabled, required) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе.
+              
    
+            
    
+            
    
+              
    
+                
    <!-- checked="checked" необязательно -->
 <input type="checkbox" required checked>
 
 <input type="text" disabled>
@@ -249,19 +250,19 @@ 
    Логические атрибуты
    
   <option value="1" selected>1</option>
 </select>
    
             
    
-          
    
-        
    
-
-        
    
-          
    
-            
    Подписи полей ввода
    
-            
    
-              Для улучшения взаимодействия пользователя с элементами форм, при нажатии на подпись поля, оно должно активироваться. Для этого элемент формы связывается с его описанием с помощью идентификатора и атрибута for тега <label>.
-            
    
-          
    
-          
    
-            
    
-              
    <!-- Хорошо: элемент формы radio связан с подписью через идентификатор -->
+            
    
+          
    
+
+          
    
+            
    
+              
    Подписи полей ввода
    
+              
    
+                Для улучшения взаимодействия пользователя с элементами форм, при нажатии на подпись поля, оно должно активироваться. Для этого элемент формы связывается с его описанием с помощью идентификатора и атрибута for тега <label>.
+              
    
+            
    
+            
    
+              
    
+                
    <!-- Хорошо: элемент формы radio связан с подписью через идентификатор -->
 <input type="radio" id="choose">
 <label for="choose">Радио кнопка</label>
 
@@ -272,23 +273,23 @@ 
    Подписи полей ввода
    
 
 <!-- Плохо: подпись не связана с элементом формы -->
 <input type="radio" id="choose"> Радио кнопка
    
-            
    
-          
    
-        
    
-
-        
    
-          
    
-            
    Размеры картинок
    
-            
    
-              Изображениям <img> должны быть явно заданы с помощью атрибута размеры в пикселях. В случае пикселей размерность не нужна.
-            
    
-            
    
-              По возможности изображениям указываются действительные размеры, так как это улучшает производительность отрисовки страницы: браузер не будет перерисовывать страницу в процессе загрузки и отображения изображения.
-            
    
-          
    
-          
    
-            
    
-              
    <!-- Хорошо: размеры картинке заданы -->
+              
    
+            
    
+          
    
+
+          
    
+            
    
+              
    Размеры картинок
    
+              
    
+                Изображениям <img> должны быть явно заданы с помощью атрибута размеры в пикселях. В случае пикселей размерность не нужна.
+              
    
+              
    
+                По возможности изображениям указываются действительные размеры, так как это улучшает производительность отрисовки страницы: браузер не будет перерисовывать страницу в процессе загрузки и отображения изображения.
+              
    
+            
    
+            
    
+              
    
+                
    <!-- Хорошо: размеры картинке заданы -->
 <div class="logo-area">
   <img src="http://github.com/logo.png" alt="" width="300" height="150">
 </div>
@@ -302,60 +303,60 @@ 
    Размеры картинок
    
 <div class="logo-area">
   <img src="http://github.com/logo.png" alt="">
 </div>
    
-            
    
-          
    
-        
    
-
-        
    
-          
    
-            
    Атрибут языка
    
-            
    
-              Для элемента <html> в атрибуте lang должен указываться соответствующий язык документа. Это помогает инструментам синтеза речи определить, какое использовать произношение или системам перевода, какие использовать языковые правила.
-            
    
-          
    
-          
    
-            
    
-              
    <!DOCTYPE html>
+              
    
+            
    
+          
    
+
+          
    
+            
    
+              
    Атрибут языка
    
+              
    
+                Для элемента <html> в атрибуте lang должен указываться соответствующий язык документа. Это помогает инструментам синтеза речи определить, какое использовать произношение или системам перевода, какие использовать языковые правила.
+              
    
+            
    
+            
    
+              
    
+                
    <!DOCTYPE html>
 <html lang="ru">
   <head>…</head>
   <body>…</body>
 </html>
    
-            
    
-          
    
-        
    
-      
    
-
-      
    
-        
    CSS
    
-
-        
    
-          
    
-            
    Синтаксис
    
-            
      
-              
    • После значения свойства обязательно ставится точка с запятой.
      • 
-              
    • Для отступов внутри правил используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
      • 
-              
    • Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов. Для записи используются строчные буквы. Например, #f5f5f5.
      • 
-              
    • Названия тегов и свойств в правилах пишутся строчными буквами.
      • 
-              
    • Начальный ноль для значений не сокращается (например, .5 вместо 0.5).
      • 
-              
    • Во всех случаях в стилях используются двойные кавычки. В необязательных случаях кавычки не опускаются.
      • 
-              
    • После двоеточия в правилах ставится один пробел (top: 10px;). А перед двоеточием пробел не нужен.
      • 
-              
    • После запятых внутри значений rgb(), rgba(), hsl(), hsla() или rect() пробелы ставятся. Это повышает удобочитаемость.
      • 
-              
    • До и после комбинатора между селекторами (например, p > a) ставится один пробел.
      • 
-              
    • Каждое объявление в правиле пишется на новой строке.
      • 
-              
    • Перед открывающейся фигурной скобкой ставится один пробел. После скобки запись идёт с новой строки:
-            
      .selector {
+
    +
    +
    +
    + +
    +

    CSS

    + +
    +
    +

    Синтаксис

    +
      +
    • После значения свойства обязательно ставится точка с запятой.
      • +
    • Для отступов внутри правил используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
      • +
    • Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов. Для записи используются строчные буквы. Например, #f5f5f5.
      • +
    • Названия тегов и свойств в правилах пишутся строчными буквами.
      • +
    • Начальный ноль для значений не сокращается (например, .5 вместо 0.5).
      • +
    • Во всех случаях в стилях используются двойные кавычки. В необязательных случаях кавычки не опускаются.
      • +
    • После двоеточия в правилах ставится один пробел (top: 10px;). А перед двоеточием пробел не нужен.
      • +
    • После запятых внутри значений rgb(), rgba(), hsl(), hsla() или rect() пробелы ставятся. Это повышает удобочитаемость.
      • +
    • До и после комбинатора между селекторами (например, p > a) ставится один пробел.
      • +
    • Каждое объявление в правиле пишется на новой строке.
      • +
    • Перед открывающейся фигурной скобкой ставится один пробел. После скобки запись идёт с новой строки: + 
      .selector {
   color: #f5f5f5;
-}
-
      • -
    • Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило отделяется пустой строкой.
      • -
    • Единицы измерения не пишутся, там где в них нет необходимости. Например, border: 0.
      • -
    • Для проверки CSS-кода используйте конфигурацию для настройки валидатора stylelint.
      • -
    • Для автоматического применения этих правил используйте файл конфигурации csscomb.json для настройки CSSComb.
      • -
    -
    -
    -
    - 
    /* Хорошо */
+}
    + +
  • Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило отделяется пустой строкой.
    • +
  • Единицы измерения не пишутся, там где в них нет необходимости. Например, border: 0.
    • +
  • Для проверки CSS-кода используйте конфигурацию для настройки валидатора stylelint.
    • +
  • Для автоматического применения этих правил используйте файл конфигурации csscomb.json для настройки CSSComb.
    • + +
    +
    +
    + 
    /* Хорошо */
 .selector,
 .selector-secondary,
 .selector[type="text"] {
@@ -366,45 +367,45 @@ 
    Синтаксис
    
 }
 
 /* Плохо */
-.selector, .selector-secondary, .selector[type=text]{
+.selector, .selector-secondary, .selector[type=text] {
   padding:15px;
   margin:0px 0px 15px;
   background-color:rgba(0,0,0,.5);
   box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF}
    -
    -
    -
    - -
    -
    -

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

    -

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

    -
      -
    1. Позиционирование
      2. -
    2. Блочная модель
      3. -
    3. Типографика
      4. -
    4. Оформление
      5. -
    5. Анимация
      6. -
    6. Разное
      7. -
    -

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

    -

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

    -

    - Сгруппированные объявления в правиле отделяются друг от друга пустой строкой. -

    -

    - Порядок объявления подробных правил, таких как font-size, font-family, line-height, должен соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой должна идти сокращённая версия. -

    -
    -
    -
    - 
    .declaration-order {
+
    +
    +
    + +
    +
    +

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

    +

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

    +
      +
    1. Позиционирование
      2. +
    2. Блочная модель
      3. +
    3. Типографика
      4. +
    4. Оформление
      5. +
    5. Анимация
      6. +
    6. Разное
      7. +
    +

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

    +

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

    +

    + Сгруппированные объявления в правиле отделяются друг от друга пустой строкой. +

    +

    + Порядок объявления подробных правил, таких как font-size, font-family, line-height, должен соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой должна идти сокращённая версия. +

    +
    +
    +
    + 
    .declaration-order {
   /* Позиционирование */
   position: absolute;
   top: 0;
@@ -442,22 +443,22 @@ 
    Порядок свойств
    
   /* Разное */
   will-change: auto;
 }
    -
    -
    -
    - -
    -
    -

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

    -
      -
    • Имена классов пишутся строчными буквами, используется дефис (но не знаки нижнего подчёркивания или camelCase). Дефисы служат разделителями во взаимосвязанных классах (например, .button и .button-danger).
      • -
    • Имена классов должны быть такими, чтобы по ним можно было быстро понять какому элементу страницы задан класс: избегайте сокращений (единственное исключение — .btn для кнопок), но не делайте их слишком длинными (более трёх слов).
      • -
    • Для написания классов используются английские слова и термины. Транслитом названия классов и атрибутов не пишутся.
      • -
    -
    -
    -
    - 
    /* Хорошо */
+
    +
    +
    + +
    +
    +

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

    +
      +
    • Имена классов пишутся строчными буквами, используется дефис (но не знаки нижнего подчёркивания или camelCase). Дефисы служат разделителями во взаимосвязанных классах (например, .button и .button-danger).
      • +
    • Имена классов должны быть такими, чтобы по ним можно было быстро понять какому элементу страницы задан класс: избегайте сокращений (единственное исключение — .btn для кнопок), но не делайте их слишком длинными (более трёх слов).
      • +
    • Для написания классов используются английские слова и термины. Транслитом названия классов и атрибутов не пишутся.
      • +
    +
    +
    +
    + 
    /* Хорошо */
 .alert-danger { … }
 .tweet .user-picture { … }
 .button { … }
@@ -468,54 +469,54 @@ 
    Имена классов
    
 .t { … }
 .big_red_button { … }
 .knopka { … }
    -
    -
    -
    - -
    -
    -

    Правило @import

    -

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

    -
    -
    -
    - 
    <!-- Хорошо: подключение тегом link -->
+
    +
    +
    + +
    +
    +

    Правило @import

    +

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

    +
    +
    +
    + 
    <!-- Хорошо: подключение тегом link -->
 <link rel="stylesheet" href="http://github.com/module.css">
 
 <!-- Плохо -->
 <style>
   @import url("http://github.com/module.css");
 </style>
    -
    -
    -
    - -
    -
    -

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

    -

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

    -

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

    -

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

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

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

    -
    -
    -
    - 
    /* Хорошо: указан альтернативный веб-безопасный шрифт и его тип семейства */
+
    +
    +
    + +
    +
    +

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

    +

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

    +

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

    +

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

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

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

    +
    +
    +
    + 
    /* Хорошо: указан альтернативный веб-безопасный шрифт и его тип семейства */
 body {
   font-family: "Helvetica", "Arial", sans-serif;
 }
@@ -539,20 +540,20 @@ 
    Варианты шрифта
    
 body {
   font-family: "Helvetica", "Georgia", sans-serif;
 }
    -
    -
    -
    - -
    -
    -

    Доступное скрытие

    -

    - Для того, чтобы контент был скрыт от глаз, но доступен для скринридеров и поисковиков его нужно скрывать используя утилитарный класс visually-hidden. -

    -
    -
    -
    - 
    /* Плохо: скрывать элемент с помощью font-size, display:none */
+
    +
    +
    + +
    +
    +

    Доступное скрытие

    +

    + Для того, чтобы контент был скрыт от глаз, но доступен для скринридеров и поисковиков его нужно скрывать используя утилитарный класс visually-hidden. +

    +
    +
    +
    + 
    /* Плохо: скрывать элемент с помощью font-size, display:none */
 h1 {
   font-size: 0;
 }
@@ -560,10 +561,10 @@ 
    Доступное скрытие
    
 .title {
   display: none;
 }
    -
    -
    - 
    
-/* Хорошо: использован класс visually-hidden */
+
    +
    +
    + 
    /* Хорошо: использован класс visually-hidden */
 .visually-hidden {
   position: absolute;
   width: 1px;
@@ -576,14 +577,14 @@ 
    Доступное скрытие
    
   clip: rect(0 0 0 0);
   overflow: hidden;
 }
    -
    -
    - 
    
-<h2 class="visually-hidden">Заголовок</h2>
    -
    -
    -
    -
    + +
    + 
    <h2 class="visually-hidden">Заголовок</h2>
    +
    +
    +
    + +
    diff --git a/index.html b/index.html index 1de67ff..3bdabfb 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,7 @@
    - +

    Стиль кода Академии HTML

    diff --git a/javascript.html b/javascript.html index 49792b1..f0a5de4 100644 --- a/javascript.html +++ b/javascript.html @@ -33,511 +33,523 @@
    - + -

    Стиль кода Академии HTML

    +

    Стиль кода Академии HTML

    github.com/htmlacademy/codeguide

    -
    -
    -

    Синтаксис

    +
    + + +
    +
    +

    Синтаксис

    -
    -
    -

    Отступы, пробелы и переносы

    +
    +
    +

    Отступы, пробелы и переносы

    -
    Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
    +
    Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
    -

    Для отступов используются два пробела. Знак табуляции не используется.

    +

    Для отступов используются два пробела. Знак табуляции не используется.

    -

    При переносах в продолжении строки используется четыре пробела

    +

    При переносах в продолжении строки используется четыре пробела

    -

    Запрещено одновременное использование табов и пробелов для отступов

    +

    Запрещено одновременное использование табов и пробелов для отступов

    -

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

    -
    const name       = 1;
-const longerName = 2;
-
    +

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

    + 
    const name       = 1;
+const longerName = 2;
    -
    const name = 1;
-const longerName = 2;
-
    + 
    const name = 1;
+const longerName = 2;
    -

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

    -
    if (condition)
+              
    Открывающие скобки блоков кода находятся на одной строке с оператором, который их использует:
    
+              
    if (condition)
 {
   // code
-}
-
    
+}
    -
    if (condition) {
+              
    if (condition) {
   // code
-}
-
    
-            
    В однострочных блоках кода, код отделен от открывающей и закрывающей скобки пробелом
    
+}
    +

    В однострочных блоках кода, код отделен от открывающей и закрывающей скобки пробелом

    -

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

    +

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

    -

    После запятой всегда должен ставиться пробел, если запятая не в конце строки

    +

    После запятой всегда должен ставиться пробел, если запятая не в конце строки

    -

    Обязательно переносить запятую на новую строку при объявлении массивов и объектов. Обязательно использовать запятую в конце списков, объектов или перечислений параметров функции

    - 
    const foo = {
-    a: 1,
-    b: 2
+              
    Обязательно переносить запятую на новую строку при объявлении массивов и объектов. Обязательно использовать запятую в конце списков, объектов или перечислений параметров функции
    
+              
    const foo = {
+  a: 1,
+  b: 2
 };
 
 const bar = [
-    1,
-    2
+  1,
+  2
 ];
    
-
    const foo = {
-    a: 1,
-    b: 2,
+              
    const foo = {
+  a: 1,
+  b: 2,
 };
 
 const bar = [
-    1,
-    2,
+  1,
+  2,
 ];
    
 
-            
    Файл должен заканчиваться пустой строкой
    
+              
    Файл должен заканчиваться пустой строкой
    
 
-            
    Строка не должна заканчиваться пробелами
    
+              
    Строка не должна заканчиваться пробелами
    
 
-            
    В однострочных объектах и при деструктуризации фигурные скобки не отделяются пробелами от содержимого
    
-
    const foo = { a: 1 };
-
    
+              
    В однострочных объектах и при деструктуризации фигурные скобки не отделяются пробелами от содержимого
    
+              
    const foo = { a: 1 };
    
 
-
    const foo = {a: 1};
-
    
+              
    const foo = {a: 1};
    
 
-
    const { a, b } = someObject;
-
    
+              
    const { a, b } = someObject;
    
 
-
    const {a, b} = someObject;
-
    
+              
    const {a, b} = someObject;
    
 
-            
    Смысловые блоки кода отделяются друг от друга не более чем двумя пустыми строками
    
+              
    Смысловые блоки кода отделяются друг от друга не более чем двумя пустыми строками
    
 
-            
    В качестве символа переноса строки используется стандартный символ, который используется в системе
    
+              
    В качестве символа переноса строки используется стандартный символ, который используется в системе
    
 
-            
    При объявлении вычисляемых ключей в объектах с помощью синтаксиса ES2016 в квадратных скобках не используются пробелы
    
+              
    При объявлении вычисляемых ключей в объектах с помощью синтаксиса ES2016 в квадратных скобках не используются пробелы
    
 
-            
    Оператор вызова функции () отделяется пробелом от названия функции
    
+              
    Оператор вызова функции () отделяется пробелом от названия функции
    
 
-            
    В объектах после объявления ключа не ставится пробел. После двоеточия, которое отделяет в объектах ключ от значения может стоять только один пробел, выравнивать несколько значений при объявлении многострочного объекта запрещено
    
+              
    В объектах после объявления ключа не ставится пробел. После двоеточия, которое отделяет в объектах ключ от значения может стоять только один пробел, выравнивать несколько значений при объявлении многострочного объекта запрещено
    
 
-            
    Ключевые слова отделяются пробелами. Правило касается всех блоков, которые не оговорены отдельно в других правилах. В частности ключевые слова должны отделяться пробелами для условных операторов, циклов, операторов множественного выбора, блоков try..catch, объявлений классов и т. д.
    
+              
    Ключевые слова отделяются пробелами. Правило касается всех блоков, которые не оговорены отдельно в других правилах. В частности ключевые слова должны отделяться пробелами для условных операторов, циклов, операторов множественного выбора, блоков try..catch, объявлений классов и т. д.
    
 
-            
    В блоках кода первая и последняя строка не должны быть пустыми (код не отбивается от начала блока кода)
    
+              
    В блоках кода первая и последняя строка не должны быть пустыми (код не отбивается от начала блока кода)
    
 
-            
    После двоеточий и точек с запятыми ставятся пробелы. Перед ними — не ставятся
    
+              
    После двоеточий и точек с запятыми ставятся пробелы. Перед ними — не ставятся
    
 
-            
    Перед скобками начинающими новый блок кода должен ставиться пробел
    
+              
    Перед скобками начинающими новый блок кода должен ставиться пробел
    
 
-            
    В комментариях текст отбивается пробелом от начала комментария
    
+              
    В комментариях текст отбивается пробелом от начала комментария
    
 
-            
    При создании генераторов, звездочка идёт сразу после ключевого слова function без пробелов
    
+              
    При создании генераторов, звездочка идёт сразу после ключевого слова function без пробелов
    
 
-            
    Звездочка после ключевого слова yield не отбивается пробелом. После звездочки пробел ставится всегда
    
+              
    Звездочка после ключевого слова yield не отбивается пробелом. После звездочки пробел ставится всегда
    
 
-            
    В spread-операторе точки не отделяются от названия коллекции
    
-
    -
    +

    В spread-операторе точки не отделяются от названия коллекции

    +
    +
    -
    -
    -

    Строки

    -

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

    +
    +
    +

    Строки

    +

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

    -

    В строках запрещено указывать код спецсимволов в восьмеричной системе счисления

    -
    const foo = "Copyright \251";
-
    +

    В строках запрещено указывать код спецсимволов в восьмеричной системе счисления

    + 
    const foo = "Copyright \251";
    -
    const foo = "Copyright \u00A9";
-
    + 
    const foo = "Copyright \u00A9";
    -

    При создании объектов через литералы свойства должны объявляться в едином стиле: или без кавычек или с ними

    +

    При создании объектов через литералы свойства должны объявляться в едином стиле: или без кавычек или с ними

    -

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

    -
    -
    +

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

    +
    +
    -
    -
    -

    Числа

    -

    В числах запрещено опускать ноль в дробной и целой части

    +
    +
    +

    Числа

    +

    В числах запрещено опускать ноль в дробной и целой части

    -

    Запрещено использовать ведущий ноль при создании чисел, поскольку это приводит к созданию числа в восьмеричной системе счисления

    -
    -
    +

    Запрещено использовать ведущий ноль при создании чисел, поскольку это приводит к созданию числа в восьмеричной системе счисления

    +
    +
    -
    -
    -

    Литералы

    -

    Массивы должны создаваться через литерал массива, а не через конструктор. Допустимое исключение — создание массива определенной длины

    +
    +
    +

    Литералы

    +

    Массивы должны создаваться через литерал массива, а не через конструктор. Допустимое исключение — создание массива определенной длины

    -

    Объекты должны создаваться через литерал объекта, а не через конструктор

    +

    Объекты должны создаваться через литерал объекта, а не через конструктор

    -

    При создании объектов запрещено дублирование ключей

    +

    При создании объектов запрещено дублирование ключей

    -

    При описании функций запрещено дублировать названия параметров

    +

    При описании функций запрещено дублировать названия параметров

    -

    В операторе switch запрещено дублировать условия (case)

    -
    -
    +

    В операторе switch запрещено дублировать условия (case)

    +
    +
    -
    -
    -

    Операторы

    -

    В бинарных и тернарных операторах операнды и символы оператора отделяются пробелами

    +
    +
    +

    Операторы

    +

    В бинарных и тернарных операторах операнды и символы оператора отделяются пробелами

    -

    Унарные операторы не отделяются от операнда пробелом. Исключения составляют операторы, состоящие из слов, а не символов, например оператор typeof

    -
    -
    +

    Унарные операторы не отделяются от операнда пробелом. Исключения составляют операторы, состоящие из слов, а не символов, например оператор typeof

    +
    +
    -
    +
    -
    -

    Именование

    +
    +

    Именование

    -
    -
    -

    Все переменные должны быть названы в верблюжьем регистре (camelCase). Исключения составляют константы которые должны именоваться прописными буквами в константном регистре (CONSTANT_CASE) и названия классов, функций-конструкторов и перечислений, которые именуются с заглавной буквы (PascalCase)

    +
    +
    +

    Все переменные должны быть названы в верблюжьем регистре (camelCase). Исключения составляют константы которые должны именоваться прописными буквами в константном регистре (CONSTANT_CASE) и названия классов, функций-конструкторов и перечислений, которые именуются с заглавной буквы (PascalCase)

    -

    Запрещено использовать имена переменных, которые используются во внешних областях видимости

    +

    Запрещено использовать имена переменных, которые используются во внешних областях видимости

    -

    Запрещено называть переменные и свойства ключевыми словами JS

    +

    Запрещено называть переменные и свойства ключевыми словами JS

    -

    Запрещено использовать переменные, не объявленные ранее. При использовании переменной, объявленной в другом модуле в глобальной области видимости нужно обращаться к ней как к свойству объекта window

    +

    Запрещено использовать переменные, не объявленные ранее. При использовании переменной, объявленной в другом модуле в глобальной области видимости нужно обращаться к ней как к свойству объекта window

    -

    Запрещено напрямую обращаться к значению undefined. Для проверки типа рекомендуется использовать typeof. Исключение составляет явная передача undefined при вызове функции вместо аргумента, чтобы использовать значение параметра по умолчанию

    -
    -
    +

    Запрещено напрямую обращаться к значению undefined. Для проверки типа рекомендуется использовать typeof. Исключение составляет явная передача undefined при вызове функции вместо аргумента, чтобы использовать значение параметра по умолчанию

    +
    +
    -
    +
    -
    -

    Предотвращение ошибок

    +
    +

    Предотвращение ошибок

    -
    -
    -

    Все точки с запятой должны быть проставлены явно, не стоит рассчитывать на автоматическую расстановку точек с запятой ASI (Automatic Semicolon Insertion)

    +
    +
    +

    Все точки с запятой должны быть проставлены явно, не стоит рассчитывать на автоматическую расстановку точек с запятой ASI (Automatic Semicolon Insertion)

    -

    Не рекомендуется использовать указатель Unicode BOM в коде, потому что код должен быть сохранен не в кодировке UTF-16, а в кодировке UTF-8, в которой нет указателя порядка бит

    +

    Не рекомендуется использовать указатель Unicode BOM в коде, потому что код должен быть сохранен не в кодировке UTF-16, а в кодировке UTF-8, в которой нет указателя порядка бит

    -

    Обязательно используются блоки кода даже если в выражении содержится одна строчка

    +

    Обязательно используются блоки кода даже если в выражении содержится одна строчка

    -

    В коде нет пустых блоков кода

    +

    В коде нет пустых блоков кода

    -

    Код работает в строгом режиме: в начале всех файлов явно прописана директива "use strict" или используются модули ECMAScript, которые по умолчанию работают в строгом режиме

    -
    -
    +

    Код работает в строгом режиме: в начале всех файлов явно прописана директива "use strict" или используются модули ECMAScript, которые по умолчанию работают в строгом режиме

    +
    +
    -
    -
    -

    Условные операторы

    -

    Запрещена «проверка Йоды» — в условных операторах в блоке условия при сравнении переменной или свойства со значением сначала идет переменная или свойство объекта и только потом значения, а не наоборот.

    -
    if (1 === myValue) { /*...*/ }
-
    +
    +
    +

    Условные операторы

    +

    Запрещена «проверка Йоды» — в условных операторах в блоке условия при сравнении переменной или свойства со значением сначала идет переменная или свойство объекта и только потом значения, а не наоборот.

    + 
    if (1 === myValue) { /*...*/ }
    -
    if (myValue === 1) { /*...*/ }
-
    -

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

    + 
    if (myValue === 1) { /*...*/ }
    +

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

    -

    В условных операторах не используется оператор присвоения

    +

    В условных операторах не используется оператор присвоения

    -

    В условиях не используется небезопасное отрицание, например использование ! в in или instanceof без скобок

    +

    В условиях не используется небезопасное отрицание, например использование ! в in или instanceof без скобок

    -

    Запрещено сравнение с NaN. Для проверки, является ли результат операции числовым, нужно использовать Number.isNaN

    +

    Запрещено сравнение с NaN. Для проверки, является ли результат операции числовым, нужно использовать Number.isNaN

    -

    Запрещено использовать case без break или return в блоках switch

    +

    Запрещено использовать case без break или return в блоках switch

    -

    Не используются вложенные тернарные операторы

    -
    -
    +

    Не используются вложенные тернарные операторы

    +
    +
    -
    -
    -

    Функции

    -

    Если в функции используется ветвление, в котором есть возврат значения, то return должен быть добавлен и в остальных ветках.

    +
    +
    +

    Функции

    +

    Если в функции используется ветвление, в котором есть возврат значения, то return должен быть добавлен и в остальных ветках.

    -
    const doThings = function() {
+              
    const doThings = function() {
   if (cond) {
     return 1;
   } else {
     doSomethingElse();
   }
-};
-
    
+};
    -
    const doThings = function() {
+              
    const doThings = function() {
   if (cond) {
     return 1;
   } else {
     return doSomethingElse();
   }
-};
-
    
+};
    -

    Это правило предотвращает создание функций, при использовании которых непонятно, вернут ли они какое-то значение. В первом примере, функция do может вернуть значение 1, а может undefined

    +

    Это правило предотвращает создание функций, при использовании которых непонятно, вернут ли они какое-то значение. В первом примере, функция do может вернуть значение 1, а может undefined

    -

    Единственное исключение — использование return без значения для прекращения работы функции:

    +

    Единственное исключение — использование return без значения для прекращения работы функции:

    -
    const doThings = function() {
+              
    const doThings = function() {
   if (cond) {
     doSomething()
     return;
   }
 
   doSomethingElse();
-};
-
    
+};
    -

    В return не используется оператор присваивания

    +

    В return не используется оператор присваивания

    -

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

    -
    -
    +

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

    +
    +
    -
    -
    -

    Операторы

    -

    В конструкторе классов-наследников обязательно вызывается super()

    +
    +
    +

    Операторы

    +

    В конструкторе классов-наследников обязательно вызывается super()

    -

    В конструкторе нет обращения к this до того, как будет вызван super()

    -
    -
    +

    В конструкторе нет обращения к this до того, как будет вызван super()

    +
    +
    -
    -
    -

    Объявление переменных и функций

    -

    При объявлении переменных предпочтение отдается ключевым словам let и const. Переменные объявляются через var только при наличии проблем с поддержкой ECMAScript 2015

    +
    +
    +

    Объявление переменных и функций

    +

    При объявлении переменных предпочтение отдается ключевым словам let и const. Переменные объявляются через var только при наличии проблем с поддержкой ECMAScript 2015

    -

    Запрещено переопределять с помощью ключевого слова ранее созданные переменные

    +

    Запрещено переопределять с помощью ключевого слова ранее созданные переменные

    -

    Запрещено использовать множественное объявление через одно ключевое слово. Для каждой переменной используется отдельный var, let или const.

    -
    const a = 1, b = 2;
-
    +

    Запрещено использовать множественное объявление через одно ключевое слово. Для каждой переменной используется отдельный var, let или const.

    + 
    const a = 1, b = 2;
    -
    const a = 1;
-const b = 2;
-
    -

    Объявление функций

    -

    Запрещено переопределение функций, созданных с помощью функционального объявления (function declaration)

    -
    function myFunc() {};
-myFunc = 2;
-
    + 
    const a = 1;
+const b = 2;
    +

    Объявление функций

    +

    Запрещено переопределение функций, созданных с помощью функционального объявления (function declaration)

    + 
    function myFunc() {};
+myFunc = 2;
    -

    Новые функции не создаются с помощью конструктора Function

    +

    Новые функции не создаются с помощью конструктора Function

    -

    Вместо коллекции arguments, используется rest-оператор, если это позволяет версия языка

    +

    Вместо коллекции arguments, используется rest-оператор, если это позволяет версия языка

    -

    Для превращения массива с данными в аргументы вместо вызова функции через apply используется spread-оператор, если это позволяет версия языка

    -
    Math.max.apply(null, [1, 100, 15, 1000]);
-
    +

    Для превращения массива с данными в аргументы вместо вызова функции через apply используется spread-оператор, если это позволяет версия языка

    + 
    Math.max.apply(null, [1, 100, 15, 1000]);
    -
    Math.max(...[1, 100, 15, 1000]);
-
    + 
    Math.max(...[1, 100, 15, 1000]);
    -

    Создание значений

    -

    Не вызываются служебные конструкторы, создающие объекты из глобальной области видимости Math(), JSON(), Reflect()

    +

    Создание значений

    +

    Не вызываются служебные конструкторы, создающие объекты из глобальной области видимости Math(), JSON(), Reflect()

    -

    При создании непустых массивов запрещено опускать пустые значения (ставить подряд несколько запятых)

    +

    При создании непустых массивов запрещено опускать пустые значения (ставить подряд несколько запятых)

    -

    При создании непустых объектов и массивов не используются «висячие» запятые

    +

    При создании непустых объектов и массивов не используются «висячие» запятые

    -

    Для создания новых значений не используются конструкторы примитивов String, Number, Boolean

    +

    Для создания новых значений не используются конструкторы примитивов String, Number, Boolean

    -

    Конструкторы вызываются со скобками, даже если у них нет параметров

    +

    Конструкторы вызываются со скобками, даже если у них нет параметров

    -

    Символы (Symbol) создаются вызовом функции Symbol без ключевого слова new

    -
    -
    +

    Символы (Symbol) создаются вызовом функции Symbol без ключевого слова new

    +
    +
    -
    -
    -

    Хорошие практики

    -

    Не используется конструкция with

    +
    +
    +

    Хорошие практики

    +

    Не используется конструкция with

    -

    Не используются alert

    +

    Не используются alert

    -

    Не используется выполнение кода через eval

    +

    Не используется выполнение кода через eval

    -

    Не используется неявный eval — в функциях, которые поддерживают передачу исполняемого кода как строку, например setTimeout

    +

    Не используется неявный eval — в функциях, которые поддерживают передачу исполняемого кода как строку, например setTimeout

    -

    В ссылках используется протокол javascript:

    +

    В ссылках используется протокол javascript:

    -

    Конструкторы не используются без ключевого слова new

    +

    Конструкторы не используются без ключевого слова new

    -

    В функциях не используются обращения к caller и callee

    +

    В функциях не используются обращения к caller и callee

    -

    Манкипатчинг

    +

    Манкипатчинг

    -

    Встроенные в язык объекты и прототипы не расширяются в рантайме

    +

    Встроенные в язык объекты и прототипы не расширяются в рантайме

    -

    Не переопределяются глобальные значения (undefined, null, Object, window и прочие)

    +

    Не переопределяются глобальные значения (undefined, null, Object, window и прочие)

    -

    Контекст

    -

    bind не используется вне методов классов

    +

    Контекст

    +

    bind не используется вне методов классов

    -

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

    +

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

    -

    Переменные

    -

    Переменные, объявленные через var не удаляются оператором delete

    -
    -
    +

    Переменные

    +

    Переменные, объявленные через var не удаляются оператором delete

    +
    +
    -
    -
    -

    Приведение типов

    -

    Не используется лишнее приведение к Boolean. Например, нет большого смысла переводить в boolean условия в конструкциях if, while, for, в первом операнде тернарного оператора

    +
    +
    +

    Приведение типов

    +

    Не используется лишнее приведение к Boolean. Например, нет большого смысла переводить в boolean условия в конструкциях if, while, for, в первом операнде тернарного оператора

    -

    Оператор typeof используется корректно — используются только правильные значения, возвращаемые оператором, не производится сравнения со строковыми литералами, которые содержат некорректные значения typeof

    +

    Оператор typeof используется корректно — используются только правильные значения, возвращаемые оператором, не производится сравнения со строковыми литералами, которые содержат некорректные значения typeof

    -

    В parseInt обязательно передается второй параметр — основание системы счисления, даже в случае с десятичной системой счисления

    +

    В parseInt обязательно передается второй параметр — основание системы счисления, даже в случае с десятичной системой счисления

    -

    Константы в условиях

    +

    Константы в условиях

    -

    В блоки условия операторов if, while, for и тернарного оператора не передается константное значение, которое подразумевает, что условие выполняется (или не выполняется) всегда

    -
    if (true) {}
-
    +

    В блоки условия операторов if, while, for и тернарного оператора не передается константное значение, которое подразумевает, что условие выполняется (или не выполняется) всегда

    + 
    if (true) {}
    -
    if (a > 1) {}
-
    + 
    if (a > 1) {}
    -
    const ternaryValue = true ? 'a' : 'b';
-
    + 
    const ternaryValue = true ? 'a' : 'b';
    -
    const ternaryValue = isA() ? 'a' : 'b';
-
    -
    -
    + 
    const ternaryValue = isA() ? 'a' : 'b';
    +
    +
    -
    +
    -
    -

    Чистый код

    +
    +

    Чистый код

    -
    -
    -

    Лишние символы

    -

    Не используются лишние (множественные) точки с запятой

    -
    -
    +
    +
    +

    Лишние символы

    +

    Не используются лишние (множественные) точки с запятой

    +
    +
    -
    -
    -

    Отладчик и консоль

    -

    В коде не используется оставленных выводов в консоль

    +
    +
    +

    Отладчик и консоль

    +

    В коде не используется оставленных выводов в консоль

    -

    В коде нет забытых инструкций debugger

    -
    -
    +

    В коде нет забытых инструкций debugger

    +
    +
    -
    -
    -

    Неиспользуемый код

    -

    В проекте нет недоступного кода, который никогда не выполнится

    -
    if (false) {
+          
    
+            
    
+              
    Неиспользуемый код
    
+              
    В проекте нет недоступного кода, который никогда не выполнится
    
+              
    if (false) {
   doSomething();
-}
-
    
+}
    -
    if (needToDoSomething()) {
+              
    if (needToDoSomething()) {
   doSomething();
-}
-
    
+}
    -

    В коде нет объявленных, но неиспользуемых переменных

    -
    -
    +

    В коде нет объявленных, но неиспользуемых переменных

    + + -
    -
    -

    Обработка ошибок и исключения

    -

    Для выбрасывания исключения в оператор throw передаются только объекты Error. Передавать литералы запрещено.

    -
    throw 'Passed value is out of range';
-
    +
    +
    +

    Обработка ошибок и исключения

    +

    Для выбрасывания исключения в оператор throw передаются только объекты Error. Передавать литералы запрещено.

    + 
    throw 'Passed value is out of range';
    -
    throw new RangeError('Passed value is out of range');
-
    + 
    throw new RangeError('Passed value is out of range');
    -

    В конструкции try..catch запрещен пустой блок catch

    -
    -
    +

    В конструкции try..catch запрещен пустой блок catch

    +
    +
    -
    +
    -
    -

    Прочее

    +
    +

    Прочее

    -
    -
    -

    При итерировании по объектам через for..in при работе со свойствами используется конструкция hasOwnProperty

    +
    +
    +

    При итерировании по объектам через for..in при работе со свойствами используется конструкция hasOwnProperty

    -

    В объектах напрямую не переопределяется свойство __iterator__

    +

    В объектах напрямую не переопределяется свойство __iterator__

    -

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

    -
    const obj = {
+              
    В объектах напрямую не переопределяется свойство __proto__. Разрешено переопределять __proto__ через Object.create или запись в прототип, объектов, созданных другими конструкторами, но напрямую редактировать __proto__ нельзя
    
+              
    const obj = {
   __proto__: Parent
-};
-
    
+};
    -
    const Obj = function() {};
+              
    const Obj = function() {};
 Obj.prototype = new Parent();
 const obj = new obj;
 
-const obj = Object.create(Parent.prototype);
-
    
+const obj = Object.create(Parent.prototype);
    -

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

    +

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

    -

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

    +

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

    -

    В коде не используется оператор «запятая» для описания последовательностей действий. Для создания переменных используются отдельные ключевые слова let, const, var, операторы группировки, условные операторы и прочие конструкции. Исключение составляет начальное условие оператора for

    -
    const result = (1, 2); // 2
-
    +

    В коде не используется оператор «запятая» для описания последовательностей действий. Для создания переменных используются отдельные ключевые слова let, const, var, операторы группировки, условные операторы и прочие конструкции. Исключение составляет начальное условие оператора for

    + 
    const result = (1, 2); // 2
    -
    const result = 2;
-
    -
    -
    switch (val = getVal(), val) {}
-
    + 
    const result = 2;
    +
    + 
    switch (val = getVal(), val) {}
    -
    val = getVal();
+              
    val = getVal();
 switch(val) {}
 
-for (let i = 0, l = 100; i < l; i++);
-
    
-
    -
    +for (let i = 0, l = 100; i < l; i++); +
    +
    -
    -
    -

    Регулярные выражения

    -

    В регулярных выражениях не используются «управляющие выражения»

    +
    +
    +

    Регулярные выражения

    +

    В регулярных выражениях не используются «управляющие выражения»

    -

    В регулярных выражениях не используются пустые классы символов [] (блоки, ограниченные квадратными скобками)

    +

    В регулярных выражениях не используются пустые классы символов [] (блоки, ограниченные квадратными скобками)

    -

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

    +

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

    -

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

    -
    /   /.exec(myString);
-
    +

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

    + 
    /   /.exec(myString);
    -
    /\s\s\s/.exec(myString);
-
    + 
    /\s\s\s/.exec(myString);
    -
    /\s{3}/.exec(myString);
-
    -
    -
    - -
    + 
    /\s{3}/.exec(myString);
    + + +
    +
    From ce57950bacd45cff64e3840c918a0865a5030971 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Thu, 11 Feb 2021 11:13:28 +0300 Subject: [PATCH 17/55] =?UTF-8?q?=D0=A7=D0=B8=D0=BD=D0=B8=D1=82=20=D0=BD?= =?UTF-8?q?=D0=B5=D1=80=D0=B0=D0=B1=D0=BE=D1=87=D1=83=D1=8E=20=D1=81=D1=81?= =?UTF-8?q?=D1=8B=D0=BB=D0=BA=D1=83=20(#51)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html-css.html b/html-css.html index 0864422..b19d829 100644 --- a/html-css.html +++ b/html-css.html @@ -78,7 +78,7 @@

    Синтаксис

  • Теги и их атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки.
  • Необязательный закрывающий слеш у одиночных тегов (<img>, <br> и другие) не ставится.
  • Необязательные закрывающие теги (например, </li> или </body>) не пропускаются.
    • -
  • Для проверки HTML-кода используйте файл конфигурации .htmlhintrc для настройки валидатора HTMLHint.
    • +
  • Для проверки HTML-кода используйте файл конфигурации .htmlhintrc для настройки валидатора HTMLHint.
    • From 3297d66fb351136dad3f2cdbf87067e9d14039ef Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 16 Feb 2021 13:19:42 +0300 Subject: [PATCH 18/55] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D0=BF=D1=80=D0=BE=20=D0=BA=D0=BE=D0=B4=20?= =?UTF-8?q?=D0=B8=20=D1=84=D0=BE=D1=80=D0=BC=D0=B0=D1=82=D0=B8=D1=80=D0=BE?= =?UTF-8?q?=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 90 +++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 88 insertions(+), 2 deletions(-) diff --git a/html-css.html b/html-css.html index b19d829..53a3d83 100644 --- a/html-css.html +++ b/html-css.html @@ -37,6 +37,14 @@

    Стиль кода Академии HTML

    + Код + +
    + +
    HTML
    • Синтаксис
      • @@ -67,6 +75,86 @@
      +
      +

      Код

      + +
      +
      +

      Группировка файлов

      +
        +
      • Файлы схожих типов должны быть сгруппированы в папки: картинки, стили, скрипты, шрифты.
        • +
      • Если внутри папок файлов становится много или выделяются подгруппы, можно добавить вложенные папки.
        • +
      +
      +
      +
      + 
      <!-- Правильно -->
+barbershop/
+  pictures/
+    catalog/
+      wine.jpg
+      cheese.png
+    product/
+      wine-big.jpg
+      cheese-big.png
+  images/
+    logo.svg
+    favicons/
+      32x32.png
+      16x16.png
+    content/
+      cat.jpg
+      map.png
+  scripts/
+    menu.js
+    map.js
+  styles/
+    styles.css
+  catalog.html
+  index.html
+
+<!-- Неправильно -->
+barbershop/
+  assets/
+    logo.svg
+    icon-32x32.png
+    icon-16x16.png
+    menu.js
+    map.js
+    header.css
+    footer.css
+    index.css
+    fonts.css
+  index.html
+
      +
      +
      +
      + +
      +
      +

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

      +

      Код проекта должен соответствовать параметрам EditorConfig, описанным в файле .editorconfig проекта.

      +
      +
      +
      + 
      <!-- Правильно-->
+<ul>
+∙∙<li>Пункт</li>
+∙∙<li>Пункт</li>
+</ul>
+
+<!-- Неправильно-->
+<ul>
+→ <li>Пункт</li>
+∙∙∙∙<li>Пункт</li>∙∙∙∙∙∙∙
+</ul>
      +
      +
      +
      + +
      +

      HTML

      @@ -74,7 +162,6 @@

      HTML

      Синтаксис

        -
      • Для отступов у вложенных элементов используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
      • Теги и их атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки.
      • Необязательный закрывающий слеш у одиночных тегов (<img>, <br> и другие) не ставится.
      • Необязательные закрывающие теги (например, </li> или </body>) не пропускаются.
        • @@ -334,7 +421,6 @@

        CSS

        Синтаксис

        • После значения свойства обязательно ставится точка с запятой.
          • -
        • Для отступов внутри правил используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
        • Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов. Для записи используются строчные буквы. Например, #f5f5f5.
        • Названия тегов и свойств в правилах пишутся строчными буквами.
        • Начальный ноль для значений не сокращается (например, .5 вместо 0.5).
          • From c23c4e1cc776d7bbb32d540f9e8527afe1b948bc Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 16 Feb 2021 13:29:50 +0300 Subject: [PATCH 19/55] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D0=BF=D1=80=D0=BE=20=D1=80=D0=B5=D0=B3?= =?UTF-8?q?=D0=B8=D1=81=D1=82=D1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/html-css.html b/html-css.html index 53a3d83..27a77df 100644 --- a/html-css.html +++ b/html-css.html @@ -47,6 +47,9 @@
          HTML
            +
          • Регистр тегов и атрибутов
            • + +
          • Синтаксис
          • Валидность
          • HTML-доктайп
            • @@ -158,6 +161,35 @@

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

            HTML

            +
            +
            +

            Регистр тегов и атрибутов

            +

            Имена тегов и атрибуты должны быть записаны строчными.

            +
            +
            +
            + 
            <!-- Правильно -->
+<ul>
+  <li>Первый</li>
+  <li>Второй</li>
+  <li>Третий</li>
+</ul>
+
+<img src="http://github.com/images/picture.png" width="400" height="400" alt="Кот смотрит на солнышко.">
+
+<!-- Неправильно -->
+<UL>
+  <LI>Первый
+  <LI>Второй
+  <LI>Третий
+</UL>
+
+<IMG src="http://github.com/images/picture.png" width="400" height="400" alt="Кот смотрит на солнышко.">
+
            +
            +
            +
            +

            Синтаксис

            From d22b90a5fdf6d1b6fd97e49e06dc409afe313a0d Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 16 Feb 2021 14:05:23 +0300 Subject: [PATCH 20/55] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D0=BD=D0=B5=D1=81=D0=BA=D0=BE=D0=BB=D1=8C?= =?UTF-8?q?=D0=BA=D0=BE=20=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=20=D0=B4?= =?UTF-8?q?=D0=BB=D1=8F=20HTML?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 175 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 174 insertions(+), 1 deletion(-) diff --git a/html-css.html b/html-css.html index 27a77df..d0a06fc 100644 --- a/html-css.html +++ b/html-css.html @@ -48,6 +48,14 @@ HTML
            +
            + +
            +
            +

            Двойные теги

            +

            Двойные теги должны иметь открывающий и закрывающий теги.

            +
            +
            +
            + 
            <!-- Правильно -->
+<ul>
+  <li>Первый</li>
+  <li>Второй</li>
+  <li>Третий</li>
+</ul>
+
+<!-- Неправильно -->
+<ul>
+  <li>Первый
+  <li>Второй
+  <li>Третий
+</ul>
+
            +
            +
            +
            + +
            +
            +

            Одиночные теги

            +

            Одиночные теги не должны иметь закрывающий тег или слэш.

            +
            +
            +
            + 
            <!-- Правильно -->
+<img src="http://github.com/images/picture.png" width="400" height="400" alt="Кот смотрит на солнышко.">
+
+<input type="text" name="name">
+
+<!-- Неправильно -->
+<img src="http://github.com/images/picture.png" width="400" height="400" alt="Кот смотрит на солнышко." />
+
+<input type="text"></input>
+
            +
            +
            +
            + +
            +
            +

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

            +
              +
            • Атрибуты должны идти в одном порядке, чтобы упростить их чтение.
              • +
            • Атрибут class должен идти сразу после имени тега.
              • +
            +
            +
            +
            + 
            <!-- Правильно -->
+<label class="field-group-label" for="appointment-phone">
+<input class="field-group-input field" type="text" id="appointment-phone" placeholder="+7 000-00-00">
+
+<label class="field-group-label" for="appointment-date">
+<input class="field-group-input field" type="text" id="appointment-date" placeholder="01.01.2020">
+
+<!-- Неправильно -->
+<label for="appointment-phone" class="field-group-label">
+<input class="field-group-input field" type="text" placeholder="+7 000-00-00" id="appointment-phone" >
+
+<label for="appointment-date" class="field-group-label">
+<input id="appointment-date" class="field-group-input field" type="text" placeholder="01.01.2020">
+
            +
            +
            +
            + +
            +
            +

            Одиночные атрибуты

            +

            Одиночные атрибуты должны быть записаны без значения.

            +
            +
            +
            + 
            <!-- Правильно -->
+<input type="text" disabled required>
+
+<!-- Неправильно -->
+<input type="text" disabled="disabled" required="required">
+
            +
            +
            +
            + +
            +
            +

            Форматирование атрибутов

            +

            В записи атрибутов не должно быть пробелов вокруг знака «равно» =

            +
            +
            +
            + 
            <!-- Правильно -->
+<input class="field-group-input field" type="text" id="appointment-date" placeholder="01.01.2020">
+
+<!-- Неправильно -->
+<input class = "field-group-input field" type = "text" id = "appointment-date" placeholder = "01.01.2020">
+
            +
            +
            +
            + +
            +
            +

            Кавычки в атрибутах

            +

            Значения атрибутов должны быть в двойных кавычках.

            +
            +
            +
            + 
            <!-- Правильно -->
+<input class="field-group-input field" type="text" id="appointment-date" placeholder="01.01.2020">
+
+<!-- Неправильно -->
+<input class='field-group-input field' type='text' id='appointment-date' placeholder='01.01.2020'>
+
+<input class=field-group-input type=text id=appointment-date placeholder=01.01.2020>
+
            +
            +
            +
            + +
            +
            +

            Кавычки в значениях атрибутов

            +

            Вложенные кавычки в значениях должны быть одиночными.

            +
            +
            +
            + 
            <!-- Правильно -->
+<button class="button" type="button" onclick="show('menu')">
+  Меню
+</button>
+
+<!-- Неправильно -->
+<button class="button" type="button" onclick="show("menu")">
+  Меню
+</button>
+
            +
            +
            +
            + +
            +
            +

            Единицы измерения в атрибутах

            +

            В атрибутах не должно быть единиц измерения.

            +
            +
            +
            + 
            <!-- Правильно -->
+<img src="http://github.com/images/picture.png" width="400" height="400" alt="Кот смотрит на солнышко.">
+
+<!-- Неправильно -->
+<img src="http://github.com/images/picture.png" width="400px" height="400px" alt="Кот смотрит на солнышко.">
            From 8a7e540d99b0c7bbbae98987befefcae43e6f86c Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 16 Feb 2021 14:27:28 +0300 Subject: [PATCH 21/55] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D0=BF=D1=80=D0=BE=20=D1=81=D0=B8=D0=BD?= =?UTF-8?q?=D1=82=D0=B0=D0=BA=D1=81=D0=B8=D1=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/html-css.html b/html-css.html index d0a06fc..ac09eb5 100644 --- a/html-css.html +++ b/html-css.html @@ -56,6 +56,7 @@
          • Кавычки в атрибутах
          • Кавычки в значениях атрибутов
          • Единицы измерения в атрибутах
            • +
          • Разделители в имени класса
          • Синтаксис
            • @@ -172,7 +173,8 @@

            HTML

            Регистр тегов и атрибутов

            -

            Имена тегов и атрибуты должны быть записаны строчными.

            +

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

            +

            Исключение: атрибуты, которые требуют другого написания, например viewBox

            @@ -183,7 +185,7 @@

            Регистр тегов и атрибутов

            <li>Третий</li> </ul> -<img src="http://github.com/images/picture.png" width="400" height="400" alt="Кот смотрит на солнышко."> +<img class="image" src="http://github.com/images/picture.png" width="400" height="400" alt="Кот смотрит на солнышко."> <!-- Неправильно --> <UL> @@ -192,7 +194,7 @@

            Регистр тегов и атрибутов

            <LI>Третий </UL> -<IMG SRC="images/picture.png" WIDTH="400" HEIGHT="400" ALT="Кот смотрит на солнышко."> +<IMG class="IMAGE" SRC="images/picture.png" WIDTH="400" HEIGHT="400" ALT="Кот смотрит на солнышко.">
            @@ -363,6 +365,27 @@

            Единицы измерения в атрибут

          +
          +
          +

          Разделители в имени класса

          +

          Разделителями в имени класса должны быть только дефисы - и подчёркивания _. В коде необходимо придерживаться одного стиля.

          +
          +
          +
          + 
          <!-- Правильно -->
+<input class="form-input form-input-field" type="text">
+<input class="form_input form_input_field" type="text">
+<input class="form__input form-input__field" type="text">
+<input class="form--input form-input--field" type="text">
+
+<!-- Неправильно -->
+<input class="formInput formInputField" type="text">
+<input class="form-input form_input_field" type="text">
+
          +
          +
          +
          +

          Синтаксис

          From ec517dce95d6cd3605ec64aad408100a2558e847 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 16 Feb 2021 14:31:50 +0300 Subject: [PATCH 22/55] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D1=84=D0=BE=D1=80=D0=BC=D0=B0=D1=82=D0=B8?= =?UTF-8?q?=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D1=82=D0=B5=D0=B3?= =?UTF-8?q?=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/html-css.html b/html-css.html index ac09eb5..5fa640c 100644 --- a/html-css.html +++ b/html-css.html @@ -57,6 +57,7 @@
        • Кавычки в значениях атрибутов
        • Единицы измерения в атрибутах
        • Разделители в имени класса
          • +
        • Форматирование тегов
        • Синтаксис
          • @@ -386,6 +387,45 @@

          Разделители в имени класса

          +
          +
          +

          Форматирование тегов

          +
            +
          • Вложенность тегов должна обозначаться переносами и отступами.
            • +
          • Каждый новый вложенный тег должен переноситься на отдельную строку с отступом.
            • +
          • Текст внутри тегов должен оставаться на одной строке с тегами.
            • +
          +
          +
          +
          + 
          <!-- Правильно -->
+<div class="menu">
+  <ul>
+    <li>
+      <a href="">Первый</a>
+    </li>
+    <li>
+      <a href="">Второй</a>
+    </li>
+    <li>
+      <a href="">Третий</a>
+    </li>
+  </ul>
+</div>
+
+<!-- Неправильно -->
+<div class="menu"><ul>
+  <li><a href="">Первый</a></li>
+  <li><a href="">
+    Второй
+  </a></li>
+  <li><a href="">Третий</a></li>
+</ul></div>
+
          +
          +
          +
          +

          Синтаксис

          From afe04db0ef25d25f88d7062109fcea28b09e24d0 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 16 Feb 2021 14:59:09 +0300 Subject: [PATCH 23/55] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D0=BF=D1=80=D0=BE=20CSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 59 +++++++++++++++++++++++++++++++++++---------------- 1 file changed, 41 insertions(+), 18 deletions(-) diff --git a/html-css.html b/html-css.html index 5fa640c..63cc7c1 100644 --- a/html-css.html +++ b/html-css.html @@ -58,9 +58,10 @@
        • Единицы измерения в атрибутах
        • Разделители в имени класса
        • Форматирование тегов
          • +
        • Базовые части разметки
          • +
        • Атрибут method в форме
          • -
        • Синтаксис
        • Валидность
        • HTML-доктайп
        • Кодировка символов
          • @@ -428,32 +429,54 @@

          Форматирование тегов

          -

          Синтаксис

          +

          Базовые части разметки

            -
          • Теги и их атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки.
            • -
          • Необязательный закрывающий слеш у одиночных тегов (<img>, <br> и другие) не ставится.
            • -
          • Необязательные закрывающие теги (например, </li> или </body>) не пропускаются.
            • -
          • Для проверки HTML-кода используйте файл конфигурации .htmlhintrc для настройки валидатора HTMLHint.
            • +
          • Современный тип документа <!DOCTYPE html>
            • +
          • Корневой элемент <html> с языком документа lang
            • +
          • Метаинформация <head>
            • +
          • Заголовок документа <title>
            • +
          • Кодировка документа <meta charset="utf-8">
            • +
          • Тело документа <body>
          - 
          <!DOCTYPE html>
+                
          <!-- Правильно -->
+<!DOCTYPE html>
 <html lang="ru">
   <head>
     <meta charset="utf-8">
-    <title>Страница о коте</title>
+    <title>Заголовок</title>
   </head>
-  <body>
-    <article class="post">
-      <h1>Красивый кот</h1>
-      <figure class="post-item">
-        <img src="http://github.com/cat.jpg" alt="Изображение кота">
-        <figcaption>Кот красив!</figcaption>
-      </figure>
-    </article>
-  </body>
-</html>
          
+  <body>Страница</body>
+</html>
+
+<!-- Неправильно -->
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <title>Заголовок</title>
+  Страница
+</html>
+
          +
          +
          +
          + +
          +
          +

          Атрибут method в форме

          +

          В атрибуте method должен быть указан тип отправки данных.

          +
          +
          +
          + 
          <!-- Правильно -->
+<form method="post"></form>
+<form method="get"></form>
+
+<!-- Неправильно -->
+<form method=""></form>
+<form></form>
+
          From 442276b9f51141eb74e3f5af58fdf3f7c4e10633 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 16 Feb 2021 15:18:01 +0300 Subject: [PATCH 24/55] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D1=81=D0=B8=D0=BD=D1=82=D0=B0=D0=BA=D1=81?= =?UTF-8?q?=D0=B8=D1=81=20CSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 33 +++++++++++++++------------------ 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/html-css.html b/html-css.html index 63cc7c1..1a4fb16 100644 --- a/html-css.html +++ b/html-css.html @@ -711,24 +711,22 @@

          CSS

          Синтаксис

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

          Синтаксис

          } /* Плохо */ -.selector, .selector-secondary, .selector[type=text] { - padding:15px; - margin:0px 0px 15px; - background-color:rgba(0,0,0,.5); - box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF}           +.selector, .selector-SECONDARY, .selector[type=text]{ color: red; + padding:15px;margin:0px 0px 15px; + background-color:rgba(0,0,0,.5); + box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFF}
          From 759a2e4f0f25f0f435bbf1a2641c9b0682b8b1da Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 16 Feb 2021 16:18:02 +0300 Subject: [PATCH 25/55] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D0=BF=D1=80=D0=BE=20=D1=88=D1=80=D0=B8?= =?UTF-8?q?=D1=84=D1=82=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/html-css.html b/html-css.html index 1a4fb16..25a0dd4 100644 --- a/html-css.html +++ b/html-css.html @@ -82,6 +82,7 @@
        • Порядок свойств
        • Имена классов
        • Правило @import
          • +
        • Подключение шрифтов
        • Варианты шрифта
        • Доступное скрытие
        @@ -867,6 +868,47 @@

        Правило @import

      +
      +
      +

      Подключение шрифтов

      +
        +
      • Базовые начертания семейства должны иметь общее название font-family.
        • +
      • Для каждого начертания должны быть указаны font-weight и font-style.
        • +
      • В описании шрифта должен быть указан режим отрисовки font-display.
        • +
      +
      +
      +
      + 
      /* Правильно */
+@font-face {
+  font-family: "PT Sans";
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+  src: url("http://github.com/fonts/pt-sans-regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "PT Sans";
+  font-weight: bold;
+  font-style: normal;
+  font-display: optional;
+  src: url("http://github.com/fonts/pt-sans-bold.woff2") format("woff2");
+}
+
+/* Неправильно */
+@font-face {
+  font-family: "PT Sans Regular";
+}
+
+@font-face {
+  font-family: "PT Sans Bold";
+}
      +
      +
      +
      + +

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

      From ae0416ffccc2d3d6292302b408fe212b2b8a4079 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 16 Feb 2021 16:33:08 +0300 Subject: [PATCH 26/55] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=D0=B0=20?= =?UTF-8?q?=D0=BF=D1=80=D0=BE=20CSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 117 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 115 insertions(+), 2 deletions(-) diff --git a/html-css.html b/html-css.html index 25a0dd4..ebe30c4 100644 --- a/html-css.html +++ b/html-css.html @@ -59,7 +59,7 @@
    • Разделители в имени класса
    • Форматирование тегов
    • Базовые части разметки
      • -
    • Атрибут method в форме
      • +
    • Атрибут method в форме
    • Валидность
      • @@ -84,6 +84,10 @@
    • Правило @import
    • Подключение шрифтов
    • Варианты шрифта
      • +
    • !important
      • +
    • Повторяющиеся свойства
      • +
    • Формат цветов
      • +
    • Дробные значения
    • Доступное скрытие
    @@ -908,7 +912,6 @@

    Подключение шрифтов

    -

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

    @@ -960,6 +963,116 @@

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

    +
    +
    +

    !important

    +
      +
    • Ключевое слово !important не должно использоваться для борьбы со специфичностью.
      • +
    • Универсальные классы-хелперы могут использовать !important.
      • +
    +
    +
    +
    + 
    /* Правильно */
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  clip: rect(0 0 0 0) !important;
+  overflow: hidden !important;
+}
+
+/* Неправильно */
+.element {
+  font-size: 17px !important;
+}
+
    +
    +
    +
    + +
    +
    +

    Повторяющиеся свойства

    +
      +
    • Свойства не должны повторяться в рамках одной декларации.
      • +
    • Свойство может повторяться, если раньше описан сброс или общий случай.
      • +
    +
    +
    +
    + 
    /* Правильно */
+.block {
+  margin: 0;
+  margin-left: 20px;
+  border: 10px solid #000000;
+  border-bottom-color: #ff0000;
+}
+
+/* Неправильно */
+.block {
+  margin-left: 10px;
+  border-left: 10px solid #000000;
+  margin-left: 20px;
+  border-left: 10px solid #ff0000;
+}
+
    +
    +
    +
    + +
    +
    +

    Формат цветов

    +
      +
    • Цвета должны записываться строчными в 6-значном формате HEX.
      • +
    • Цвета могут записываться функциями rgba или hsla, если нужна прозрачность.
      • +
    +
    +
    +
    + 
    /* Правильно */
+.block {
+  background-color: #ff0000;
+  border-left-color: #00ff00;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+/* Неправильно */
+.block {
+  background-color: #F00;
+  border-left-color: rgb(0, 255, 0);
+  color: black;
+}
+
    +
    +
    +
    + +
    +
    +

    Дробные значения

    +

    В дробных значениях не должно быть больше двух знаков после точки.

    +
    +
    +
    + 
    /* Правильно */
+.block {
+  width: 2.33%;
+}
+
+/* Неправильно */
+.block {
+  width: 2.33333%;
+}
+
    +
    +
    +
    +

    Доступное скрытие

    From e6c93d4064b2473096c19d6bbce460015ee8d9fa Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Wed, 17 Feb 2021 10:57:57 +0300 Subject: [PATCH 27/55] =?UTF-8?q?Revert=20"=D0=A7=D0=B8=D0=BD=D0=B8=D1=82?= =?UTF-8?q?=20=D0=BD=D0=B5=D1=80=D0=B0=D0=B1=D0=BE=D1=87=D1=83=D1=8E=20?= =?UTF-8?q?=D1=81=D1=81=D1=8B=D0=BB=D0=BA=D1=83=20(#51)"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 605 ++++---------------------------------------------- 1 file changed, 38 insertions(+), 567 deletions(-) diff --git a/html-css.html b/html-css.html index ebe30c4..b19d829 100644 --- a/html-css.html +++ b/html-css.html @@ -37,31 +37,9 @@

    Стиль кода Академии HTML

    - Код - -
    - -
    HTML
    -
    -

    Код

    - -
    -
    -

    Группировка файлов

    -
      -
    • Файлы схожих типов должны быть сгруппированы в папки: картинки, стили, скрипты, шрифты.
      • -
    • Если внутри папок файлов становится много или выделяются подгруппы, можно добавить вложенные папки.
      • -
    -
    -
    -
    - 
    <!-- Правильно -->
-barbershop/
-  pictures/
-    catalog/
-      wine.jpg
-      cheese.png
-    product/
-      wine-big.jpg
-      cheese-big.png
-  images/
-    logo.svg
-    favicons/
-      32x32.png
-      16x16.png
-    content/
-      cat.jpg
-      map.png
-  scripts/
-    menu.js
-    map.js
-  styles/
-    styles.css
-  catalog.html
-  index.html
-
-<!-- Неправильно -->
-barbershop/
-  assets/
-    logo.svg
-    icon-32x32.png
-    icon-16x16.png
-    menu.js
-    map.js
-    header.css
-    footer.css
-    index.css
-    fonts.css
-  index.html
-
    -
    -
    -
    - -
    -
    -

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

    -

    Код проекта должен соответствовать параметрам EditorConfig, описанным в файле .editorconfig проекта.

    -
    -
    -
    - 
    <!-- Правильно-->
-<ul>
-∙∙<li>Пункт</li>
-∙∙<li>Пункт</li>
-</ul>
-
-<!-- Неправильно-->
-<ul>
-→ <li>Пункт</li>
-∙∙∙∙<li>Пункт</li>∙∙∙∙∙∙∙
-</ul>
    -
    -
    -
    - -
    -

    HTML

    -

    Регистр тегов и атрибутов

    -

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

    -

    Исключение: атрибуты, которые требуют другого написания, например viewBox

    -
    -
    -
    - 
    <!-- Правильно -->
-<ul>
-  <li>Первый</li>
-  <li>Второй</li>
-  <li>Третий</li>
-</ul>
-
-<img class="image" src="http://github.com/images/picture.png" width="400" height="400" alt="Кот смотрит на солнышко.">
-
-<!-- Неправильно -->
-<UL>
-  <LI>Первый
-  <LI>Второй
-  <LI>Третий
-</UL>
-
-<IMG class="IMAGE" SRC="images/picture.png" WIDTH="400" HEIGHT="400" ALT="Кот смотрит на солнышко.">
-
    -
    -
    -
    - -
    -
    -

    Двойные теги

    -

    Двойные теги должны иметь открывающий и закрывающий теги.

    -
    -
    -
    - 
    <!-- Правильно -->
-<ul>
-  <li>Первый</li>
-  <li>Второй</li>
-  <li>Третий</li>
-</ul>
-
-<!-- Неправильно -->
-<ul>
-  <li>Первый
-  <li>Второй
-  <li>Третий
-</ul>
-
    -
    -
    -
    - -
    -
    -

    Одиночные теги

    -

    Одиночные теги не должны иметь закрывающий тег или слэш.

    -
    -
    -
    - 
    <!-- Правильно -->
-<img src="http://github.com/images/picture.png" width="400" height="400" alt="Кот смотрит на солнышко.">
-
-<input type="text" name="name">
-
-<!-- Неправильно -->
-<img src="http://github.com/images/picture.png" width="400" height="400" alt="Кот смотрит на солнышко." />
-
-<input type="text"></input>
-
    -
    -
    -
    - -
    -
    -

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

    +

    Синтаксис

      -
    • Атрибуты должны идти в одном порядке, чтобы упростить их чтение.
      • -
    • Атрибут class должен идти сразу после имени тега.
      • +
    • Для отступов у вложенных элементов используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
      • +
    • Теги и их атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки.
      • +
    • Необязательный закрывающий слеш у одиночных тегов (<img>, <br> и другие) не ставится.
      • +
    • Необязательные закрывающие теги (например, </li> или </body>) не пропускаются.
      • +
    • Для проверки HTML-кода используйте файл конфигурации .htmlhintrc для настройки валидатора HTMLHint.
    - 
    <!-- Правильно -->
-<label class="field-group-label" for="appointment-phone">
-<input class="field-group-input field" type="text" id="appointment-phone" placeholder="+7 000-00-00">
-
-<label class="field-group-label" for="appointment-date">
-<input class="field-group-input field" type="text" id="appointment-date" placeholder="01.01.2020">
-
-<!-- Неправильно -->
-<label for="appointment-phone" class="field-group-label">
-<input class="field-group-input field" type="text" placeholder="+7 000-00-00" id="appointment-phone" >
-
-<label for="appointment-date" class="field-group-label">
-<input id="appointment-date" class="field-group-input field" type="text" placeholder="01.01.2020">
-
    -
    -
    -
    - -
    -
    -

    Одиночные атрибуты

    -

    Одиночные атрибуты должны быть записаны без значения.

    -
    -
    -
    - 
    <!-- Правильно -->
-<input type="text" disabled required>
-
-<!-- Неправильно -->
-<input type="text" disabled="disabled" required="required">
-
    -
    -
    -
    - -
    -
    -

    Форматирование атрибутов

    -

    В записи атрибутов не должно быть пробелов вокруг знака «равно» =

    -
    -
    -
    - 
    <!-- Правильно -->
-<input class="field-group-input field" type="text" id="appointment-date" placeholder="01.01.2020">
-
-<!-- Неправильно -->
-<input class = "field-group-input field" type = "text" id = "appointment-date" placeholder = "01.01.2020">
-
    -
    -
    -
    - -
    -
    -

    Кавычки в атрибутах

    -

    Значения атрибутов должны быть в двойных кавычках.

    -
    -
    -
    - 
    <!-- Правильно -->
-<input class="field-group-input field" type="text" id="appointment-date" placeholder="01.01.2020">
-
-<!-- Неправильно -->
-<input class='field-group-input field' type='text' id='appointment-date' placeholder='01.01.2020'>
-
-<input class=field-group-input type=text id=appointment-date placeholder=01.01.2020>
-
    -
    -
    -
    - -
    -
    -

    Кавычки в значениях атрибутов

    -

    Вложенные кавычки в значениях должны быть одиночными.

    -
    -
    -
    - 
    <!-- Правильно -->
-<button class="button" type="button" onclick="show('menu')">
-  Меню
-</button>
-
-<!-- Неправильно -->
-<button class="button" type="button" onclick="show("menu")">
-  Меню
-</button>
-
    -
    -
    -
    - -
    -
    -

    Единицы измерения в атрибутах

    -

    В атрибутах не должно быть единиц измерения.

    -
    -
    -
    - 
    <!-- Правильно -->
-<img src="http://github.com/images/picture.png" width="400" height="400" alt="Кот смотрит на солнышко.">
-
-<!-- Неправильно -->
-<img src="http://github.com/images/picture.png" width="400px" height="400px" alt="Кот смотрит на солнышко.">
-
    -
    -
    -
    - -
    -
    -

    Разделители в имени класса

    -

    Разделителями в имени класса должны быть только дефисы - и подчёркивания _. В коде необходимо придерживаться одного стиля.

    -
    -
    -
    - 
    <!-- Правильно -->
-<input class="form-input form-input-field" type="text">
-<input class="form_input form_input_field" type="text">
-<input class="form__input form-input__field" type="text">
-<input class="form--input form-input--field" type="text">
-
-<!-- Неправильно -->
-<input class="formInput formInputField" type="text">
-<input class="form-input form_input_field" type="text">
-
    -
    -
    -
    - -
    -
    -

    Форматирование тегов

    -
      -
    • Вложенность тегов должна обозначаться переносами и отступами.
      • -
    • Каждый новый вложенный тег должен переноситься на отдельную строку с отступом.
      • -
    • Текст внутри тегов должен оставаться на одной строке с тегами.
      • -
    -
    -
    -
    - 
    <!-- Правильно -->
-<div class="menu">
-  <ul>
-    <li>
-      <a href="">Первый</a>
-    </li>
-    <li>
-      <a href="">Второй</a>
-    </li>
-    <li>
-      <a href="">Третий</a>
-    </li>
-  </ul>
-</div>
-
-<!-- Неправильно -->
-<div class="menu"><ul>
-  <li><a href="">Первый</a></li>
-  <li><a href="">
-    Второй
-  </a></li>
-  <li><a href="">Третий</a></li>
-</ul></div>
-
    -
    -
    -
    - -
    -
    -

    Базовые части разметки

    -
      -
    • Современный тип документа <!DOCTYPE html>
      • -
    • Корневой элемент <html> с языком документа lang
      • -
    • Метаинформация <head>
      • -
    • Заголовок документа <title>
      • -
    • Кодировка документа <meta charset="utf-8">
      • -
    • Тело документа <body>
      • -
    -
    -
    -
    - 
    <!-- Правильно -->
-<!DOCTYPE html>
+                
    <!DOCTYPE html>
 <html lang="ru">
   <head>
     <meta charset="utf-8">
-    <title>Заголовок</title>
+    <title>Страница о коте</title>
   </head>
-  <body>Страница</body>
-</html>
-
-<!-- Неправильно -->
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-  <title>Заголовок</title>
-  Страница
-</html>
-
    
-
    -
    -
    - -
    -
    -

    Атрибут method в форме

    -

    В атрибуте method должен быть указан тип отправки данных.

    -
    -
    -
    - 
    <!-- Правильно -->
-<form method="post"></form>
-<form method="get"></form>
-
-<!-- Неправильно -->
-<form method=""></form>
-<form></form>
-
    + <body> + <article class="post"> + <h1>Красивый кот</h1> + <figure class="post-item"> + <img src="http://github.com/cat.jpg" alt="Изображение кота"> + <figcaption>Кот красив!</figcaption> + </figure> + </article> + </body> +</html>
    @@ -716,22 +333,25 @@

    CSS

    Синтаксис

      -
    • Селекторы и свойства должны записываться строчными буквами.
      • -
    • Селекторы, разделённые запятой, должны записываться на новых строках.
      • -
    • До и после комбинатора между селекторами (например, p > a) ставится один пробел.
      • -
    • Перед открывающейся фигурной скобкой должен быть пробел. После скобки запись идёт с новой строки.
      • -
    • Свойства должны стоять на отдельных строках.
      • -
    • Свойства внутри блока должны иметь один внутренний отступ.
      • -
    • После двоеточия должен быть пробел. Перед двоеточием пробел не нужен.
      • -
    • В конце объявления должна быть точка с запятой.
      • +
    • После значения свойства обязательно ставится точка с запятой.
      • +
    • Для отступов внутри правил используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
    • Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов. Для записи используются строчные буквы. Например, #f5f5f5.
      • +
    • Названия тегов и свойств в правилах пишутся строчными буквами.
    • Начальный ноль для значений не сокращается (например, .5 вместо 0.5).
    • Во всех случаях в стилях используются двойные кавычки. В необязательных случаях кавычки не опускаются.
      • -
    • После запятых в перечислениях, например rgb(), rgba(), hsl(), hsla() или rect() должен быть пробел .
      • +
    • После двоеточия в правилах ставится один пробел (top: 10px;). А перед двоеточием пробел не нужен.
      • +
    • После запятых внутри значений rgb(), rgba(), hsl(), hsla() или rect() пробелы ставятся. Это повышает удобочитаемость.
      • +
    • До и после комбинатора между селекторами (например, p > a) ставится один пробел.
      • +
    • Каждое объявление в правиле пишется на новой строке.
      • +
    • Перед открывающейся фигурной скобкой ставится один пробел. После скобки запись идёт с новой строки: + 
      .selector {
+  color: #f5f5f5;
+}
      +
      • +
    • Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило отделяется пустой строкой.
    • Единицы измерения не пишутся, там где в них нет необходимости. Например, border: 0.
      • -
    • Закрывающая скобка должна быть на новой строке и без отступа.
      • -
    • Между блоками правил должна быть одна пустая строка.
    • Для проверки CSS-кода используйте конфигурацию для настройки валидатора stylelint.
      • +
    • Для автоматического применения этих правил используйте файл конфигурации csscomb.json для настройки CSSComb.
    @@ -747,10 +367,11 @@

    Синтаксис

    } /* Плохо */ -.selector, .selector-SECONDARY, .selector[type=text]{ color: red; - padding:15px;margin:0px 0px 15px; - background-color:rgba(0,0,0,.5); - box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFF}     +.selector, .selector-secondary, .selector[type=text] { + padding:15px; + margin:0px 0px 15px; + background-color:rgba(0,0,0,.5); + box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF}
    @@ -872,46 +493,6 @@

    Правило @import

    -
    -
    -

    Подключение шрифтов

    -
      -
    • Базовые начертания семейства должны иметь общее название font-family.
      • -
    • Для каждого начертания должны быть указаны font-weight и font-style.
      • -
    • В описании шрифта должен быть указан режим отрисовки font-display.
      • -
    -
    -
    -
    - 
    /* Правильно */
-@font-face {
-  font-family: "PT Sans";
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-  src: url("http://github.com/fonts/pt-sans-regular.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: "PT Sans";
-  font-weight: bold;
-  font-style: normal;
-  font-display: optional;
-  src: url("http://github.com/fonts/pt-sans-bold.woff2") format("woff2");
-}
-
-/* Неправильно */
-@font-face {
-  font-family: "PT Sans Regular";
-}
-
-@font-face {
-  font-family: "PT Sans Bold";
-}
    -
    -
    -
    -

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

    @@ -963,116 +544,6 @@

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

    -
    -
    -

    !important

    -
      -
    • Ключевое слово !important не должно использоваться для борьбы со специфичностью.
      • -
    • Универсальные классы-хелперы могут использовать !important.
      • -
    -
    -
    -
    - 
    /* Правильно */
-.visually-hidden {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  margin: -1px !important;
-  border: 0 !important;
-  padding: 0 !important;
-  clip: rect(0 0 0 0) !important;
-  overflow: hidden !important;
-}
-
-/* Неправильно */
-.element {
-  font-size: 17px !important;
-}
-
    -
    -
    -
    - -
    -
    -

    Повторяющиеся свойства

    -
      -
    • Свойства не должны повторяться в рамках одной декларации.
      • -
    • Свойство может повторяться, если раньше описан сброс или общий случай.
      • -
    -
    -
    -
    - 
    /* Правильно */
-.block {
-  margin: 0;
-  margin-left: 20px;
-  border: 10px solid #000000;
-  border-bottom-color: #ff0000;
-}
-
-/* Неправильно */
-.block {
-  margin-left: 10px;
-  border-left: 10px solid #000000;
-  margin-left: 20px;
-  border-left: 10px solid #ff0000;
-}
-
    -
    -
    -
    - -
    -
    -

    Формат цветов

    -
      -
    • Цвета должны записываться строчными в 6-значном формате HEX.
      • -
    • Цвета могут записываться функциями rgba или hsla, если нужна прозрачность.
      • -
    -
    -
    -
    - 
    /* Правильно */
-.block {
-  background-color: #ff0000;
-  border-left-color: #00ff00;
-  color: rgba(0, 0, 0, 0.5);
-}
-
-/* Неправильно */
-.block {
-  background-color: #F00;
-  border-left-color: rgb(0, 255, 0);
-  color: black;
-}
-
    -
    -
    -
    - -
    -
    -

    Дробные значения

    -

    В дробных значениях не должно быть больше двух знаков после точки.

    -
    -
    -
    - 
    /* Правильно */
-.block {
-  width: 2.33%;
-}
-
-/* Неправильно */
-.block {
-  width: 2.33333%;
-}
-
    -
    -
    -
    -

    Доступное скрытие

    From 98e222842c3e9f0ebbcb3cf1696da5a737549bc6 Mon Sep 17 00:00:00 2001 From: AnnaLevchenko <36822971+levallevchenko@users.noreply.github.com> Date: Tue, 2 Mar 2021 17:34:57 +0300 Subject: [PATCH 28/55] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=B8=D1=82=20=D0=BF=D1=80=D0=BE=D1=82=D0=B8=D0=B2=D0=BE=D1=80?= =?UTF-8?q?=D0=B5=D1=87=D0=B8=D1=8F=20=D1=81=D1=82=D0=B0=D0=B9=D0=BB=D0=B3?= =?UTF-8?q?=D0=B0=D0=B9=D0=B4=D0=B0=20=D0=B8=20=D0=BB=D0=B8=D0=BD=D1=82?= =?UTF-8?q?=D0=B5=D1=80=D0=B0=20(#54)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sasha Sushko --- javascript.html | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/javascript.html b/javascript.html index f0a5de4..00eae91 100644 --- a/javascript.html +++ b/javascript.html @@ -99,7 +99,7 @@

    Отступы, пробелы и перен
    Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
    -

    Для отступов используются два пробела. Знак табуляции не используется.

    +

    Для отступов используются два пробела. Знак табуляции не используется

    При переносах в продолжении строки используется четыре пробела

    @@ -123,7 +123,7 @@

    Отступы, пробелы и перен }

    В однострочных блоках кода, код отделен от открывающей и закрывающей скобки пробелом

    -

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

    +

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

    После запятой всегда должен ставиться пробел, если запятая не в конце строки

    @@ -191,16 +191,16 @@

    Отступы, пробелы и перен

    Строки

    -

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

    +

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

    В строках запрещено указывать код спецсимволов в восьмеричной системе счисления

    - 
    const foo = "Copyright \251";
    + 
    const foo = 'Copyright \251';
    - 
    const foo = "Copyright \u00A9";
    + 
    const foo = 'Copyright \u00A9';

    При создании объектов через литералы свойства должны объявляться в едином стиле: или без кавычек или с ними

    -

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

    +

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

    @@ -244,13 +244,13 @@

    Именование

    -

    Все переменные должны быть названы в верблюжьем регистре (camelCase). Исключения составляют константы которые должны именоваться прописными буквами в константном регистре (CONSTANT_CASE) и названия классов, функций-конструкторов и перечислений, которые именуются с заглавной буквы (PascalCase)

    +

    Все переменные должны быть названы в верблюжьем регистре (camelCase). Исключения составляют константы, которые должны именоваться прописными буквами в константном регистре (CONSTANT_CASE) и названия классов, функций-конструкторов и перечислений, которые именуются с заглавной буквы (PascalCase)

    Запрещено использовать имена переменных, которые используются во внешних областях видимости

    Запрещено называть переменные и свойства ключевыми словами JS

    -

    Запрещено использовать переменные, не объявленные ранее. При использовании переменной, объявленной в другом модуле в глобальной области видимости нужно обращаться к ней как к свойству объекта window

    +

    Запрещено использовать переменные, не объявленные ранее. При использовании переменной, объявленной в другом модуле в глобальной области видимости, нужно обращаться к ней как к свойству объекта window

    Запрещено напрямую обращаться к значению undefined. Для проверки типа рекомендуется использовать typeof. Исключение составляет явная передача undefined при вызове функции вместо аргумента, чтобы использовать значение параметра по умолчанию

    @@ -267,7 +267,7 @@

    Предотвращение ошибок

    Не рекомендуется использовать указатель Unicode BOM в коде, потому что код должен быть сохранен не в кодировке UTF-16, а в кодировке UTF-8, в которой нет указателя порядка бит

    -

    Обязательно используются блоки кода даже если в выражении содержится одна строчка

    +

    Обязательно используются блоки кода, даже если в выражении содержится одна строчка

    В коде нет пустых блоков кода

    @@ -376,8 +376,6 @@

    Создание значений

    При создании непустых массивов запрещено опускать пустые значения (ставить подряд несколько запятых)

    -

    При создании непустых объектов и массивов не используются «висячие» запятые

    -

    Для создания новых значений не используются конструкторы примитивов String, Number, Boolean

    Конструкторы вызываются со скобками, даже если у них нет параметров

    @@ -412,7 +410,7 @@

    Манкипатчинг

    Контекст

    bind не используется вне методов классов

    -

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

    +

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

    Переменные

    Переменные, объявленные через var не удаляются оператором delete

    @@ -456,7 +454,7 @@

    Лишние символы

    Отладчик и консоль

    -

    В коде не используется оставленных выводов в консоль

    +

    В коде не используются оставленные выводы в консоль

    В коде нет забытых инструкций debugger

    @@ -514,7 +512,7 @@

    Прочее

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

    -

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

    +

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

    В коде не используется оператор «запятая» для описания последовательностей действий. Для создания переменных используются отдельные ключевые слова let, const, var, операторы группировки, условные операторы и прочие конструкции. Исключение составляет начальное условие оператора for

    const result = (1, 2); // 2
    From 67658562b12802c24b1c7ff0459cfdbb2816c493 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Thu, 17 Jun 2021 12:20:33 +0300 Subject: [PATCH 29/55] =?UTF-8?q?=D0=97=D0=B0=D0=BC=D0=B5=D0=BD=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=BB=D0=BE=D0=B3=D0=BE=D1=82=D0=B8=D0=BF=20HTM?= =?UTF-8?q?L=20Academy=20=D0=BD=D0=B0=20=D0=BD=D0=BE=D0=B2=D1=8B=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Заменяет логотип HTML Academy на новый --- html-css.html | 2 +- img/logo-full.svg | 1 - img/logo-html-academy.svg | 1 + index.html | 2 +- javascript.html | 2 +- 5 files changed, 4 insertions(+), 4 deletions(-) delete mode 100644 img/logo-full.svg create mode 100644 img/logo-html-academy.svg diff --git a/html-css.html b/html-css.html index b19d829..c4d67c8 100644 --- a/html-css.html +++ b/html-css.html @@ -590,7 +590,7 @@

    Доступное скрытие

    - HTML Academy + HTML Academy
    + +
    +
    +

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

    +

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

    +
      +
    1. Позиционирование
      2. +
    2. Блочная модель
      3. +
    3. Типографика
      4. +
    4. Оформление
      5. +
    5. Анимация
      6. +
    6. Разное
      7. +
    +

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

    +

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

    +

    + Сгруппированные объявления в правиле отделены друг от друга пустой строкой. +

    +

    + Порядок объявления подробных правил, таких как font-size, font-family, line-height, соответствует порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой идёт сокращённая версия. +

    +
    +
    +
    + 
    .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-family: "Arial", sans-serif;
+  font-style: normal;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 700;
+  text-align: center;
+  color: #333333;
+
+  /* Оформление */
+  background-color: #f5f5f5;
+  border: 1px solid #e5e5e5;
+  border-radius: 3px;
+  opacity: 1;
+
+  /* Анимация */
+  transition: color 1s;
+
+  /* Разное */
+  will-change: auto;
+}
    +
    From d3c3637fde8cf9dc8ec26b0acccef7d325712406 Mon Sep 17 00:00:00 2001 From: Vitaly Zyuzin Date: Wed, 23 Jun 2021 11:46:24 +0300 Subject: [PATCH 31/55] =?UTF-8?q?=D0=97=D0=B0=D0=BC=D0=B5=D0=BD=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D1=81=D1=81=D1=8B=D0=BB=D0=BA=D1=83=20=D0=BD?= =?UTF-8?q?=D0=B0=20HTML-=D0=BB=D0=B8=D0=BD=D1=82=D0=B5=D1=80=20(#58)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Readme.md b/Readme.md index db8200f..8d23780 100644 --- a/Readme.md +++ b/Readme.md @@ -18,4 +18,4 @@ ESLint — https://github.com/htmlacademy/eslint-config-htmlacademy Stylelint — https://github.com/htmlacademy/stylelint-config-htmlacademy -HTMLHint - https://github.com/htmlacademy/htmlhint-config-htmlacademy +linthtml — https://github.com/htmlacademy/linthtml-config-htmlacademy From 6f65a5c21d3e47e4370b388fcffa2fba8ff074ca Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Thu, 24 Jun 2021 13:16:30 +0300 Subject: [PATCH 32/55] =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=B8=D1=82=20?= =?UTF-8?q?=D0=BF=D0=BB=D0=BE=D1=85=D0=BE=D0=B9=20=D0=BF=D1=80=D0=B8=D0=BC?= =?UTF-8?q?=D0=B5=D1=80=20=D0=B2=20=D0=B7=D0=B0=D0=BC=D0=B5=D1=89=D0=B0?= =?UTF-8?q?=D0=B5=D0=BC=D1=8B=D1=85=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD?= =?UTF-8?q?=D1=82=D0=B0=D1=85=20(#59)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/html-css.html b/html-css.html index 6a54bb4..c468d5f 100644 --- a/html-css.html +++ b/html-css.html @@ -467,8 +467,8 @@

    Размеры замещаемых элементов

    From 1fdf59bb623dc65a64497f7440b76608a31be566 Mon Sep 17 00:00:00 2001 From: Shabalin Nikolai Date: Thu, 16 Sep 2021 17:10:22 +0300 Subject: [PATCH 33/55] =?UTF-8?q?=D0=9C=D0=B5=D0=BD=D1=8F=D0=B5=D1=82=20HT?= =?UTF-8?q?ML-=D0=BB=D0=B8=D0=BD=D1=82=D0=B5=D1=80=20=D0=BD=D0=B0=20=D0=B0?= =?UTF-8?q?=D0=BA=D1=82=D1=83=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html-css.html b/html-css.html index c468d5f..611d0cd 100644 --- a/html-css.html +++ b/html-css.html @@ -99,7 +99,7 @@

    Автоматизация проверки кода

    При написании кода вам сложно будет запомнить все правила кодгайда. Эту работу стоит отдать роботам.

    • Для поддержания единообразия в коде используйте EditorConfig.
      • -
    • Для HTML используйте HTMLHint.
      • +
    • Для HTML используйте linthtml.
    • Для стилей Stylelint.

    По ссылкам находятся конфигурации Академии для этих инструментов. Конфигурации частично покрывают то, что описано в этом стиле кода, и в них нет ничего, что не описано ниже.

    From d4780806bb6fbf643fcc522552e0b296bb0a1c18 Mon Sep 17 00:00:00 2001 From: Alexey Kovalev Date: Wed, 27 Oct 2021 06:59:19 +0300 Subject: [PATCH 34/55] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D1=8F=D0=B5=D1=82=20=D0=BE=D0=BF=D0=B5=D1=87=D0=B0=D1=82?= =?UTF-8?q?=D0=BA=D1=83=20(#62)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: aikovalev --- html-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html-css.html b/html-css.html index 611d0cd..eff6a65 100644 --- a/html-css.html +++ b/html-css.html @@ -451,7 +451,7 @@

    Размеры замещаемых элементов
  • У изображений, видео и iframe указаны размеры.
    • -
  • о возможности изображениям указываются действительные размеры, так как это улучшает производительность отрисовки страницы: браузер не будет перерисовывать страницу в процессе загрузки и отображения изображения.
    • +
  • По возможности изображениям указываются действительные размеры, так как это улучшает производительность отрисовки страницы: браузер не будет перерисовывать страницу в процессе загрузки и отображения изображения.
  • В атрибутах нет единиц измерения.
    • From 7adb72522db00583b0a94be9a6f2ca4d22c7ccfb Mon Sep 17 00:00:00 2001 From: Shabalin Nikolai Date: Wed, 27 Oct 2021 08:04:35 +0300 Subject: [PATCH 35/55] =?UTF-8?q?=D0=92=D1=80=D0=B5=D0=BC=D0=B5=D0=BD?= =?UTF-8?q?=D0=BD=D0=BE=20=D0=B4=D0=BB=D1=8F=20=D1=83=D0=B4=D0=BE=D0=B1?= =?UTF-8?q?=D1=81=D1=82=D0=B2=D0=B0=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BD=D0=BE?= =?UTF-8?q?=D1=81=D0=B8=D1=82=20=D0=BA=D0=BE=D0=B4=20=D0=BF=D0=BE=20=D0=B1?= =?UTF-8?q?=D0=BB=D0=BE=D0=BA=D0=B0=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/blocks/chapter.css | 94 +++++++ css/blocks/code.css | 31 +++ css/blocks/common.css | 92 +++++++ css/blocks/footer.css | 67 +++++ css/blocks/guide-content.css | 4 + css/blocks/header.css | 44 +++ css/blocks/logo-list.css | 19 ++ css/blocks/prism.css | 49 ++++ css/blocks/sidebar.css | 118 ++++++++ css/style.css | 502 +---------------------------------- 10 files changed, 527 insertions(+), 493 deletions(-) create mode 100644 css/blocks/chapter.css create mode 100644 css/blocks/code.css create mode 100644 css/blocks/common.css create mode 100644 css/blocks/footer.css create mode 100644 css/blocks/guide-content.css create mode 100644 css/blocks/header.css create mode 100644 css/blocks/logo-list.css create mode 100644 css/blocks/prism.css create mode 100644 css/blocks/sidebar.css diff --git a/css/blocks/chapter.css b/css/blocks/chapter.css new file mode 100644 index 0000000..535e053 --- /dev/null +++ b/css/blocks/chapter.css @@ -0,0 +1,94 @@ +.chapters { + width: 100%; +} + +.chapter h2 { + padding: 2rem 1rem; + word-break: break-word; + background-color: #e5e5e5; +} + +.chapter h3[id]::before { + display: block; + height: 2rem; + margin-top: -2rem; + visibility: hidden; + content: ""; +} + +.chapter-part { + display: flex; + flex-direction: column; + + border-bottom: 1px solid #e5e5e5; +} + +.chapter-part-col { + padding: 2rem 1rem; +} + +.chapter-part-col figure { + margin: 0 1rem 0 0; +} + +.chapter-part-col p { + max-width: 32rem; +} + +.chapter-part-col + .chapter-part-col { + border-top: 1px solid #e5e5e5; +} + +.gray-bgcolor { + background-color: #fafafa; +} + +@media (min-width: 38em) { + .chapter h2 { + padding: 2rem 2rem 2.5rem; + } + + .chapter-part-col { + padding: 2rem; + } +} + +@media (min-width: 38em) { + .chapter h2 { + padding: 2rem 2rem 2.5rem; + } + + .chapter-part-col { + padding: 2rem; + } +} + +@media (min-width: 48em) { + .chapter h2 { + padding: 2rem 3rem 2.5rem; + } + + .chapter-part { + flex-direction: row; + } + + .chapter-part-col { + width: 50%; + padding: 3rem 1.5rem; + } + + .chapter-part-col--full-width { + width: 100%; + } + + .chapter-part-col + .chapter-part-col { + border-top: 0; + } +} + +@media (min-width: 75em) { + .chapters { + width: calc(100% - 230px); + } +} + diff --git a/css/blocks/code.css b/css/blocks/code.css new file mode 100644 index 0000000..7b3d709 --- /dev/null +++ b/css/blocks/code.css @@ -0,0 +1,31 @@ +code, +pre { + font-family: "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; +} + +code { + padding: 2px 4px; + + font-size: 95%; + color: #d44950; + + background-color: #f7f7f9; + border-radius: 0.2rem; +} + +pre { + display: block; + margin: 0 0 1rem; + + line-height: 1.4; + white-space: pre-wrap; +} + +pre code { + padding: 0; + + color: inherit; + + background-color: transparent; + border: 0; +} diff --git a/css/blocks/common.css b/css/blocks/common.css new file mode 100644 index 0000000..4ac5aee --- /dev/null +++ b/css/blocks/common.css @@ -0,0 +1,92 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + font-size: 16px; + scroll-behavior: smooth; +} + +body { + margin: 0; + + font: 17px/1.6 "Helvetica", "Arial", sans-serif; + color: #5a5a5a; + + background-color: #ffffff; +} + +a:link, +a:visited { + color: #3f3ccb; + text-decoration: none; +} + +a:hover, +a:focus { + color: #302683; + text-decoration: underline; +} + +h1, +h2, +h3 { + margin: 0; + + font-weight: normal; + color: #424242; + letter-spacing: -0.025em; +} + +h2, +h3, +h4 { + line-height: 1.2; +} + +h1 { + font-size: 3rem; + line-height: 1.3; +} + +h2 { + font-size: 2.5rem; +} + +h3 { + font-size: 1.75rem; + scroll-margin-top: 20px; +} + +ul li { + margin-bottom: 0.25rem; +} + +.visually-hidden { + position: absolute; + + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + + border: 0; + + clip: rect(0, 0, 0, 0); + clip-path: inset(100%); +} + +@media (min-width: 38em) { + html { + font-size: 20px; + } +} + +@media (min-width: 38em) { + html { + font-size: 20px; + } +} diff --git a/css/blocks/footer.css b/css/blocks/footer.css new file mode 100644 index 0000000..debd653 --- /dev/null +++ b/css/blocks/footer.css @@ -0,0 +1,67 @@ +footer { + padding: 2rem; + + background-color: #2d2d44; +} + +.contacts { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.logo-full { + display: inline-block; + width: 161px; +} + +.social-icons { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0.5rem 0 1rem 0; +} + +.social-icons, +.github { + font-size: 0; +} + +.icon { + min-width: 2rem; + min-height: 2rem; + + background-repeat: no-repeat; + background-position: center; + background-size: calc(100% - 5px); + opacity: 0.5; +} + +.icon:hover { + opacity: 1; +} + +.icon-vk { + background-image: url("http://github.com/img/icon-vkontakte.svg"); +} + +.icon-fb { + background-image: url("http://github.com/img/icon-facebook.svg"); +} + +.icon-tw { + background-image: url("http://github.com/img/icon-twitter.svg"); +} + +.icon-ig { + background-image: url("http://github.com/img/icon-instagram.svg"); +} + +.github-link { + display: inline-block; + width: 91px; + height: 16px; + + background-image: url("http://github.com/img/github.svg"); +} diff --git a/css/blocks/guide-content.css b/css/blocks/guide-content.css new file mode 100644 index 0000000..95478c2 --- /dev/null +++ b/css/blocks/guide-content.css @@ -0,0 +1,4 @@ +.guide-content { + display: flex; + flex-wrap: wrap; +} diff --git a/css/blocks/header.css b/css/blocks/header.css new file mode 100644 index 0000000..f3c21eb --- /dev/null +++ b/css/blocks/header.css @@ -0,0 +1,44 @@ +header { + padding: 1rem 1rem 6rem; + + text-align: center; + + background-color: #312785; + background-image: repeating-linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px), repeating-linear-gradient(-150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px); + background-size: 82px 47px; +} + +header h1 { + margin: 0 0 0.25rem; + + color: #ffffff; +} + +header p { + margin-top: 0; + + font-size: 1.1rem; +} + +header a:link, +header a:visited { + color: #ffffff; +} + +.logo { + width: 300px; + height: 300px; +} + +@media (min-width: 38em) { + header { + padding-bottom: 4rem; + } +} + +@media (min-width: 38em) { + header { + padding-bottom: 4rem; + } +} + diff --git a/css/blocks/logo-list.css b/css/blocks/logo-list.css new file mode 100644 index 0000000..f2f4966 --- /dev/null +++ b/css/blocks/logo-list.css @@ -0,0 +1,19 @@ +.logo-list { + max-width: 550px; + margin: 50px auto; +} + +.logo-list ul { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + margin: 0; + padding: 0; + + list-style: none; +} + +.logo-list li { + margin-right: 10px; + margin-left: 10px; +} diff --git a/css/blocks/prism.css b/css/blocks/prism.css new file mode 100644 index 0000000..40979f6 --- /dev/null +++ b/css/blocks/prism.css @@ -0,0 +1,49 @@ +/* override default prism theme */ +code[class*="language-"], +pre[class*="language-"] { + white-space: pre-wrap; +} + +pre[class*="language-"] { + margin: 0; + padding: 0; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: initial; +} + +/* override default prism theme */ +code[class*="language-"], +pre[class*="language-"] { + white-space: pre-wrap; +} + +pre[class*="language-"] { + margin: 0; + padding: 0; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: initial; +} + +pre.language-correct, +pre.language-incorrect { + padding: 5px 10px; +} + +pre.language-correct { + background: #deeede; +} + +pre.language-incorrect { + background: #f4d3d3; +} + +pre.language-correct .token.operator, +pre.language-incorrect .token.operator { + background: none; +} diff --git a/css/blocks/sidebar.css b/css/blocks/sidebar.css new file mode 100644 index 0000000..94cca20 --- /dev/null +++ b/css/blocks/sidebar.css @@ -0,0 +1,118 @@ +.sidebar { + display: flex; + flex-direction: column; + + width: 100%; +} + +.sidebar a { + display: block; + color: #5a5a5a; +} + +.sidebar a:hover { + color: #3f3ccb; +} + +.sidebar-col { + padding: 2rem 1rem; +} + +.sidebar-col + .sidebar-col { + border-top: 1px solid #e5e5e5; +} + +.sidebar-col > a { + font-size: 1.75rem; + line-height: 1.25; +} + +.sidebar-menu { + padding-left: 1rem; +} + +@media (min-width: 48em) { + .sidebar { + flex-direction: row; + flex-wrap: wrap; + + padding: 2rem 0; + } + + .sidebar-col { + width: 50%; + padding: 1rem 3rem; + } + + .sidebar-col + .sidebar-col { + border-top: 0; + } +} + +@media (min-width: 75em) { + .sidebar { + position: sticky; + top: 0; + bottom: 0; + + flex-direction: column; + flex-wrap: nowrap; + align-self: flex-start; + + width: 230px; + height: 100vh; + padding: 0 1rem; + + overflow-y: auto; + line-height: 1.25; + border-right: 1px solid #e5e5e5; + } + + .sidebar-col { + flex-shrink: 0; + + width: 100%; + padding: 0; + } + + .sidebar-col-first { + padding-top: 1.75rem; + } + + .sidebar-col-last { + padding-bottom: 1.75rem; + } + + .sidebar-col + .sidebar-col { + margin-top: 1.75em; + } + + .sidebar-col > a { + display: block; + + font-size: 0.8rem; + font-weight: bold; + } + + .sidebar-menu { + padding: 0; + margin: 0.5em 0 0; + + list-style: none; + + font-size: 0.7rem; + } + + .sidebar-menu li { + margin: 0; + + line-height: 1.45; + } + + .sidebar-menu a { + display: block; + + padding: 0.25em 0; + } +} + diff --git a/css/style.css b/css/style.css index acb48a7..fb866f3 100644 --- a/css/style.css +++ b/css/style.css @@ -1,493 +1,9 @@ -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - font-size: 16px; - scroll-behavior: smooth; -} - -body { - margin: 0; - - font: 17px/1.6 "Helvetica", "Arial", sans-serif; - color: #5a5a5a; - - background-color: #ffffff; -} - -a:link, -a:visited { - color: #3f3ccb; - text-decoration: none; -} - -a:hover, -a:focus { - color: #302683; - text-decoration: underline; -} - -h1, -h2, -h3 { - margin: 0; - - font-weight: normal; - color: #424242; - letter-spacing: -0.025em; -} - -h2, -h3, -h4 { - line-height: 1.2; -} - -h1 { - font-size: 3rem; - line-height: 1.3; -} - -h2 { - font-size: 2.5rem; -} - -h3 { - font-size: 1.75rem; - scroll-margin-top: 20px; -} - -code, -pre { - font-family: "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; -} - -code { - padding: 2px 4px; - - font-size: 95%; - color: #d44950; - - background-color: #f7f7f9; - border-radius: 0.2rem; -} - -pre { - display: block; - margin: 0 0 1rem; - - line-height: 1.4; - white-space: pre-wrap; -} - -pre code { - padding: 0; - - color: inherit; - - background-color: transparent; - border: 0; -} - -ul li { - margin-bottom: 0.25rem; -} - -header { - padding: 1rem 1rem 6rem; - - text-align: center; - - background-color: #312785; - background-image: repeating-linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px), repeating-linear-gradient(-150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px); - background-size: 82px 47px; -} - -header h1 { - margin: 0 0 0.25rem; - - color: #ffffff; -} - -header p { - margin-top: 0; - - font-size: 1.1rem; -} - -header a:link, -header a:visited { - color: #ffffff; -} - -.visually-hidden { - position: absolute; - - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - overflow: hidden; - - border: 0; - - clip: rect(0, 0, 0, 0); - clip-path: inset(100%); -} - -.logo-list { - max-width: 550px; - margin: 50px auto; -} - -.logo-list ul { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - margin: 0; - padding: 0; - - list-style: none; -} - -.logo-list li { - margin-right: 10px; - margin-left: 10px; -} - -.logo { - width: 300px; - height: 300px; -} - -.guide-content { - display: flex; - flex-wrap: wrap; -} - -.sidebar { - display: flex; - flex-direction: column; - - width: 100%; -} - -.sidebar a { - display: block; - color: #5a5a5a; -} - -.sidebar a:hover { - color: #3f3ccb; -} - -.sidebar-col { - padding: 2rem 1rem; -} - -.sidebar-col + .sidebar-col { - border-top: 1px solid #e5e5e5; -} - -.sidebar-col > a { - font-size: 1.75rem; - line-height: 1.25; -} - -.sidebar-menu { - padding-left: 1rem; -} - -.chapters { - width: 100%; -} - -.chapter h2 { - padding: 2rem 1rem; - word-break: break-word; - background-color: #e5e5e5; -} - -.chapter h3[id]::before { - display: block; - height: 2rem; - margin-top: -2rem; - visibility: hidden; - content: ""; -} - -.chapter-part { - display: flex; - flex-direction: column; - - border-bottom: 1px solid #e5e5e5; -} - -.chapter-part-col { - padding: 2rem 1rem; -} - -.chapter-part-col figure { - margin: 0 1rem 0 0; -} - -.chapter-part-col p { - max-width: 32rem; -} - -.chapter-part-col + .chapter-part-col { - border-top: 1px solid #e5e5e5; -} - -.gray-bgcolor { - background-color: #fafafa; -} - -footer { - padding: 2rem; - - background-color: #2d2d44; -} - -.contacts { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.logo-full { - display: inline-block; - width: 161px; -} - -.social-icons { - display: flex; - justify-content: space-between; - align-items: center; - margin: 0.5rem 0 1rem 0; -} - -.social-icons, -.github { - font-size: 0; -} - -.icon { - min-width: 2rem; - min-height: 2rem; - - background-repeat: no-repeat; - background-position: center; - background-size: calc(100% - 5px); - opacity: 0.5; -} - -.icon:hover { - opacity: 1; -} - -.icon-vk { - background-image: url("http://github.com/img/icon-vkontakte.svg"); -} - -.icon-fb { - background-image: url("http://github.com/img/icon-facebook.svg"); -} - -.icon-tw { - background-image: url("http://github.com/img/icon-twitter.svg"); -} - -.icon-ig { - background-image: url("http://github.com/img/icon-instagram.svg"); -} - -.github-link { - display: inline-block; - width: 91px; - height: 16px; - - background-image: url("http://github.com/img/github.svg"); -} - -@media (min-width: 38em) { - header { - padding-bottom: 4rem; - } - - html { - font-size: 20px; - } - - .chapter h2 { - padding: 2rem 2rem 2.5rem; - } - - .chapter-part-col { - padding: 2rem; - } -} - -@media (min-width: 48em) { - .sidebar { - flex-direction: row; - flex-wrap: wrap; - - padding: 2rem 0; - } - - .sidebar-col { - width: 50%; - padding: 1rem 3rem; - } - - .sidebar-col + .sidebar-col { - border-top: 0; - } - - .chapter h2 { - padding: 2rem 3rem 2.5rem; - } - - .chapter-part { - flex-direction: row; - } - - .chapter-part-col { - width: 50%; - padding: 3rem 1.5rem; - } - - .chapter-part-col--full-width { - width: 100%; - } - - .chapter-part-col + .chapter-part-col { - border-top: 0; - } -} - -@media (min-width: 75em) { - .chapters { - width: calc(100% - 230px); - } - - .sidebar { - position: sticky; - top: 0; - bottom: 0; - - flex-direction: column; - flex-wrap: nowrap; - align-self: flex-start; - - width: 230px; - height: 100vh; - padding: 0 1rem; - - overflow-y: auto; - line-height: 1.25; - border-right: 1px solid #e5e5e5; - } - - .sidebar-col { - flex-shrink: 0; - - width: 100%; - padding: 0; - } - - .sidebar-col-first { - padding-top: 1.75rem; - } - - .sidebar-col-last { - padding-bottom: 1.75rem; - } - - .sidebar-col + .sidebar-col { - margin-top: 1.75em; - } - - .sidebar-col > a { - display: block; - - font-size: 0.8rem; - font-weight: bold; - } - - .sidebar-menu { - padding: 0; - margin: 0.5em 0 0; - - list-style: none; - - font-size: 0.7rem; - } - - .sidebar-menu li { - margin: 0; - - line-height: 1.45; - } - - .sidebar-menu a { - display: block; - - padding: 0.25em 0; - } -} - -/* override default prism theme */ -code[class*="language-"], -pre[class*="language-"] { - white-space: pre-wrap; -} - -pre[class*="language-"] { - margin: 0; - padding: 0; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: initial; -} - -/* override default prism theme */ -code[class*="language-"], -pre[class*="language-"] { - white-space: pre-wrap; -} - -pre[class*="language-"] { - margin: 0; - padding: 0; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: initial; -} - -pre.language-correct, -pre.language-incorrect { - padding: 5px 10px; -} - -pre.language-correct { - background: #deeede; -} - -pre.language-incorrect { - background: #f4d3d3; -} - -pre.language-correct .token.operator, -pre.language-incorrect .token.operator { - background: none; -} +@import "http://github.com/blocks/common.css"; +@import "http://github.com/blocks/code.css"; +@import "http://github.com/blocks/header.css"; +@import "http://github.com/blocks/logo-list.css"; +@import "http://github.com/blocks/guide-content.css"; +@import "http://github.com/blocks/sidebar.css"; +@import "http://github.com/blocks/chapter.css"; +@import "http://github.com/blocks/footer.css"; +@import "http://github.com/blocks/prism.css"; From bebe28b0b9d45ed7395693a075f64a822412ab94 Mon Sep 17 00:00:00 2001 From: Shabalin Nikolai Date: Wed, 27 Oct 2021 08:05:02 +0300 Subject: [PATCH 36/55] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D1=8F=D0=B5?= =?UTF-8?q?=D1=82=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5=D1=80=D1=8B=20=D1=88?= =?UTF-8?q?=D1=80=D0=B8=D1=84=D1=82=D0=B0,=20=D0=BA=D0=BE=D1=82=D0=BE?= =?UTF-8?q?=D1=80=D1=8B=D0=B5=20=D0=BD=D0=B8=D0=BA=D0=BE=D0=B3=D0=B4=D0=B0?= =?UTF-8?q?=20=D0=BD=D0=B5=20=D1=81=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=B0?= =?UTF-8?q?=D1=8E=D1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/blocks/common.css | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/css/blocks/common.css b/css/blocks/common.css index 4ac5aee..3f520f6 100644 --- a/css/blocks/common.css +++ b/css/blocks/common.css @@ -5,7 +5,6 @@ } html { - font-size: 16px; scroll-behavior: smooth; } @@ -78,15 +77,3 @@ ul li { clip: rect(0, 0, 0, 0); clip-path: inset(100%); } - -@media (min-width: 38em) { - html { - font-size: 20px; - } -} - -@media (min-width: 38em) { - html { - font-size: 20px; - } -} From cf4aa51e72fa7ae997075bb1d15937d7c753df1d Mon Sep 17 00:00:00 2001 From: Shabalin Nikolai Date: Wed, 27 Oct 2021 08:05:55 +0300 Subject: [PATCH 37/55] =?UTF-8?q?=D0=94=D0=B5=D0=BA=D0=BE=D0=BC=D0=BF?= =?UTF-8?q?=D0=BE=D0=B7=D0=B8=D1=80=D1=83=D0=B5=D1=82=20=D1=81=D0=BE=D0=B1?= =?UTF-8?q?=D0=B8=D1=80=D0=B0=D1=82=D0=B5=D0=BB=D1=8C=D0=BD=D0=BE=D0=B5=20?= =?UTF-8?q?=D1=81=D0=B2=D0=BE=D0=B9=D1=81=D1=82=D0=B2=D0=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/blocks/common.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css/blocks/common.css b/css/blocks/common.css index 3f520f6..3d4e584 100644 --- a/css/blocks/common.css +++ b/css/blocks/common.css @@ -10,10 +10,10 @@ html { body { margin: 0; - - font: 17px/1.6 "Helvetica", "Arial", sans-serif; + font-size: 16px; + line-height: 1.6; + font-family: "Helvetica", "Arial", sans-serif; color: #5a5a5a; - background-color: #ffffff; } From 498b6fe9110bde950341dd840df544b9704a89ef Mon Sep 17 00:00:00 2001 From: Shabalin Nikolai Date: Wed, 27 Oct 2021 08:06:43 +0300 Subject: [PATCH 38/55] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D1=8F=D0=B5?= =?UTF-8?q?=D1=82=20=D0=BB=D0=B8=D1=88=D0=BD=D0=B8=D0=B5=20=D0=BF=D1=80?= =?UTF-8?q?=D0=BE=D0=B1=D0=B5=D0=BB=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/blocks/common.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/css/blocks/common.css b/css/blocks/common.css index 3d4e584..cc0a891 100644 --- a/css/blocks/common.css +++ b/css/blocks/common.css @@ -33,7 +33,6 @@ h1, h2, h3 { margin: 0; - font-weight: normal; color: #424242; letter-spacing: -0.025em; @@ -71,9 +70,7 @@ ul li { margin: -1px; padding: 0; overflow: hidden; - border: 0; - clip: rect(0, 0, 0, 0); clip-path: inset(100%); } From e56b23e7c8c52612fcd94a461103dacb025216d0 Mon Sep 17 00:00:00 2001 From: Shabalin Nikolai Date: Wed, 27 Oct 2021 08:07:10 +0300 Subject: [PATCH 39/55] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D1=8F=D0=B5?= =?UTF-8?q?=D1=82=20=D0=BB=D0=B8=D1=88=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=B5?= =?UTF-8?q?=D1=80=D0=B5=D0=BD=D0=BE=D1=81=D1=8B=20=D1=81=D1=82=D1=80=D0=BE?= =?UTF-8?q?=D0=BA=20=D0=B2=20code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/blocks/code.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/css/blocks/code.css b/css/blocks/code.css index 7b3d709..662bc70 100644 --- a/css/blocks/code.css +++ b/css/blocks/code.css @@ -5,10 +5,8 @@ pre { code { padding: 2px 4px; - font-size: 95%; color: #d44950; - background-color: #f7f7f9; border-radius: 0.2rem; } @@ -16,16 +14,13 @@ code { pre { display: block; margin: 0 0 1rem; - line-height: 1.4; white-space: pre-wrap; } pre code { padding: 0; - color: inherit; - background-color: transparent; border: 0; } From 8bc07e602fc0e8666d5e374b999dfdd2bf74012d Mon Sep 17 00:00:00 2001 From: Shabalin Nikolai Date: Wed, 27 Oct 2021 08:08:59 +0300 Subject: [PATCH 40/55] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D1=8F=D0=B5?= =?UTF-8?q?=D1=82=20=D0=BB=D0=B8=D1=88=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=B5?= =?UTF-8?q?=D1=80=D0=B5=D0=BD=D0=BE=D1=81=D1=8B=20=D1=81=D1=82=D1=80=D0=BE?= =?UTF-8?q?=D0=BA=20=D0=B2=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/blocks/header.css | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/css/blocks/header.css b/css/blocks/header.css index f3c21eb..f7f16d3 100644 --- a/css/blocks/header.css +++ b/css/blocks/header.css @@ -1,8 +1,6 @@ header { padding: 1rem 1rem 6rem; - text-align: center; - background-color: #312785; background-image: repeating-linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px), repeating-linear-gradient(-150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px); background-size: 82px 47px; @@ -10,13 +8,11 @@ header { header h1 { margin: 0 0 0.25rem; - color: #ffffff; } header p { margin-top: 0; - font-size: 1.1rem; } @@ -35,10 +31,3 @@ header a:visited { padding-bottom: 4rem; } } - -@media (min-width: 38em) { - header { - padding-bottom: 4rem; - } -} - From 0fa61e70ff11380f83cc6362819f0c9c366a1e73 Mon Sep 17 00:00:00 2001 From: Shabalin Nikolai Date: Wed, 27 Oct 2021 08:09:12 +0300 Subject: [PATCH 41/55] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D1=8F=D0=B5?= =?UTF-8?q?=D1=82=20=D0=BB=D0=B8=D1=88=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=B5?= =?UTF-8?q?=D1=80=D0=B5=D0=BD=D0=BE=D1=81=D1=8B=20=D1=81=D1=82=D1=80=D0=BE?= =?UTF-8?q?=D0=BA=20=D0=B2=20logo-list?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/blocks/logo-list.css | 1 - 1 file changed, 1 deletion(-) diff --git a/css/blocks/logo-list.css b/css/blocks/logo-list.css index f2f4966..6c40a66 100644 --- a/css/blocks/logo-list.css +++ b/css/blocks/logo-list.css @@ -9,7 +9,6 @@ justify-content: space-around; margin: 0; padding: 0; - list-style: none; } From 82fedcf106cffbc0059f892944daf9e2876e7ce0 Mon Sep 17 00:00:00 2001 From: Shabalin Nikolai Date: Wed, 27 Oct 2021 08:09:57 +0300 Subject: [PATCH 42/55] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D1=8F=D0=B5?= =?UTF-8?q?=D1=82=20=D0=BB=D0=B8=D1=88=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=B5?= =?UTF-8?q?=D1=80=D0=B5=D0=BD=D0=BE=D1=81=D1=8B=20=D1=81=D1=82=D1=80=D0=BE?= =?UTF-8?q?=D0=BA=20=D0=B2=20sidebar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/blocks/sidebar.css | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/css/blocks/sidebar.css b/css/blocks/sidebar.css index 94cca20..d9b8d5d 100644 --- a/css/blocks/sidebar.css +++ b/css/blocks/sidebar.css @@ -1,7 +1,6 @@ .sidebar { display: flex; flex-direction: column; - width: 100%; } @@ -35,7 +34,6 @@ .sidebar { flex-direction: row; flex-wrap: wrap; - padding: 2rem 0; } @@ -54,15 +52,12 @@ position: sticky; top: 0; bottom: 0; - flex-direction: column; flex-wrap: nowrap; align-self: flex-start; - width: 230px; height: 100vh; padding: 0 1rem; - overflow-y: auto; line-height: 1.25; border-right: 1px solid #e5e5e5; @@ -70,7 +65,6 @@ .sidebar-col { flex-shrink: 0; - width: 100%; padding: 0; } @@ -97,21 +91,17 @@ .sidebar-menu { padding: 0; margin: 0.5em 0 0; - list-style: none; - font-size: 0.7rem; } .sidebar-menu li { margin: 0; - line-height: 1.45; } .sidebar-menu a { display: block; - padding: 0.25em 0; } } From 72b5e9a30d197f21dd94185ce6ee6ae466dbeaef Mon Sep 17 00:00:00 2001 From: Shabalin Nikolai Date: Wed, 27 Oct 2021 08:10:33 +0300 Subject: [PATCH 43/55] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D1=8F=D0=B5?= =?UTF-8?q?=D1=82=20=D0=BB=D0=B8=D1=88=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=B5?= =?UTF-8?q?=D1=80=D0=B5=D0=BD=D0=BE=D1=81=D1=8B=20=D1=81=D1=82=D1=80=D0=BE?= =?UTF-8?q?=D0=BA=20=D0=B2=20chapter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/blocks/chapter.css | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/css/blocks/chapter.css b/css/blocks/chapter.css index 535e053..92cd3e1 100644 --- a/css/blocks/chapter.css +++ b/css/blocks/chapter.css @@ -19,7 +19,6 @@ .chapter-part { display: flex; flex-direction: column; - border-bottom: 1px solid #e5e5e5; } @@ -53,15 +52,6 @@ } } -@media (min-width: 38em) { - .chapter h2 { - padding: 2rem 2rem 2.5rem; - } - - .chapter-part-col { - padding: 2rem; - } -} @media (min-width: 48em) { .chapter h2 { From 4daaec58bf1eaa3b38c15b79a81e954e4703267f Mon Sep 17 00:00:00 2001 From: Shabalin Nikolai Date: Wed, 27 Oct 2021 08:10:55 +0300 Subject: [PATCH 44/55] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D1=8F=D0=B5?= =?UTF-8?q?=D1=82=20=D0=BB=D0=B8=D1=88=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=B5?= =?UTF-8?q?=D1=80=D0=B5=D0=BD=D0=BE=D1=81=D1=8B=20=D1=81=D1=82=D1=80=D0=BE?= =?UTF-8?q?=D0=BA=20=D0=B2=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/blocks/footer.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/css/blocks/footer.css b/css/blocks/footer.css index debd653..338eb6c 100644 --- a/css/blocks/footer.css +++ b/css/blocks/footer.css @@ -1,6 +1,5 @@ footer { padding: 2rem; - background-color: #2d2d44; } @@ -31,7 +30,6 @@ footer { .icon { min-width: 2rem; min-height: 2rem; - background-repeat: no-repeat; background-position: center; background-size: calc(100% - 5px); @@ -62,6 +60,5 @@ footer { display: inline-block; width: 91px; height: 16px; - background-image: url("http://github.com/img/github.svg"); } From 892bddc3f67a606edf4ac128e1cda806222171f5 Mon Sep 17 00:00:00 2001 From: Shabalin Nikolai Date: Wed, 27 Oct 2021 16:45:36 +0300 Subject: [PATCH 45/55] =?UTF-8?q?=D0=A7=D0=B8=D0=BD=D0=B8=D1=82=20=D1=81?= =?UTF-8?q?=D1=82=D0=B8=D0=BB=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/blocks/chapter.css | 84 ------ css/blocks/code.css | 26 -- css/blocks/common.css | 76 ------ css/blocks/footer.css | 64 ----- css/blocks/guide-content.css | 4 - css/blocks/header.css | 33 --- css/blocks/logo-list.css | 18 -- css/blocks/prism.css | 49 ---- css/blocks/sidebar.css | 108 -------- css/style.css | 495 ++++++++++++++++++++++++++++++++++- 10 files changed, 486 insertions(+), 471 deletions(-) delete mode 100644 css/blocks/chapter.css delete mode 100644 css/blocks/code.css delete mode 100644 css/blocks/common.css delete mode 100644 css/blocks/footer.css delete mode 100644 css/blocks/guide-content.css delete mode 100644 css/blocks/header.css delete mode 100644 css/blocks/logo-list.css delete mode 100644 css/blocks/prism.css delete mode 100644 css/blocks/sidebar.css diff --git a/css/blocks/chapter.css b/css/blocks/chapter.css deleted file mode 100644 index 92cd3e1..0000000 --- a/css/blocks/chapter.css +++ /dev/null @@ -1,84 +0,0 @@ -.chapters { - width: 100%; -} - -.chapter h2 { - padding: 2rem 1rem; - word-break: break-word; - background-color: #e5e5e5; -} - -.chapter h3[id]::before { - display: block; - height: 2rem; - margin-top: -2rem; - visibility: hidden; - content: ""; -} - -.chapter-part { - display: flex; - flex-direction: column; - border-bottom: 1px solid #e5e5e5; -} - -.chapter-part-col { - padding: 2rem 1rem; -} - -.chapter-part-col figure { - margin: 0 1rem 0 0; -} - -.chapter-part-col p { - max-width: 32rem; -} - -.chapter-part-col + .chapter-part-col { - border-top: 1px solid #e5e5e5; -} - -.gray-bgcolor { - background-color: #fafafa; -} - -@media (min-width: 38em) { - .chapter h2 { - padding: 2rem 2rem 2.5rem; - } - - .chapter-part-col { - padding: 2rem; - } -} - - -@media (min-width: 48em) { - .chapter h2 { - padding: 2rem 3rem 2.5rem; - } - - .chapter-part { - flex-direction: row; - } - - .chapter-part-col { - width: 50%; - padding: 3rem 1.5rem; - } - - .chapter-part-col--full-width { - width: 100%; - } - - .chapter-part-col + .chapter-part-col { - border-top: 0; - } -} - -@media (min-width: 75em) { - .chapters { - width: calc(100% - 230px); - } -} - diff --git a/css/blocks/code.css b/css/blocks/code.css deleted file mode 100644 index 662bc70..0000000 --- a/css/blocks/code.css +++ /dev/null @@ -1,26 +0,0 @@ -code, -pre { - font-family: "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; -} - -code { - padding: 2px 4px; - font-size: 95%; - color: #d44950; - background-color: #f7f7f9; - border-radius: 0.2rem; -} - -pre { - display: block; - margin: 0 0 1rem; - line-height: 1.4; - white-space: pre-wrap; -} - -pre code { - padding: 0; - color: inherit; - background-color: transparent; - border: 0; -} diff --git a/css/blocks/common.css b/css/blocks/common.css deleted file mode 100644 index cc0a891..0000000 --- a/css/blocks/common.css +++ /dev/null @@ -1,76 +0,0 @@ -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; -} - -body { - margin: 0; - font-size: 16px; - line-height: 1.6; - font-family: "Helvetica", "Arial", sans-serif; - color: #5a5a5a; - background-color: #ffffff; -} - -a:link, -a:visited { - color: #3f3ccb; - text-decoration: none; -} - -a:hover, -a:focus { - color: #302683; - text-decoration: underline; -} - -h1, -h2, -h3 { - margin: 0; - font-weight: normal; - color: #424242; - letter-spacing: -0.025em; -} - -h2, -h3, -h4 { - line-height: 1.2; -} - -h1 { - font-size: 3rem; - line-height: 1.3; -} - -h2 { - font-size: 2.5rem; -} - -h3 { - font-size: 1.75rem; - scroll-margin-top: 20px; -} - -ul li { - margin-bottom: 0.25rem; -} - -.visually-hidden { - position: absolute; - - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - overflow: hidden; - border: 0; - clip: rect(0, 0, 0, 0); - clip-path: inset(100%); -} diff --git a/css/blocks/footer.css b/css/blocks/footer.css deleted file mode 100644 index 338eb6c..0000000 --- a/css/blocks/footer.css +++ /dev/null @@ -1,64 +0,0 @@ -footer { - padding: 2rem; - background-color: #2d2d44; -} - -.contacts { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.logo-full { - display: inline-block; - width: 161px; -} - -.social-icons { - display: flex; - justify-content: space-between; - align-items: center; - margin: 0.5rem 0 1rem 0; -} - -.social-icons, -.github { - font-size: 0; -} - -.icon { - min-width: 2rem; - min-height: 2rem; - background-repeat: no-repeat; - background-position: center; - background-size: calc(100% - 5px); - opacity: 0.5; -} - -.icon:hover { - opacity: 1; -} - -.icon-vk { - background-image: url("http://github.com/img/icon-vkontakte.svg"); -} - -.icon-fb { - background-image: url("http://github.com/img/icon-facebook.svg"); -} - -.icon-tw { - background-image: url("http://github.com/img/icon-twitter.svg"); -} - -.icon-ig { - background-image: url("http://github.com/img/icon-instagram.svg"); -} - -.github-link { - display: inline-block; - width: 91px; - height: 16px; - background-image: url("http://github.com/img/github.svg"); -} diff --git a/css/blocks/guide-content.css b/css/blocks/guide-content.css deleted file mode 100644 index 95478c2..0000000 --- a/css/blocks/guide-content.css +++ /dev/null @@ -1,4 +0,0 @@ -.guide-content { - display: flex; - flex-wrap: wrap; -} diff --git a/css/blocks/header.css b/css/blocks/header.css deleted file mode 100644 index f7f16d3..0000000 --- a/css/blocks/header.css +++ /dev/null @@ -1,33 +0,0 @@ -header { - padding: 1rem 1rem 6rem; - text-align: center; - background-color: #312785; - background-image: repeating-linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px), repeating-linear-gradient(-150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px); - background-size: 82px 47px; -} - -header h1 { - margin: 0 0 0.25rem; - color: #ffffff; -} - -header p { - margin-top: 0; - font-size: 1.1rem; -} - -header a:link, -header a:visited { - color: #ffffff; -} - -.logo { - width: 300px; - height: 300px; -} - -@media (min-width: 38em) { - header { - padding-bottom: 4rem; - } -} diff --git a/css/blocks/logo-list.css b/css/blocks/logo-list.css deleted file mode 100644 index 6c40a66..0000000 --- a/css/blocks/logo-list.css +++ /dev/null @@ -1,18 +0,0 @@ -.logo-list { - max-width: 550px; - margin: 50px auto; -} - -.logo-list ul { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - margin: 0; - padding: 0; - list-style: none; -} - -.logo-list li { - margin-right: 10px; - margin-left: 10px; -} diff --git a/css/blocks/prism.css b/css/blocks/prism.css deleted file mode 100644 index 40979f6..0000000 --- a/css/blocks/prism.css +++ /dev/null @@ -1,49 +0,0 @@ -/* override default prism theme */ -code[class*="language-"], -pre[class*="language-"] { - white-space: pre-wrap; -} - -pre[class*="language-"] { - margin: 0; - padding: 0; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: initial; -} - -/* override default prism theme */ -code[class*="language-"], -pre[class*="language-"] { - white-space: pre-wrap; -} - -pre[class*="language-"] { - margin: 0; - padding: 0; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: initial; -} - -pre.language-correct, -pre.language-incorrect { - padding: 5px 10px; -} - -pre.language-correct { - background: #deeede; -} - -pre.language-incorrect { - background: #f4d3d3; -} - -pre.language-correct .token.operator, -pre.language-incorrect .token.operator { - background: none; -} diff --git a/css/blocks/sidebar.css b/css/blocks/sidebar.css deleted file mode 100644 index d9b8d5d..0000000 --- a/css/blocks/sidebar.css +++ /dev/null @@ -1,108 +0,0 @@ -.sidebar { - display: flex; - flex-direction: column; - width: 100%; -} - -.sidebar a { - display: block; - color: #5a5a5a; -} - -.sidebar a:hover { - color: #3f3ccb; -} - -.sidebar-col { - padding: 2rem 1rem; -} - -.sidebar-col + .sidebar-col { - border-top: 1px solid #e5e5e5; -} - -.sidebar-col > a { - font-size: 1.75rem; - line-height: 1.25; -} - -.sidebar-menu { - padding-left: 1rem; -} - -@media (min-width: 48em) { - .sidebar { - flex-direction: row; - flex-wrap: wrap; - padding: 2rem 0; - } - - .sidebar-col { - width: 50%; - padding: 1rem 3rem; - } - - .sidebar-col + .sidebar-col { - border-top: 0; - } -} - -@media (min-width: 75em) { - .sidebar { - position: sticky; - top: 0; - bottom: 0; - flex-direction: column; - flex-wrap: nowrap; - align-self: flex-start; - width: 230px; - height: 100vh; - padding: 0 1rem; - overflow-y: auto; - line-height: 1.25; - border-right: 1px solid #e5e5e5; - } - - .sidebar-col { - flex-shrink: 0; - width: 100%; - padding: 0; - } - - .sidebar-col-first { - padding-top: 1.75rem; - } - - .sidebar-col-last { - padding-bottom: 1.75rem; - } - - .sidebar-col + .sidebar-col { - margin-top: 1.75em; - } - - .sidebar-col > a { - display: block; - - font-size: 0.8rem; - font-weight: bold; - } - - .sidebar-menu { - padding: 0; - margin: 0.5em 0 0; - list-style: none; - font-size: 0.7rem; - } - - .sidebar-menu li { - margin: 0; - line-height: 1.45; - } - - .sidebar-menu a { - display: block; - padding: 0.25em 0; - } -} - diff --git a/css/style.css b/css/style.css index fb866f3..df96900 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,486 @@ -@import "http://github.com/blocks/common.css"; -@import "http://github.com/blocks/code.css"; -@import "http://github.com/blocks/header.css"; -@import "http://github.com/blocks/logo-list.css"; -@import "http://github.com/blocks/guide-content.css"; -@import "http://github.com/blocks/sidebar.css"; -@import "http://github.com/blocks/chapter.css"; -@import "http://github.com/blocks/footer.css"; -@import "http://github.com/blocks/prism.css"; +/* Common */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + font-size: 16px; + line-height: 1.6; + font-family: "Helvetica", "Arial", sans-serif; + color: #5a5a5a; + background-color: #ffffff; +} + +a:link, +a:visited { + color: #3f3ccb; + text-decoration: none; +} + +a:hover, +a:focus { + color: #302683; + text-decoration: underline; +} + +h1, +h2, +h3 { + margin: 0; + font-weight: normal; + color: #424242; + letter-spacing: -0.025em; +} + +h2, +h3, +h4 { + line-height: 1.2; +} + +h1 { + font-size: 3rem; + line-height: 1.3; +} + +h2 { + font-size: 2.5rem; +} + +h3 { + font-size: 1.75rem; + scroll-margin-top: 20px; +} + +ul li { + margin-bottom: 0.25rem; +} + +.visually-hidden { + position: absolute; + + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + border: 0; + clip: rect(0, 0, 0, 0); + clip-path: inset(100%); +} + +/* Code */ + +code, +pre { + font-family: "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; +} + +code { + padding: 2px 4px; + font-size: 95%; + color: #d44950; + background-color: #f7f7f9; + border-radius: 0.2rem; +} + +pre { + display: block; + margin: 0 0 1rem; + line-height: 1.4; + white-space: pre-wrap; +} + +pre code { + padding: 0; + color: inherit; + background-color: transparent; + border: 0; +} + +/* Header */ + +header { + padding: 1rem 1rem 6rem; + text-align: center; + background-color: #312785; + background-image: repeating-linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px), repeating-linear-gradient(-150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px); + background-size: 82px 47px; +} + +header h1 { + margin: 0 0 0.25rem; + color: #ffffff; +} + +header p { + margin-top: 0; + font-size: 1.1rem; +} + +header a:link, +header a:visited { + color: #ffffff; +} + +.logo { + width: 300px; + height: 300px; +} + +@media (min-width: 38em) { + header { + padding-bottom: 4rem; + } +} + +/* Logo list */ + +.logo-list { + max-width: 550px; + margin: 50px auto; +} + +.logo-list ul { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + margin: 0; + padding: 0; + list-style: none; +} + +.logo-list li { + margin-right: 10px; + margin-left: 10px; +} + +/* Gudie content */ + +.guide-content { + display: flex; + flex-wrap: wrap; +} + +/* Sidebar */ + +.sidebar { + display: flex; + flex-direction: column; + width: 100%; +} + +.sidebar a { + display: block; + color: #5a5a5a; +} + +.sidebar a:hover { + color: #3f3ccb; +} + +.sidebar-col { + padding: 2rem 1rem; +} + +.sidebar-col + .sidebar-col { + border-top: 1px solid #e5e5e5; +} + +.sidebar-col > a { + font-size: 1.75rem; + line-height: 1.25; +} + +.sidebar-menu { + padding-left: 1rem; +} + +@media (min-width: 48em) { + .sidebar { + flex-direction: row; + flex-wrap: wrap; + padding: 2rem 0; + } + + .sidebar-col { + width: 50%; + padding: 1rem 3rem; + } + + .sidebar-col + .sidebar-col { + border-top: 0; + } +} + +@media (min-width: 75em) { + .sidebar { + position: sticky; + top: 0; + bottom: 0; + flex-direction: column; + flex-wrap: nowrap; + align-self: flex-start; + width: 230px; + height: 100vh; + padding: 0 1rem; + overflow-y: auto; + line-height: 1.25; + border-right: 1px solid #e5e5e5; + } + + .sidebar-col { + flex-shrink: 0; + width: 100%; + padding: 0; + } + + .sidebar-col-first { + padding-top: 1.75rem; + } + + .sidebar-col-last { + padding-bottom: 1.75rem; + } + + .sidebar-col + .sidebar-col { + margin-top: 1.75em; + } + + .sidebar-col > a { + display: block; + + font-size: 0.8rem; + font-weight: bold; + } + + .sidebar-menu { + padding: 0; + margin: 0.5em 0 0; + list-style: none; + font-size: 0.7rem; + } + + .sidebar-menu li { + margin: 0; + line-height: 1.45; + } + + .sidebar-menu a { + display: block; + padding: 0.25em 0; + } +} + +/* Chapter */ + +.chapters { + width: 100%; +} + +.chapter h2 { + padding: 2rem 1rem; + word-break: break-word; + background-color: #e5e5e5; +} + +.chapter h3[id]::before { + display: block; + height: 2rem; + margin-top: -2rem; + visibility: hidden; + content: ""; +} + +.chapter-part { + display: flex; + flex-direction: column; + border-bottom: 1px solid #e5e5e5; +} + +.chapter-part-col { + padding: 2rem 1rem; +} + +.chapter-part-col figure { + margin: 0 1rem 0 0; +} + +.chapter-part-col p { + max-width: 32rem; +} + +.chapter-part-col + .chapter-part-col { + border-top: 1px solid #e5e5e5; +} + +.gray-bgcolor { + background-color: #fafafa; +} + +@media (min-width: 38em) { + .chapter h2 { + padding: 2rem 2rem 2.5rem; + } + + .chapter-part-col { + padding: 2rem; + } +} + + +@media (min-width: 48em) { + .chapter h2 { + padding: 2rem 3rem 2.5rem; + } + + .chapter-part { + flex-direction: row; + } + + .chapter-part-col { + width: 50%; + padding: 3rem 1.5rem; + } + + .chapter-part-col--full-width { + width: 100%; + } + + .chapter-part-col + .chapter-part-col { + border-top: 0; + } +} + +@media (min-width: 75em) { + .chapters { + width: calc(100% - 230px); + } +} + +/* Footer */ + +footer { + padding: 2rem; + background-color: #2d2d44; +} + +.contacts { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.logo-full { + display: inline-block; + width: 161px; +} + +.social-icons { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0.5rem 0 1rem 0; +} + +.social-icons, +.github { + font-size: 0; +} + +.icon { + min-width: 2rem; + min-height: 2rem; + background-repeat: no-repeat; + background-position: center; + background-size: calc(100% - 5px); + opacity: 0.5; +} + +.icon:hover { + opacity: 1; +} + +.icon-vk { + background-image: url("http://github.com/img/icon-vkontakte.svg"); +} + +.icon-fb { + background-image: url("http://github.com/img/icon-facebook.svg"); +} + +.icon-tw { + background-image: url("http://github.com/img/icon-twitter.svg"); +} + +.icon-ig { + background-image: url("http://github.com/img/icon-instagram.svg"); +} + +.github-link { + display: inline-block; + width: 91px; + height: 16px; + background-image: url("http://github.com/img/github.svg"); +} + +/* Prism */ + +/* override default prism theme */ +code[class*="language-"], +pre[class*="language-"] { + white-space: pre-wrap; +} + +pre[class*="language-"] { + margin: 0; + padding: 0; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: initial; +} + +/* override default prism theme */ +code[class*="language-"], +pre[class*="language-"] { + white-space: pre-wrap; +} + +pre[class*="language-"] { + margin: 0; + padding: 0; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: initial; +} + +pre.language-correct, +pre.language-incorrect { + padding: 5px 10px; +} + +pre.language-correct { + background: #deeede; +} + +pre.language-incorrect { + background: #f4d3d3; +} + +pre.language-correct .token.operator, +pre.language-incorrect .token.operator { + background: none; +} From 066499ff9568c3e95b8c208351d9276bb58a613a Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Wed, 27 Oct 2021 18:03:48 +0300 Subject: [PATCH 46/55] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D0=BB=D0=BE=D0=B3=D0=BE=20=D0=B4=D0=BB?= =?UTF-8?q?=D1=8F=20JS=20(#53)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Обновляет лого для JS * Удаляет лишние атрибуты * Делает три логотипа: HTML, CSS, JS * Сопоставит размеры JS-лого с остальными --- css/style.css | 7 +++++-- img/icon-css.svg | 1 + img/icon-html.svg | 1 + img/icon-javascript.svg | 1 + img/logo-html.svg | 1 - img/logo-js.svg | 2 +- index.html | 8 ++++++-- 7 files changed, 15 insertions(+), 6 deletions(-) create mode 100644 img/icon-css.svg create mode 100644 img/icon-html.svg create mode 100644 img/icon-javascript.svg delete mode 100644 img/logo-html.svg diff --git a/css/style.css b/css/style.css index df96900..3bd53e6 100644 --- a/css/style.css +++ b/css/style.css @@ -136,6 +136,10 @@ header a:visited { height: 300px; } +.logo-list-js { + margin: 11px 23px 0; +} + @media (min-width: 38em) { header { padding-bottom: 4rem; @@ -145,14 +149,13 @@ header a:visited { /* Logo list */ .logo-list { - max-width: 550px; margin: 50px auto; } .logo-list ul { display: flex; flex-wrap: wrap; - justify-content: space-around; + justify-content: center; margin: 0; padding: 0; list-style: none; diff --git a/img/icon-css.svg b/img/icon-css.svg new file mode 100644 index 0000000..3d8959a --- /dev/null +++ b/img/icon-css.svg @@ -0,0 +1 @@ +file_type_css \ No newline at end of file diff --git a/img/icon-html.svg b/img/icon-html.svg new file mode 100644 index 0000000..a0152d8 --- /dev/null +++ b/img/icon-html.svg @@ -0,0 +1 @@ +file_type_html \ No newline at end of file diff --git a/img/icon-javascript.svg b/img/icon-javascript.svg new file mode 100644 index 0000000..92316ce --- /dev/null +++ b/img/icon-javascript.svg @@ -0,0 +1 @@ + diff --git a/img/logo-html.svg b/img/logo-html.svg deleted file mode 100644 index 101e1ff..0000000 --- a/img/logo-html.svg +++ /dev/null @@ -1 +0,0 @@ -HTML5 Logo diff --git a/img/logo-js.svg b/img/logo-js.svg index d609063..3895f98 100644 --- a/img/logo-js.svg +++ b/img/logo-js.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/index.html b/index.html index efd2507..5df2a0b 100644 --- a/index.html +++ b/index.html @@ -41,12 +41,16 @@ From 343afcc8ebff142508942d6d971a91391f4fe4ba Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Wed, 27 Oct 2021 18:04:13 +0300 Subject: [PATCH 47/55] =?UTF-8?q?*=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20EditorConfig=20=D0=B2=20README.md=20(#56)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Приводит список конфигов к единому виду --- Readme.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/Readme.md b/Readme.md index 8d23780..871bf7a 100644 --- a/Readme.md +++ b/Readme.md @@ -1,5 +1,6 @@ -# Стиль кода Академии HTML -Стиль кода можно [посмотреть тут](https://codeguide.academy/). +# Стиль кода .html academy + +Это исходники, публичная версия на сайте [codeguide.academy](https://codeguide.academy/). ## Благодарности @@ -10,12 +11,11 @@ ## Лицензия -Лицензия MIT, смотрите файл `License.md`. - -## Конфигурации линтеров - -ESLint — https://github.com/htmlacademy/eslint-config-htmlacademy +[MIT](./License.md). -Stylelint — https://github.com/htmlacademy/stylelint-config-htmlacademy +## Правила линтеров -linthtml — https://github.com/htmlacademy/linthtml-config-htmlacademy +* [EditorConfig](.editorconfig) +* [ESLint](https://github.com/htmlacademy/eslint-config-htmlacademy) +* [Stylelint](https://github.com/htmlacademy/stylelint-config-htmlacademy) +* [HTMLHint](https://github.com/htmlacademy/htmlhint-config-htmlacademy) From bfd3876aef6f63d115a3acc8945e1bdc3085e817 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 9 Nov 2021 15:34:17 +0300 Subject: [PATCH 48/55] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D0=BF=D1=80=D0=BE=20=D0=B5=D0=B4=D0=B8?= =?UTF-8?q?=D0=BD=D0=B8=D1=86=D1=83=20=D0=B8=D0=B7=D0=BC=D0=B5=D1=80=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20=D0=B2=20=D0=BA=D0=B0=D1=81=D1=82=D0=BE?= =?UTF-8?q?=D0=BC=D0=BD=D1=8B=D1=85=20=D1=81=D0=B2=D0=BE=D0=B9=D1=81=D1=82?= =?UTF-8?q?=D0=B2=D0=B0=D1=85=20(#66)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/html-css.html b/html-css.html index eff6a65..cb8db70 100644 --- a/html-css.html +++ b/html-css.html @@ -870,22 +870,35 @@

    Повторяющиеся свойства

    Единицы измерения

    -

    Единицы измерения не указаны там, где в них нет необходимости.

    +
      +
    • Единицы измерения не указаны там, где в них нет необходимости.
      • +
    • В кастомных свойствах нужно указывать единицу измерения.
      • + 
    /* Хорошо */
+:root {
+  --size: 0px;
+}
+
 .element {
   border: 0;
   box-shadow: 0 1px 2px #cccccc, inset 0 1px 0 #ffffff;
   margin-top: 0;
+  width: calc(100% - var(--size));
 }
 
 /* Плохо */
+:root {
+  --size: 0;
+}
+
 .element {
   border: 0px;
   box-shadow: 0px 1px 2px #cccccc, inset 0px 1px 0 #ffffff;
   margin-top: 0px;
+  width: calc(100% - var(--size));
 }
    From ad1ae7ce150a5bbaf5c8eddfb35d426591f7a096 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 28 Dec 2021 17:20:44 +0300 Subject: [PATCH 49/55] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20sticky-footer=20(#63)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/css/style.css b/css/style.css index 3bd53e6..a125c80 100644 --- a/css/style.css +++ b/css/style.css @@ -8,15 +8,19 @@ html { scroll-behavior: smooth; + height: 100%; } body { margin: 0; + min-height: 100%; font-size: 16px; line-height: 1.6; font-family: "Helvetica", "Arial", sans-serif; color: #5a5a5a; background-color: #ffffff; + display: flex; + flex-direction: column; } a:link, @@ -373,6 +377,7 @@ header a:visited { footer { padding: 2rem; + margin-top: auto; background-color: #2d2d44; } From 522f0f7ece0122a0969f61ebdc625ee0bbdfe301 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 28 Dec 2021 17:20:52 +0300 Subject: [PATCH 50/55] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D1=8F=D0=B5?= =?UTF-8?q?=D1=82=20normalize=20(#64)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/normalize.css | 349 ---------------------------------------------- html-css.html | 1 - index.html | 1 - javascript.html | 1 - 4 files changed, 352 deletions(-) delete mode 100644 css/normalize.css diff --git a/css/normalize.css b/css/normalize.css deleted file mode 100644 index 192eb9c..0000000 --- a/css/normalize.css +++ /dev/null @@ -1,349 +0,0 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers. - */ - -body { - margin: 0; -} - -/** - * Render the `main` element consistently in IE. - */ - -main { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ - -img { - border-style: none; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} diff --git a/html-css.html b/html-css.html index cb8db70..02afb73 100644 --- a/html-css.html +++ b/html-css.html @@ -12,7 +12,6 @@ - diff --git a/index.html b/index.html index 5df2a0b..e1c162d 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,6 @@ - diff --git a/javascript.html b/javascript.html index e3917bc..64f8089 100644 --- a/javascript.html +++ b/javascript.html @@ -12,7 +12,6 @@ - From 9952b013ed8e86f83bb1cbb86105580367c96bc1 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 28 Dec 2021 17:21:00 +0300 Subject: [PATCH 51/55] =?UTF-8?q?=D0=A7=D0=B8=D0=BD=D0=B8=D1=82=20target?= =?UTF-8?q?=3D"=5Fblank"=20(#65)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 12 ++++++------ index.html | 10 +++++----- javascript.html | 16 ++++++++-------- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/html-css.html b/html-css.html index 02afb73..eaf18aa 100644 --- a/html-css.html +++ b/html-css.html @@ -581,7 +581,7 @@

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

    Валидность

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

    @@ -1077,21 +1077,21 @@

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

    HTML Academy
    - + GitHub
    diff --git a/index.html b/index.html index e1c162d..275e707 100644 --- a/index.html +++ b/index.html @@ -63,21 +63,21 @@ HTML Academy
    - + GitHub
    diff --git a/javascript.html b/javascript.html index 64f8089..cf17b2d 100644 --- a/javascript.html +++ b/javascript.html @@ -96,7 +96,7 @@

    Синтаксис

    Отступы, пробелы и переносы

    -
    Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
    +
    Для правильного форматирования используйте файл .editorconfig в вашем редакторе.

    Для отступов используются два пробела. Знак табуляции не используется

    @@ -247,7 +247,7 @@

    Именование

    Запрещено использовать имена переменных, которые используются во внешних областях видимости

    -

    Запрещено называть переменные и свойства ключевыми словами JS

    +

    Запрещено называть переменные и свойства ключевыми словами JS

    Запрещено использовать переменные, не объявленные ранее. При использовании переменной, объявленной в другом модуле в глобальной области видимости, нужно обращаться к ней как к свойству объекта window

    @@ -287,7 +287,7 @@

    Условные операторы

    В условиях не используется небезопасное отрицание, например использование ! в in или instanceof без скобок

    -

    Запрещено сравнение с NaN. Для проверки, является ли результат операции числовым, нужно использовать Number.isNaN

    +

    Запрещено сравнение с NaN. Для проверки, является ли результат операции числовым, нужно использовать Number.isNaN

    Запрещено использовать case без break или return в блоках switch

    @@ -555,21 +555,21 @@

    Регулярные выражения

    HTML Academy
    - + GitHub
    From 4c72ae2ad97db5db885a87a99da0b1700d43e242 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Wed, 29 Dec 2021 17:53:46 +0300 Subject: [PATCH 52/55] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D1=8F=D0=B5=D1=82=20=D0=B8=D1=81=D0=BF=D0=BE=D0=BB=D1=8C?= =?UTF-8?q?=D0=B7=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D1=86=D0=B2=D0=B5?= =?UTF-8?q?=D1=82=D0=BE=D0=B2=20(#67)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/html-css.html b/html-css.html index eaf18aa..dd6df48 100644 --- a/html-css.html +++ b/html-css.html @@ -668,7 +668,7 @@

    Структура объявления

    .block{margin-bottom: 0; margin-top: 0; font-size: 14px;line-height: 20; - color :red} + color :#ff0000} .element { background-color: #000000; } @@ -786,12 +786,12 @@

    Кавычки

    /* Хорошо */
 .field[type="text"] {
-  background-color: url("http://github.com/images/cat.jpg");
+  background-image: url("http://github.com/images/cat.jpg");
 }
 
 /* Плохо */
 .field[type=text] {
-  background-color: url(http://github.com/images/cat.jpg);
+  background-image: url(http://github.com/images/cat.jpg);
 }
    @@ -815,11 +815,6 @@

    Ведущий ноль и пробелы после background-color: rgba(0, 0, 0, 0.5); } -.element { - background-color: rgb(0, 0, 0); - color: rgba(0, 0, 0, 0.5); -} - /* Плохо */ .block { opacity: .5; @@ -827,7 +822,6 @@

    Ведущий ноль и пробелы после } .element { - background-color: rgb(0,0,0); color: rgba(0 ,0 ,0 ,0.5); } From ca5ef8642c24f32d8867c8b3ffbc14bd176ea095 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Wed, 12 Jan 2022 22:19:00 +0300 Subject: [PATCH 53/55] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D1=8F=D0=B5=D1=82=20=D0=BD=D0=B0=D0=B7=D0=B2=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D0=B5=20=D0=90=D0=BA=D0=B0=D0=B4=D0=B5=D0=BC=D0=B8=D0=B8?= =?UTF-8?q?=20(#68)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 6 +++--- index.html | 6 +++--- javascript.html | 6 +++--- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/html-css.html b/html-css.html index dd6df48..db77366 100644 --- a/html-css.html +++ b/html-css.html @@ -2,14 +2,14 @@ - Стиль кода Академии HTML + Стиль кода HTML Academy - + @@ -27,7 +27,7 @@ -

    Стиль кода Академии HTML

    +

    Стиль кода HTML Academy

    github.com/htmlacademy/codeguide

    diff --git a/index.html b/index.html index 275e707..e8fc7e6 100644 --- a/index.html +++ b/index.html @@ -2,14 +2,14 @@ - Стиль кода Академии HTML + Стиль кода HTML Academy - + @@ -28,7 +28,7 @@ -

    Стиль кода Академии HTML

    +

    Стиль кода HTML Academy

    github.com/htmlacademy/codeguide

    diff --git a/javascript.html b/javascript.html index cf17b2d..62bf3b1 100644 --- a/javascript.html +++ b/javascript.html @@ -2,14 +2,14 @@ - Стиль кода Академии HTML + Стиль кода HTML Academy - + @@ -35,7 +35,7 @@ -

    Стиль кода Академии HTML

    +

    Стиль кода HTML Academy

    github.com/htmlacademy/codeguide

    From f56ac575f488c1f2cfa407775adfaa1e0a8ca40d Mon Sep 17 00:00:00 2001 From: artem-ns2 Date: Thu, 10 Feb 2022 17:18:43 +0500 Subject: [PATCH 54/55] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D1=8F=D0=B5=D1=82=20=D1=81=D1=81=D1=8B=D0=BB=D0=BA=D1=83?= =?UTF-8?q?=20=D0=BD=D0=B0=20Primer=20Guidelines=20=D0=BE=D1=82=20GitHub?= =?UTF-8?q?=20(#71)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Readme.md b/Readme.md index 871bf7a..947d906 100644 --- a/Readme.md +++ b/Readme.md @@ -7,7 +7,7 @@ * [Code Guide](http://codeguide.co) by @mdo * [CSS Guidelines](http://cssguidelin.es) by Harry Roberts * [Idiomatic CSS](https://github.com/necolas/idiomatic-css) by Nicolas Gallagher -* [Primer Guidelines](https://styleguide.github.com/primer/principles/) by GitHub +* [Primer Guidelines](https://primer.style/css/) by GitHub ## Лицензия From d8665abb284a3a7ca93c7ed05e4fdc2f143afc23 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Wed, 28 Jun 2023 19:51:29 +0300 Subject: [PATCH 55/55] =?UTF-8?q?=D0=A3=D1=82=D0=BE=D1=87=D0=BD=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=B8=D1=81=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE?= =?UTF-8?q?=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=BE=D0=B4=D0=B8=D1=80?= =?UTF-8?q?=D0=BE=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/html-css.html b/html-css.html index db77366..8e52a6a 100644 --- a/html-css.html +++ b/html-css.html @@ -212,7 +212,7 @@

    Базовые части разметки

  • Корневой элемент <html> с языком документа lang
  • Метаинформация <head>
  • Заголовок документа <title>
    • -
  • Кодировка документа <meta charset="utf-8">. Кодировка символов на странице явно указана, чтобы обеспечить корректное отображение текста. Кодировка utf-8 предпочтительна.
    • +
  • Кодировка документа <meta charset="utf-8">. Кодировка символов на странице явно указана, чтобы обеспечить корректное отображение текста.
  • Тело документа <body>
    • @@ -234,6 +234,14 @@

    Базовые части разметки

    <title>Заголовок</title> Страница </html> + +<!-- Плохо --> +<!DOCTYPE html> +<html lang="ru"> + <head> + <meta charset="windows-1251"> + </head> +</html>