From c8ca72e4726f72a3a713ba08e1f93ea6562b181c Mon Sep 17 00:00:00 2001 From: Alexey Simonenko Date: Fri, 23 Jan 2026 20:33:59 +0300 Subject: [PATCH 01/13] =?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=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=D0=B0?= =?UTF-8?q?,=20=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B0=D0=B5=D1=82=20=D1=84?= =?UTF-8?q?=D0=BE=D1=80=D0=BC=D1=83=D0=BB=D0=B8=D1=80=D0=BE=D0=B2=D0=BA?= =?UTF-8?q?=D0=B8,=20=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B0=D0=B5=D1=82=20?= =?UTF-8?q?=D0=BF=D1=80=D0=B8=D0=BC=D0=B5=D1=80=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-css.html | 565 ++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 432 insertions(+), 133 deletions(-) diff --git a/html-css.html b/html-css.html index 8e52a6a..7a5e60b 100644 --- a/html-css.html +++ b/html-css.html @@ -51,6 +51,7 @@ HTML @@ -71,6 +74,7 @@ CSS @@ -95,13 +103,13 @@

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

-

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

+

Запоминать все правила необязательно — за этим следят линтеры.

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

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

+

Это конфигурации Академии. Они проверяют часть правил из этого кодгайда — и только их.

@@ -112,10 +120,7 @@

Код

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

-
    -
  • Файлы схожих типов группируются в папки: картинки, стили, скрипты, шрифты.
    • -
  • Если внутри папок файлов становится много или выделяются подгруппы, можно добавить вложенные папки.
    • -
+

Группируйте файлы по типу: картинки, стили, скрипты, шрифты. Если файлов много — добавляйте вложенные папки.

@@ -165,7 +170,7 @@

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

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

-

Код проекта соответствует параметрам EditorConfig:

+

Настройте EditorConfig, чтобы редактор автоматически форматировал код:

root = true
 
 [*]
@@ -206,14 +211,15 @@ 
HTML

           

             

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

-              
Минимальная обязательная структура HTML-документы состоит из:

+              
Каждый HTML-документ содержит:

               
    
-                
  • Современный тип документа <!DOCTYPE html>
    • 
-                
  • Корневой элемент <html> с языком документа lang
    • 
-                
  • Метаинформация <head>
    • 
-                
  • Заголовок документа <title>
    • 
-                
  • Кодировка документа <meta charset="utf-8">. Кодировка символов на странице явно указана, чтобы обеспечить корректное отображение текста.
    • 
-                
  • Тело документа <body>
    • 
+                
  • <!DOCTYPE html> — указывает браузеру использовать современный режим рендеринга.
    • 
+                
  • <html lang="ru"> — корневой элемент. Атрибут lang помогает скринридерам выбрать правильное произношение.
    • 
+                
  • <head> — метаинформация о документе: заголовок, стили, скрипты.
    • 
+                
  • <title> — заголовок вкладки в браузере и текст ссылки в поисковой выдаче.
    • 
+                
  • <meta charset="utf-8"> — кодировка документа. Указывайте явно, иначе браузер может неправильно отобразить текст.
    • 
+                
  • <meta name="viewport" content="width=device-width, initial-scale=1"> — без него страница не адаптируется под мобильные устройства.
    • 
+                
  • <body> — видимое содержимое страницы.
    • 
               

             

             

@@ -223,6 +229,7 @@ 
Базовые части разметки

 <html lang="ru">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Заголовок</title>
   </head>
   <body>Страница</body>
@@ -247,11 +254,58 @@ 
Базовые части разметки

             

           

 
+          

+            

+              
Семантические теги

+              
Используйте семантические теги вместо div — они помогают скринридерам озвучивать структуру страницы, а поисковикам лучше индексировать контент:

+              
    
+                
  • header — шапка страницы или секции
    • 
+                
  • nav — навигация. Скринридеры позволяют перейти к ней напрямую.
    • 
+                
  • main — основной контент, один на страницу. Скринридеры могут сразу перейти к нему.
    • 
+                
  • article — самодостаточный контент: статья, пост, карточка товара
    • 
+                
  • section — тематическая группировка с заголовком
    • 
+                
  • aside — дополнительный контент: сайдбар, блок «Читайте также»
    • 
+                
  • footer — подвал страницы или секции
    • 
+              

+            

+            

+              

+                
<!-- Хорошо -->
+<body>
+  <header>
+    <nav>…</nav>
+  </header>
+  <main>
+    <article>
+      <h1>Заголовок статьи</h1>
+      <section>
+        <h2>Раздел статьи</h2>
+      </section>
+    </article>
+    <aside>Сайдбар</aside>
+  </main>
+  <footer>…</footer>
+</body>
+
+<!-- Плохо -->
+<body>
+  <div class="header">
+    <div class="nav">…</div>
+  </div>
+  <div class="main">
+    <div class="article">…</div>
+    <div class="sidebar">…</div>
+  </div>
+  <div class="footer">…</div>
+</body>

+              

+            

+          

+
           

             

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

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

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

+              
Пишите теги, атрибуты и значения строчными буквами. Исключение — SVG-атрибуты (viewBox, preserveAspectRatio и другие) — они чувствительны к регистру.

             

             

               

@@ -284,11 +338,7 @@ 
Регистр тегов и атрибутов

           

             

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

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

+              
Размещайте каждый вложенный тег на новой строке с отступом — так видна структура документа. Текстовое содержимое остаётся на одной строке с тегами, чтобы не добавлять лишние пробелы в вёрстку.

             

             

               

@@ -326,11 +376,7 @@ 
Форматирование тегов

           

             

               
Двойные и одиночные теги

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

-              

+              
У двойных тегов есть открывающая и закрывающая части. Одиночные теги (img, input, br и другие) пишите без слэша в конце — это стандарт современного HTML.

             

             

               

@@ -363,10 +409,7 @@ 
Двойные и одиночные теги

           

             

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

-              
    
-                
  • Атрибут class идёт сразу после имени тега.
    • 
-                
  • Атрибуты идут в одном порядке, чтобы упростить их чтение.
    • 
-              

+              
Ставьте class сразу после имени тега. Соблюдайте одинаковый порядок во всём документе: class, src или href, data-*, остальные — так код легче читать.

             

             

               

@@ -391,7 +434,7 @@ 
Порядок атрибутов

           

             

               
Логические атрибуты

-              
Логические атрибуты записаны без значения и в единообразной последовательности во всём документе.

+              
Логические атрибуты (disabled, required, checked и другие) пишите без значения — так короче и стандарт это позволяет. Соблюдайте одинаковый порядок во всём документе.

             

             

               

@@ -408,7 +451,7 @@ 
Логические атрибуты

           

             

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

-              
В записи атрибутов нет пробелов вокруг знака «равно» =.

+              
Не ставьте пробелы вокруг знака = в атрибутах — так принято в HTML.

             

             

               

@@ -425,10 +468,7 @@ 
Форматирование атрибутов

           

             

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

-              
    
-                
  • Значения атрибутов записаны в двойных кавычках.
    • 
-                
  • Вложенные кавычки в значениях являются одинарными.
    • 
-              

+              
Оборачивайте значения в двойные кавычки ("). Для вложенных используйте одинарные (').

             

             

               

@@ -456,11 +496,7 @@ 
Кавычки в атрибутах и в зн
             

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

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

+              
Указывайте размеры для изображений, видео и iframe — так браузер зарезервирует место и не будет перерисовывать страницу при загрузке. Единицы измерения в атрибутах не нужны.

             

             

               

@@ -481,10 +517,32 @@ 
Размеры замещаемых элементов
           

 
+          

+            

+              
Ленивая загрузка

+              
Добавляйте loading="lazy" изображениям и iframe за пределами видимой области при загрузке. Для изображений в верхней части страницы этот атрибут не нужен — он замедлит их загрузку.

+            

+            

+              

+                
<!-- Хорошо: изображение первого экрана -->
+<img src="hero.jpg" alt="…" width="1200" height="600">
+
+<!-- Хорошо: изображение ниже fold -->
+<img src="card.jpg" alt="…" width="400" height="300" loading="lazy">
+
+<!-- Хорошо: iframe карты -->
+<iframe src="https://maps.google.com" loading="lazy"></iframe>
+
+<!-- Плохо: lazy на первом экране -->
+<img src="hero.jpg" alt="…" loading="lazy">

+              

+            

+          

+
           

             

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

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

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

             

             

               

@@ -505,7 +563,7 @@ 
Разделители в имени класса

           

             

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

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

+              
Всегда указывайте атрибут method — он определяет, как браузер отправит данные формы.

             

             

               

@@ -524,9 +582,7 @@ 
Атрибут method в форме

           

             

               
Подключение стилей

-              

-                Стилевые файлы подключены с помощью <link> внутри <head>. При этом атрибут type для тега <link> не указан, так как его значение text/css устанавливается по умолчанию.
-              

+              
Подключайте стили через <link> внутри <head>. Атрибут type не нужен — браузер по умолчанию считает, что это text/css.

             

             

               

@@ -554,16 +610,11 @@ 
Подключение стилей

           

             

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

-              

-                Скрипты подключены в самом низу страницы, чтобы при её загрузке не блокировать отображение содержимого.
-              

-              

-                При подключении скриптов в теге <script> атрибут type не указан, так как его значение text/javascript устанавливается по умолчанию.
-              

+              
Подключайте обычные скрипты перед </body>, чтобы не блокировать отрисовку страницы. Если скрипт нужен в <head> — добавьте атрибут defer. Скрипты с type="module" можно подключать в <head> без defer — они загружаются асинхронно. Атрибут type для обычных скриптов не нужен.

             

             

               

-                
<!-- Хорошо -->
+                
<!-- Хорошо: обычный скрипт перед </body> -->
 <!DOCTYPE html>
 <html lang="ru">
   <head>…</head>
@@ -573,7 +624,25 @@ 
Подключение скриптов

   </body>
 </html>
 
-<!-- Плохо -->
+<!-- Хорошо: ES-модуль в head -->
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <script type="module" src="module.js"></script>
+  </head>
+  <body>…</body>
+</html>
+
+<!-- Хорошо: скрипт с defer в head -->
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <script src="app.js" defer></script>
+  </head>
+  <body>…</body>
+</html>
+
+<!-- Плохо: обычный скрипт в head без defer -->
 <!DOCTYPE html>
 <html lang="ru">
   <head>
@@ -588,9 +657,50 @@ 
Подключение скриптов

           

             

               
Валидность

-              

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

+              
Проверяйте HTML через валидатор — он найдёт ошибки, которые легко пропустить.

+            

+          

+
+          

+            

+              
Доступность

+              
Базовые правила доступности:

+              
    
+                
  • alt — описывайте содержимое изображения. Скринридер озвучит этот текст незрячему пользователю.
    • 
+                
  • Декоративные изображения: alt="" (пустой, но не отсутствующий) — скринридер пропустит их.
    • 
+                
  • Связывайте label с input через for/id или вложенностью — клик по подписи активирует поле.
    • 
+                
  • Кнопки-иконки без текста: добавляйте aria-label — иначе скринридер не сможет их озвучить.
    • 
+              

+            

+            

+              

+                
<!-- Хорошо: описательный alt -->
+<img src="cat.jpg" alt="Рыжий кот спит на подоконнике" width="400" height="300">
+
+<!-- Хорошо: декоративное изображение -->
+<img src="decoration.svg" alt="" width="100" height="100">
+
+<!-- Хорошо: связь label и input -->
+<label for="email">Эл. адрес</label>
+<input type="email" id="email" name="email">
+
+<!-- Хорошо: label оборачивает input -->
+<label>
+  Эл. адрес
+  <input type="email" name="email">
+</label>
+
+<!-- Хорошо: кнопка-иконка с aria-label -->
+<button type="button" aria-label="Закрыть">
+  <svg>…</svg>
+</button>
+
+<!-- Плохо -->
+<img src="cat.jpg" alt="картинка">
+<img src="cat.jpg">
+<input type="email" placeholder="Email">
+<button type="button"><svg>…</svg></button>

+              

             

           

         
@@ -601,9 +711,7 @@ 
CSS

           

             

               
Правило @import

-              

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

+              
Не используйте @import — он работает медленнее, чем <link>.

             

             

               

@@ -618,10 +726,37 @@ 
Правило @import

             

           

 
+          

+            

+              
Контейнерные запросы

+              
Контейнерные запросы позволяют компонентам адаптироваться к размеру родителя, а не viewport. Объявите контейнер через container и задайте стили в @container.

+            

+            

+              

+                
/* Хорошо */
+.card-wrapper {
+  container: card / inline-size;
+}
+
+@container card (min-width: 400px) {
+  .card {
+    display: flex;
+    gap: 16px;
+  }
+}
+
+/* Единицы контейнера */
+.card-title {
+  font-size: clamp(16px, 5cqi, 24px);
+}

+              

+            

+          

+
           

             

               
Регистр селекторов и свойств

-              
Селекторы и свойства записаны строчными буквами.

+              
Пишите селекторы и свойства строчными буквами — для единообразия.

             

             

               

@@ -647,14 +782,20 @@ 
Регистр селекторов и свойс
           

             

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

+              
Форматирование правил:

               
    
-                
  • Перед открывающейся фигурной скобкой стоит пробел. После скобки запись идёт с новой строки.
    • 
-                
  • Свойства стоят на отдельных строках.
    • 
-                
  • Свойства внутри блока имеют один внутренний отступ.
    • 
-                
  • После двоеточия стоит пробел. Перед двоеточием пробел не нужен.
    • 
-                
  • В конце объявления стоит точка с запятой.
    • 
-                
  • Закрывающая скобка стоит на новой строке и без отступа.
    • 
-                
  • Между блоками правил есть одна пустая строка.
    • 
+                
  • Перед { ставьте пробел, после — новая строка.
    • 
+                
  • Каждое свойство — на отдельной строке с отступом в 2 пробела.
    • 
+                
  • После : ставьте пробел, перед — нет.
    • 
+                
  • Завершайте каждое объявление ; — так проще добавлять новые свойства.
    • 
+                
  • } — на новой строке без отступа.
    • 
+                
  • Между блоками — одна пустая строка.
    • 
+              

+              
Вложенность (@media, @container, CSS nesting):

+              
    
+                
  • Увеличивайте отступ на 2 пробела для каждого уровня.
    • 
+                
  • Отделяйте вложенные блоки пустой строкой от свойств родителя.
    • 
+                
  • Ограничивайте глубину до 2–3 уровней — глубже читать сложно.
    • 
               

             

             

@@ -664,7 +805,7 @@ 
Структура объявления

   margin-bottom: 0;
   margin-top: 0;
   font-size: 14px;
-  line-height: 20;
+  line-height: 20px;
   color: #ff0000;
 }
 
@@ -675,11 +816,46 @@ 
Структура объявления

 /* Плохо */
 .block{margin-bottom: 0;
     margin-top: 0;
-  font-size: 14px;line-height: 20;
+  font-size: 14px;line-height: 20px;
   color :#ff0000}
 .element {
   background-color: #000000;
 }
+
+/* Хорошо: @media */
+.block {
+  padding: 10px;
+}
+
+@media (min-width: 768px) {
+  .block {
+    padding: 20px;
+  }
+}
+
+/* Хорошо: CSS nesting */
+.card {
+  padding: 16px;
+
+  & .title {
+    font-size: 24px;
+  }
+
+  &:hover {
+    background: #f0f0f0;
+  }
+}
+
+/* Плохо: слишком глубоко */
+.card {
+  & .header {
+    & .title {
+      & .icon {
+        /* 4 уровня — избыточно */
+      }
+    }
+  }
+}
 

               

             

@@ -688,11 +864,7 @@ 
Структура объявления

           

             

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

-              
    
-                
  • Имена классов записаны строчными буквами.
    • 
-                
  • Имена классов такие, что по ним можно быстро понять, какому элементу страницы задан класс. Избегайте сокращений, но не делайте их слишком длинными (более трёх слов).
    • 
-                
  • Для написания классов использованы английские слова и термины. В названиях классов и атрибутов нет транслита.
    • 
-              

+              
Пишите имена классов строчными буквами на английском. Название должно быть понятным, но не длиннее трёх слов. Избегайте сокращений и транслита.

             

             

               

@@ -714,7 +886,7 @@ 
Имена классов

           

             

               
Перенос селекторов

-              
Селекторы, разделённые запятой, записаны на новых строках.

+              
Размещайте каждый селектор группы на отдельной строке.

             

             

               

@@ -737,7 +909,7 @@ 
Перенос селекторов

           

             

               
Пробелы между комбинаторами

-              
До и после комбинатора между селекторами стоит один пробел.

+              
Ставьте пробелы до и после комбинаторов (+, >, ~) — так читабельнее.

             

             

               

@@ -756,11 +928,8 @@ 
Пробелы между комбинаторами

             

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

-              
    
-                
  • Цвета записаны строчными в 6-значном формате HEX.
    • 
-                
  • Шестнадцатеричное значение цвета не сокращено, а записано полностью из всех шести символов. Для записи использованы строчные буквы.
    • 
-                
  • Цвета могут быть записаны функциями rgba или hsla, если нужна прозрачность.
    • 
-              

+              
Записывайте цвета строчными в шестизначном HEX-формате (#ff0000, а не #f00) — так легче искать и заменять цвета в коде. Для прозрачности добавляйте альфа-канал в rgb() через слэш: rgb(0 0 0 / 0.5).

+              
Для дизайн-систем подойдёт oklch() — в нём легко создавать оттенки одного цвета, меняя только яркость.

             

             

               

@@ -768,7 +937,13 @@ 
Формат цветов

 .block {
   background-color: #ff0000;
   border-left-color: #00ff00;
-  color: rgba(0, 0, 0, 0.5);
+  color: rgb(0 0 0 / 0.5);
+}
+
+/* Хорошо: oklch для дизайн-систем */
+:root {
+  --primary: oklch(60% 0.15 250);
+  --primary-light: oklch(75% 0.12 250);
 }
 
 /* Плохо */
@@ -785,10 +960,7 @@ 
Формат цветов

           

             

               
Кавычки

-              
    
-                
  • Во всех случаях в стилях использованы двойные кавычки. 
    • 
-                
  • В необязательных случаях кавычки не опущены.
    • 
-              

+              
Используйте двойные кавычки (") — для единообразия с HTML. Не опускайте их, даже если можно.

             

             

               

@@ -810,23 +982,20 @@ 
Кавычки

           

             

               
Ведущий ноль и пробелы после запятых

-              
    
-                
  • Начальный ноль для значений не сокращён.
    • 
-                
  • После запятых в перечислениях стоит пробел.
    • 
-              

+              
Не сокращайте ноль перед точкой: пишите 0.5, а не .5. Ставьте пробел после запятых в функциях.

             

             

               

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

             

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

-              
    
-                
  • Свойства не повторяются в рамках одной декларации.
    • 
-                
  • Свойство может повторяться, если раньше описан сброс или общий случай.
    • 
-              

+              
Не дублируйте свойства в одном правиле. Исключение — когда сначала сбрасываете все значения (margin: 0), а затем уточняете (margin-left: 20px).

             

             

               

@@ -871,10 +1037,7 @@ 
Повторяющиеся свойства

             

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

-              
    
-                
  • Единицы измерения не указаны там, где в них нет необходимости.
    • 
-                
  • В кастомных свойствах нужно указывать единицу измерения.
    • 
-              

+              
Не указывайте единицы измерения для нулевых значений. В CSS-переменных (--size, --gap и других) единицы нужны всегда — иначе calc() не сработает.

             

             

               

@@ -910,7 +1073,7 @@ 
Единицы измерения

           

             

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

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

+              
Округляйте дробные значения до двух знаков после точки — большая точность избыточна.

             

             

               

@@ -931,10 +1094,7 @@ 
Дробные значения

           

             

               
!important

-              
    
-                
  • Ключевое слово !important не использовано для борьбы со специфичностью.
    • 
-                
  • Универсальные классы-хелперы могут использовать !important.
    • 
-              

+              
Не используйте !important для борьбы со специфичностью — лучше пересмотрите структуру селекторов. Исключение — универсальные классы-хелперы.

             

             

               

@@ -946,7 +1106,7 @@ 
!important

   margin: -1px !important;
   border: 0 !important;
   padding: 0 !important;
-  clip: rect(0 0 0 0) !important;
+  clip-path: inset(100%) !important;
   overflow: hidden !important;
 }
 
@@ -962,9 +1122,7 @@ 
!important

           

             

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

-              

-                Контент скрыт утилитарным классом visually-hidden, чтобы он был доступен для скринридеров и поисковиков.
-              

+              
Скрывайте контент классом visually-hidden — так он останется доступным для скринридеров и поисковиков.

             

             

               

@@ -978,7 +1136,6 @@ 
Доступное скрытие

   padding: 0;
   white-space: nowrap;
   clip-path: inset(100%);
-  clip: rect(0 0 0 0);
   overflow: hidden;
 }

               

@@ -999,36 +1156,169 @@ 
Доступное скрытие

             

           

 
+          

+            

+              
Фокус :focus-visible

+              
Используйте :focus-visible вместо :focus — он показывает фокус только при клавиатурной навигации. Никогда не убирайте фокус полностью.

+            

+            

+              

+                
/* Хорошо: фокус только для клавиатуры */
+.button:focus {
+  outline: none;
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Хорошо: кастомный фокус */
+.link:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgb(0 102 204 / 0.5);
+}
+
+/* Плохо: фокус убран совсем */
+.button:focus {
+  outline: none;
+}
+
+/* Плохо: фокус мешает при клике мышью */
+.button:focus {
+  outline: 3px solid blue;
+}

+              

+            

+          

+
+          

+            

+              
Кастомные свойства

+              
Выносите повторяющиеся значения (цвета, отступы, размеры) в кастомные свойства — изменения в одном месте применятся везде. Глобальные значения объявляйте в :root, локальные — в селекторе компонента. Используйте var() с фолбэком для безопасности.

+            

+            

+              

+                
/* Хорошо */
+:root {
+  --color-primary: #0066cc;
+  --spacing-md: 16px;
+}
+
+.button {
+  --button-padding: 8px 16px;
+
+  padding: var(--button-padding);
+  background-color: var(--color-primary);
+  color: var(--color-text, #ffffff);
+}
+
+/* Плохо */
+.button {
+  padding: 8px 16px;
+  background-color: #0066cc;
+}

+              

+            

+          

+
+          

+            

+              
Правило @keyframes

+              
Объявляйте @keyframes до правил, использующих анимацию — так код читается сверху вниз. Называйте анимации по действию: fade-in, slide-up. Используйте from/to для простых, проценты — для сложных.

+            

+            

+              

+                
/* Хорошо */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+.element {
+  animation: fade-in 0.3s ease-out;
+}
+
+/* Плохо */
+@keyframes a1 {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}

+              

+            

+          

+
+          

+            

+              
Правило @font-face

+              
Объявляйте @font-face в начале файла. Указывайте font-display: swap — текст появится сразу системным шрифтом, затем заменится на загруженный. Используйте WOFF2 — он поддерживается везде и весит меньше.

+            

+            

+              

+                
/* Хорошо */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("fonts/roboto-regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("fonts/roboto-bold.woff2") format("woff2");
+}
+
+/* Плохо */
+@font-face {
+  font-family: "Roboto";
+  src: url("fonts/roboto.ttf");
+}

+              

+            

+          

+
           

             

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

-              

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

+              
Группируйте свойства по смыслу — от влияющих на сетку к декоративным:

               
    
-                
  1. Позиционирование
    2. 
-                
  2. Блочная модель
    3. 
+                
  3. Кастомные свойства
    4. 
+                
  4. Позиционирование — влияет на положение элемента в потоке
    5. 
+                
  5. Блочная модель — определяет размеры и отступы
    6. 
                 
  6. Типографика
    7. 
                 
  7. Оформление
    8. 
                 
  8. Анимация
    9. 
+                
  9. Интерактивность
    10. 
                 
  10. Разное
    11. 
               

-              

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

-              

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

-              

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

-              

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

+              
Разделяйте группы пустой строкой. Сокращённые свойства ставьте перед подробными: сначала margin, потом margin-left.

             

             

               

                 
.declaration-order {
+  /* Кастомные свойства */
+  --element-color: #333333;
+
   /* Позиционирование */
   position: absolute;
   top: 0;
@@ -1038,12 +1328,16 @@ 
Порядок свойств

   z-index: 100;
 
   /* Блочная модель */
-  display: block;
-  float: right;
+  container: layout / inline-size;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
   width: 100px;
   height: 100px;
   margin: 10px;
   padding: 10px;
+  overflow: hidden;
 
   /* Типографика */
   font-family: "Arial", sans-serif;
@@ -1052,7 +1346,7 @@ 
Порядок свойств

   line-height: 20px;
   font-weight: 700;
   text-align: center;
-  color: #333333;
+  color: var(--element-color);
 
   /* Оформление */
   background-color: #f5f5f5;
@@ -1061,7 +1355,12 @@ 
Порядок свойств

   opacity: 1;
 
   /* Анимация */
-  transition: color 1s;
+  transition: color 0.3s;
+
+  /* Интерактивность */
+  cursor: pointer;
+  pointer-events: auto;
+  user-select: none;
 
   /* Разное */
   will-change: auto;

From 95c1ae9f13269139f75cf27abf6be58eeb8dd757 Mon Sep 17 00:00:00 2001
From: Alexey Simonenko 
Date: Fri, 23 Jan 2026 21:06:37 +0300
Subject: [PATCH 02/13] =?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=B8=D0=B7=20stylint=20=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=BD=D1=84=D0=B8=D0=B3=D0=B0=20=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=BF=D1=80=D0=BE=20id,=20font-weight=20=D0=B8?=
 =?UTF-8?q?=20=D1=83=D1=80=D0=BE=D0=B2=D0=B5=D0=BD=D1=8C=20=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=BE=D0=B6=D0=B5=D0=BD=D0=BD=D0=BE=D1=81=D1=82=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 html-css.html | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 65 insertions(+), 1 deletion(-)

diff --git a/html-css.html b/html-css.html
index 7a5e60b..907ee7a 100644
--- a/html-css.html
+++ b/html-css.html
@@ -78,6 +78,7 @@ 
             
  • Регистр селекторов и свойств
    • 
             
  • Структура объявления
    • 
             
  • Имена классов
    • 
+            
  • ID-селекторы
    • 
             
  • Перенос селекторов
    • 
             
  • Пробелы между комбинаторами
    • 
             
  • Формат цветов
    • 
@@ -92,6 +93,7 @@ 
             
  • Кастомные свойства
    • 
             
  • Правило @keyframes
    • 
             
  • Правило @font-face
    • 
+            
  • Свойство font-weight
    • 
             
  • Порядок свойств
    • 
           
         
    
@@ -795,7 +797,7 @@ 
    Структура объявления
    
               
      
                 
    • Увеличивайте отступ на 2 пробела для каждого уровня.
      • 
                 
    • Отделяйте вложенные блоки пустой строкой от свойств родителя.
      • 
-                
    • Ограничивайте глубину до 2–3 уровней — глубже читать сложно.
      • 
+                
    • Ограничивайте глубину до 2 уровней — глубже читать сложно.
      • 
               
    
             
    
             
    
@@ -883,6 +885,35 @@ 
    Имена классов
    
             
    
           
    
 
+          
    
+            
    
+              
    ID-селекторы
    
+              
    Не используйте ID-селекторы для стилизации — их специфичность слишком высока, что затрудняет переопределение стилей. Используйте классы.
    
+            
    
+            
    
+              
    
+                
    /* Хорошо */
+.header {
+  background-color: #333333;
+}
+
+.navigation {
+  display: flex;
+}
+
+/* Плохо */
+#header {
+  background-color: #333333;
+}
+
+#navigation {
+  display: flex;
+}
+
    
+              
    
+            
    
+          
    
+
           
    
             
    
               
    Перенос селекторов
    
@@ -1297,6 +1328,39 @@ 
    Правило @font-face
    
             
    
           
    
 
+          
    
+            
    
+              
    Свойство font-weight
    
+              
    Используйте числовые значения (400, 700) вместо ключевых слов normal и bold — они точнее и понятнее. Относительные значения bolder и lighter допустимы.
    
+            
    
+            
    
+              
    
+                
    /* Хорошо */
+.text {
+  font-weight: 400;
+}
+
+.text-bold {
+  font-weight: 700;
+}
+
+.text-relative {
+  font-weight: bolder;
+}
+
+/* Плохо */
+.text {
+  font-weight: normal;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
    
+              
    
+            
    
+          
    
+
           
    
             
    
               
    Порядок свойств
    

From 9e2be277d30efef23cc5da887c67a209afa2a44e Mon Sep 17 00:00:00 2001
From: Alexey Simonenko 
Date: Fri, 23 Jan 2026 21:10:05 +0300
Subject: [PATCH 03/13] =?UTF-8?q?=D0=A3=D0=B1=D0=B8=D1=80=D0=B0=D0=B5?=
 =?UTF-8?q?=D1=82=20=D0=BB=D0=B8=D1=88=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D1=8F=D1=81=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 html-css.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/html-css.html b/html-css.html
index 907ee7a..e4f38c8 100644
--- a/html-css.html
+++ b/html-css.html
@@ -218,7 +218,7 @@ 
    Базовые части разметки
    
                 
  • <!DOCTYPE html> — указывает браузеру использовать современный режим рендеринга.
    • 
                 
  • <html lang="ru"> — корневой элемент. Атрибут lang помогает скринридерам выбрать правильное произношение.
    • 
                 
  • <head> — метаинформация о документе: заголовок, стили, скрипты.
    • 
-                
  • <title> — заголовок вкладки в браузере и текст ссылки в поисковой выдаче.
    • 
+                
  • <title> — заголовок страницы.
    • 
                 
  • <meta charset="utf-8"> — кодировка документа. Указывайте явно, иначе браузер может неправильно отобразить текст.
    • 
                 
  • <meta name="viewport" content="width=device-width, initial-scale=1"> — без него страница не адаптируется под мобильные устройства.
    • 
                 
  • <body> — видимое содержимое страницы.
    • 
@@ -1367,8 +1367,8 @@ 
    Порядок свойств
    
               
    Группируйте свойства по смыслу — от влияющих на сетку к декоративным:
    
               
      
                 
    1. Кастомные свойства
      2. 
-                
    2. Позиционирование — влияет на положение элемента в потоке
      3. 
-                
    3. Блочная модель — определяет размеры и отступы
      4. 
+                
    4. Позиционирование
      5. 
+                
    5. Блочная модель
      6. 
                 
    6. Типографика
      7. 
                 
    7. Оформление
      8. 
                 
    8. Анимация
      9. 

From ae40e3d2f1060f693da663ac63bc2d8270c42a88 Mon Sep 17 00:00:00 2001
From: Alexey Simonenko 
Date: Fri, 23 Jan 2026 23:27:57 +0300
Subject: [PATCH 04/13] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D1=8F=D0=B5?=
 =?UTF-8?q?=D1=82=20=D0=B1=D0=BB=D0=BE=D0=BA=20=D0=BF=D1=80=D0=BE=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=BD=D1=82=D0=B5=D0=B9=D0=BD=D0=B5=D1=80=D0=BD=D1=8B?=
 =?UTF-8?q?=D0=B5=20=D0=B7=D0=B0=D0=BF=D1=80=D0=BE=D1=81=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 html-css.html | 28 ----------------------------
 1 file changed, 28 deletions(-)

diff --git a/html-css.html b/html-css.html
index e4f38c8..6422cd9 100644
--- a/html-css.html
+++ b/html-css.html
@@ -74,7 +74,6 @@ 
           CSS
           
    
           
    
 
-          
    
-            
    
-              
    Контейнерные запросы
    
-              
    Контейнерные запросы позволяют компонентам адаптироваться к размеру родителя, а не viewport. Объявите контейнер через container и задайте стили в @container.
    
-            
    
-            
    
-              
    
-                
    /* Хорошо */
-.card-wrapper {
-  container: card / inline-size;
-}
-
-@container card (min-width: 400px) {
-  .card {
-    display: flex;
-    gap: 16px;
-  }
-}
-
-/* Единицы контейнера */
-.card-title {
-  font-size: clamp(16px, 5cqi, 24px);
-}
    
-              
    
-            
    
-          
    
-
           
    
             
    
               
    Регистр селекторов и свойств
    

From d3d03737db2d70527a527efe487b29df1afb459c Mon Sep 17 00:00:00 2001
From: Alexey Simonenko 
Date: Fri, 23 Jan 2026 23:33:35 +0300
Subject: [PATCH 05/13] =?UTF-8?q?=D0=A0=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB?=
 =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D1=80=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=20?=
 =?UTF-8?q?=D1=81=D1=82=D1=80=D1=83=D0=BA=D1=82=D1=83=D1=80=D0=B0=20=D0=BE?=
 =?UTF-8?q?=D0=B1=D1=8A=D1=8F=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D0=B4=D0=B2=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 html-css.html | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/html-css.html b/html-css.html
index 6422cd9..f96d385 100644
--- a/html-css.html
+++ b/html-css.html
@@ -75,7 +75,8 @@ 
           
      
             
    • Правило @import
      • 
             
    • Регистр селекторов и свойств
      • 
-            
    • Структура объявления
      • 
+            
    • Форматирование правил
      • 
+            
    • Вложенность
      • 
             
    • Имена классов
      • 
             
    • ID-селекторы
      • 
             
    • Перенос селекторов
      • 
@@ -755,8 +756,7 @@ 
      Регистр селекторов и свойс
 
           
      
             
      
-              
      Структура объявления
      
-              
      Форматирование правил:
      
+              
      Форматирование правил
      
               
        
                 
      • Перед { ставьте пробел, после — новая строка.
        • 
                 
      • Каждое свойство — на отдельной строке с отступом в 2 пробела.
        • 
@@ -765,12 +765,6 @@ 
        Структура объявления
        
                 
      • } — на новой строке без отступа.
        • 
                 
      • Между блоками — одна пустая строка.
        • 
               
      
-              
      Вложенность (@media, @container, CSS nesting):
      
-              
        
-                
      • Увеличивайте отступ на 2 пробела для каждого уровня.
        • 
-                
      • Отделяйте вложенные блоки пустой строкой от свойств родителя.
        • 
-                
      • Ограничивайте глубину до 2 уровней — глубже читать сложно.
        • 
-              
      
             
      
             
      
               
      
@@ -795,8 +789,24 @@ 
      Структура объявления
      
 .element {
   background-color: #000000;
 }
+
    +
    +
    +
    -/* Хорошо: @media */ +
    +
    +

    Вложенность

    +

    Правила для @media, @container и CSS nesting:

    +
      +
    • Увеличивайте отступ на 2 пробела для каждого уровня.
      • +
    • Отделяйте вложенные блоки пустой строкой от свойств родителя.
      • +
    • Ограничивайте глубину до 2 уровней — глубже читать сложно.
      • +
    +
    +
    +
    + 
    /* Хорошо: @media */
 .block {
   padding: 10px;
 }

From 8e7fb96e95a85db449fd1d3ab97dd412cb9d93e3 Mon Sep 17 00:00:00 2001
From: Alexey Simonenko 
Date: Sun, 25 Jan 2026 21:51:59 +0300
Subject: [PATCH 06/13] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D1=8F=D0=B5=D1=82=20action=20=D0=B4=D0=BB=D1=8F=20=D1=84=D0=BE?=
 =?UTF-8?q?=D1=80=D0=BC=20=D0=B8=20noopener=20=D0=B4=D0=BB=D1=8F=20=D1=81?=
 =?UTF-8?q?=D1=81=D1=8B=D0=BB=D0=BE=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 html-css.html | 43 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/html-css.html b/html-css.html
index f96d385..413a16c 100644
--- a/html-css.html
+++ b/html-css.html
@@ -62,7 +62,8 @@ 
             
  • Размеры замещаемых элементов
    • 
             
  • Ленивая загрузка
    • 
             
  • Разделители в имени класса
    • 
-            
  • Атрибут method в форме
    • 
+            
  • Атрибуты action и method
    • 
+            
  • Безопасность внешних ссылок
    • 
             
  • Подключение стилей
    • 
             
  • Подключение скриптов
    • 
             
  • Валидность
    • 
@@ -564,23 +565,53 @@ 
    Разделители в имени класса
    
 
           
    
             
    
-              
    Атрибут method в форме
    
-              
    Всегда указывайте атрибут method — он определяет, как браузер отправит данные формы.
    
+              
    Атрибуты action и method
    
+              
    Указывайте оба атрибута явно:
    
+              
      
+                
    • action — куда отправляются данные. Без него форма отправится на текущий URL.
      • 
+                
    • method — как отправляются данные. Без него браузер использует GET, и данные попадут в URL.
      • 
+              
    
             
    
             
    
               
    
                 
    <!-- Хорошо -->
+<form action="/submit" method="post"></form>
+<form action="/search" method="get"></form>
+
+<!-- Плохо: нет action -->
 <form method="post"></form>
-<form method="get"></form>
 
-<!-- Плохо -->
-<form method=""></form>
+<!-- Плохо: нет method -->
+<form action="/submit"></form>
+
+<!-- Плохо: нет ни action, ни method -->
 <form></form>
                 
    
               
    
             
    
           
    
 
+          
    
+            
    
+              
+              
    Для ссылок с target="_blank" добавляйте rel="noopener" — это защита от атаки через window.opener, когда внешняя страница может получить доступ к вашей.
    
+            
    
+            
    
+              
    
+                
    <!-- Хорошо -->
+<a href="https://example.com" target="_blank" rel="noopener">
+  Внешняя ссылка
+</a>
+
+<!-- Плохо -->
+<a href="https://example.com" target="_blank">
+  Внешняя ссылка
+</a>
+                
    
+              
    
+            
    
+          
    
+
           
    
             
    
               
    Подключение стилей
    

From ec49fd77e0c1d4cd778c5db42f49b7f2ae776a5f Mon Sep 17 00:00:00 2001
From: Alexey Simonenko 
Date: Sat, 4 Apr 2026 00:29:37 +0300
Subject: [PATCH 07/13] =?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:has/:is/:where,=20=D0=BE=D0=B1=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=BB=D1=8F=D0=B5=D1=82=20=D1=84=D1=83=D1=82=D0=B5?=
 =?UTF-8?q?=D1=80=20=D0=B8=20=D1=81=D1=81=D1=8B=D0=BB=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) 
---
 html-css.html | 73 ++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 57 insertions(+), 16 deletions(-)

diff --git a/html-css.html b/html-css.html
index 413a16c..7f6c33d 100644
--- a/html-css.html
+++ b/html-css.html
@@ -82,6 +82,7 @@ 
             
  • ID-селекторы
    • 
             
  • Перенос селекторов
    • 
             
  • Пробелы между комбинаторами
    • 
+            
  • Современные селекторы
    • 
             
  • Формат цветов
    • 
             
  • Кавычки
    • 
             
  • Ведущий ноль и пробелы после запятых
    • 
@@ -108,7 +109,7 @@ 
    Автоматизация проверки кода
    
             
    
               
    Запоминать все правила необязательно — за этим следят линтеры.
    
               
      
-                
    • Для поддержания единообразия в коде используйте EditorConfig.
      • 
+                
    • Для поддержания единообразия в коде используйте EditorConfig.
      • 
                 
    • Для HTML используйте linthtml.
      • 
                 
    • Для стилей используйте Stylelint.
      • 
               
    
@@ -173,7 +174,7 @@ 
    Группировка файлов
    
           
    
             
    
               
    Форматирование кода
    
-              
    Настройте EditorConfig, чтобы редактор автоматически форматировал код:
    
+              
    Настройте EditorConfig, чтобы редактор автоматически форматировал код:
    
               
    root = true
 
 [*]
@@ -969,6 +970,60 @@ 
    Пробелы между комбинаторами
    
           
    
 
+          
    
+            
    
+              
    Современные селекторы
    
+              
    Используйте современные псевдоклассы для упрощения селекторов:
    
+              
      
+                
    • :is() — группирует селекторы. Специфичность равна самому специфичному аргументу.
      • 
+                
    • :where() — то же, что :is(), но с нулевой специфичностью. Подходит для базовых стилей и сбросов.
      • 
+                
    • :has() — стилизует элемент по наличию определённого потомка или соседа.
      • 
+              
    
+            
    
+            
    
+              
    
+                
    /* Хорошо: :is() вместо длинного перечисления */
+:is(h1, h2, h3) {
+  margin-top: 0;
+}
+
+:is(.card, .banner) :is(h2, h3) {
+  color: var(--color-primary);
+}
+
+/* Хорошо: :where() для базовых стилей */
+:where(ul, ol) {
+  padding-left: 0;
+  list-style: none;
+}
+
+/* Хорошо: :has() для стилизации родителя */
+.form-field:has(:invalid) {
+  border-color: var(--color-error);
+}
+
+.card:has(img) {
+  padding-top: 0;
+}
+
+/* Плохо: дублирование вместо :is() */
+h1,
+h2,
+h3 {
+  margin-top: 0;
+}
+
+.card h2,
+.card h3,
+.banner h2,
+.banner h3 {
+  color: var(--color-primary);
+}
+
    
+              
    
+            
    
+          
    
+
           
    
             
    
               
    Формат цветов
    
@@ -1454,20 +1509,6 @@ 
    Порядок свойств
    
         
           HTML Academy
         
-        
         
    
           
             GitHub

From 23ca6a34a4c1f1789d8630ed8c46feedaf27a601 Mon Sep 17 00:00:00 2001
From: Alexey Simonenko 
Date: Sat, 4 Apr 2026 00:31:29 +0300
Subject: [PATCH 08/13] =?UTF-8?q?=D0=A3=D0=B1=D0=B8=D1=80=D0=B0=D0=B5?=
 =?UTF-8?q?=D1=82=20=D1=81=D0=BE=D1=86=D0=B8=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B?=
 =?UTF-8?q?=D0=B5=20=D1=81=D1=81=D1=8B=D0=BB=D0=BA=D0=B8=20=D0=B8=D0=B7=20?=
 =?UTF-8?q?=D1=84=D1=83=D1=82=D0=B5=D1=80=D0=B0,=20=D1=83=D0=B4=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8F=D0=B5=D1=82=20md/syntax.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) 
---
 index.html   |  14 ----
 md/syntax.md | 218 ---------------------------------------------------
 2 files changed, 232 deletions(-)
 delete mode 100644 md/syntax.md

diff --git a/index.html b/index.html
index e8fc7e6..ed5136a 100644
--- a/index.html
+++ b/index.html
@@ -62,20 +62,6 @@ 
         
           HTML Academy
         
-        
         
    
           
             GitHub
diff --git a/md/syntax.md b/md/syntax.md
deleted file mode 100644
index 76e0aad..0000000
--- a/md/syntax.md
+++ /dev/null
@@ -1,218 +0,0 @@
-# Стиль кода JS
-
-## Форматирование
-### Строка не должна быть длиннее 80 символов
-Строки более 80 символов длиной, снижают скорость чтения заставляя читателя
-перемещать глаза на большое расстояние.
-
-Не стоит забывать и о том, что код, написанный в Академии часто показывается
-в разного рода презентациях, что увеличивает требования к читаемости кода
-
-### Выравнивание знаков равенства запрещено
-Трудоемкий и очень хрупкий процесс. Если хотя бы одна из переменных
-
-### Перенос строк
-#### Блоки кода отделяются двумя пробелами
-Код внутри блока отбивается двумя пробелами относительно начала блока.
-Правило работает даже внутри кода с другим отступом.
-```diff
-+ function factorial(number) {
-+   if (number === 1 || number === 0) {
-+     return 1;
-+   }
-+   
-+   return number * factorial(number - 1);
-+ }
-```
-
-```diff
-+ document.querySelectorAll('button').
-+     addEventListener('click', function(evt) {
-+       // Используются два пробела, потому что отступ делается
-+       // внутри тела функции, хоть она и является неперенесенным
-+       // аргументом при вызове addEventListener.
-+       evt.preventDefault();
-+       ga._trackEvent('click', evt.target.innerText);
-+     }, true);
-```
-
-#### Аргументы функций и вызовы через цепочку отделяются четырьмя пробелами
-При переносе длинных вызовов функции и обращении к свойствам через точку
-по длинной цепочке, при переносе используются четыре пробела. Меньшее количество
-пробелов сделает отступ неотличимым при быстром чтении кода от отступа
-у вложенного блока.
-
-```diff
-+ 
-```
-
-#### Альтернативный способ переносить аргументы — выравнивать их с открывающей скобкой
-В определенных случаях аргументы функции можно выравнивать вместе
-с открывающей скобкой вызова функции. Это можно делать в случае,
-если названия аргументов достаточно длинные.
-
-Такой же перенос можно использовать в проверке условий (`if`, `while`).
-
-```diff
-+ while (footer.getBoundingClientRect().top - window.innerHeight > 0 &&
-+        currentPageNumber < itemsToShow) {
-+   displayNextPage();  
-+ }
-```
-
-_В обоих случаях при переносе аргументов функции, закрывающая скобка
-при вызове остается на последней строке._
-
-#### Объявление объектов и массивов
-При многострочном объявлении массивов и объектов, используется два пробела
-и закрывающая скобка ставится на отдельную строку.
-```diff
-+ var AvailableDirection = [
-+   Direction.TOP,
-+   Direction.LEFT,
-+   Direction.RIGHT
-+ ];
-```
-
-#### В многострочных операциях, операторы ставятся в конце строки, а не в начале
-При переносе длинных вызовов (чейны, объявление массивов и объектов, функции
-с большим количеством аргументов, тернарные операторы) операторы остаются
-на предыдущей строке.
-
-Правила с переносом оператора хорошо работают в языках, где необязательно
-удалять забытые запятые в конце списков. Но даже в этом случае быстрое удаление
-и сортировка строк не будут работать, потому у списков будет отличаться первая
-строка, а у чейнов — последняя и после сортировки и удаления нужно перепроверить
-получившийся список на валидность.
-
-```diff
-+ document.body.
-+     querySelectorAll('div').
-+     quertSelectorAll('span');
-
-- document.body
--     .querySelectorAll('div')
--     .quertSelectorAll('span');
-```
-
-```diff
-+ var Direction = {
-+   TOP: 0x01,
-+   BOTTOM: 0x02,
-+   LEFT: 0x04,
-+   RIGHT: 0x08
-+ };
-
-- var Direction = {
--   TOP: 0x01
--   ,BOTTOM: 0x02
--   ,LEFT: 0x04
--   ,RIGHT: 0x08
-- };
-```
-
-```diff
-+ var AvailableDirection = [
-+   Direction.TOP,
-+   Direction.LEFT,
-+   Direction.RIGHT
-+ ];
-
-- var AvailableDirection = [
--   Direction.TOP
--   ,Direction.LEFT
--   ,Direction.RIGHT
-- ];
-```
-
-Если примеры с объявлением массивов и объектов или с цепочкой вызовов
-объясняются логически, то перенос разделителей в тернарном операторе
-не имеет никакого смысла
-
-```diff
-- var element = 'content' in document.createElement('template')
--     ? template.content.children[0].cloneNode(true)
--     : template.children[0].cloneNode(true);
-
-+ var element = 'content' in document.createElement('template') ?
-+     template.content.children[0].cloneNode(true) :
-+     template.chilren[0].cloneNode(true);
-```
-
-## Правила языка
-В каждом файле нужно использовать директиву `'use strict'` для включения
-интерпретатора в строгий режим исполнения JavaScript.
-
-### Каждая переменная объявляется через свой var
-Один var для нескольких переменных является одним шагом исполнения, поэтому
-проходится как интерпретатором, так и отладчиком как единственная инструкция,
-даже если объявленных переменных несколько. В этом случае проблемной становится
-отладка программы, если в одной из объявленных переменных допущена ошибка
-
-```diff
-- var container = document.querySelector('.container'),
--     buttons = container.querySelectorAll('button'),
--     panels = container.querySelectorAll('.panel');
-
-+ var container = document.querySelector('.container');
-+ var buttons = container.querySelectorAll('button');
-+ var panels = container.querySelectorAll('.panel');
-```
-
-### Функции объявляются как переменные
-Функции должны объявляться как переменные. Особенности «подвешивания» функций
-позволяют их использовать до того как они были объявлены. Зачастую функция
-объявляется в локальной области видимости и в этом случае ее объявление
-не должно затрагивать всю область видимости.
-
-Положительный побочный эффект такого стиля заключается в том,
-что при использовании его в обучающем процессе идея колбэков объясняется
-сильно проще
-
-```diff
-- function onAnimationEnd(callback) {
--   if (isExecuting) {
--     function callbackToQueue() {
--       callback();
--       queue.splice(queue.indexOf(callbackToQueue), 1);
--     }
--
--     queue.push(callbackToQueue);
--   } else {
--     callback();
--   }  
-- }
-
-+ var onAnimationEnd = function(callback) {
-+   if (isExecuting) {
-+     var callbackToQueue = function() { // Совсем хорошо, если let
-+       callback();
-+       queue.splice(queue.indexOf(callbackToQueue), 1);
-+     }  
-+
-+     queue.push(callbackToQueue);  
-+   } else {
-+     callback();
-+   }
-+ }
-```
-
-### Замыкания
-```diff
-- function onItemClick(item, i) {
--   item.onClick = function() {
--     var clickedItem = i;
--   };
-- }
-
-+ function onItemClick(item, i) {
-+   item.click = getClickHandler(i);  
-+ }
-+
-+ function getClickHandler(i) {
-+   var clickedItem = i;
-+ }
-```

From 875ff9e5ff278635acf1433946f6ffb96ccb468c Mon Sep 17 00:00:00 2001
From: Alexey Simonenko 
Date: Sat, 4 Apr 2026 00:31:53 +0300
Subject: [PATCH 09/13] Modernize JS rules: strict mode, let/const,
 Object.hasOwn, class extends

Co-Authored-By: Claude Opus 4.6 (1M context) 
---
 css/style.css   |  6 ++++++
 javascript.html | 36 ++++++++----------------------------
 2 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/css/style.css b/css/style.css
index a125c80..01824ff 100644
--- a/css/style.css
+++ b/css/style.css
@@ -492,3 +492,9 @@ pre.language-correct .token.operator,
 pre.language-incorrect .token.operator {
   background: none;
 }
+
+blockquote {
+  background: #eeb;
+  margin-left: -10px;
+  padding: 10px 10px;
+}
diff --git a/javascript.html b/javascript.html
index 62bf3b1..a66e2c4 100644
--- a/javascript.html
+++ b/javascript.html
@@ -15,14 +15,6 @@
     
     
 
-    
-
     
     
     
@@ -270,7 +262,7 @@ 
    Предотвращение ошибок
    
 
               
    В коде нет пустых блоков кода
    
 
-              
    Код работает в строгом режиме: в начале всех файлов явно прописана директива "use strict" или используются модули ECMAScript, которые по умолчанию работают в строгом режиме
    
+              
    Код работает в строгом режиме. Модули ECMAScript (type="module") работают в строгом режиме автоматически. В обычных скриптах в начале файла явно прописывается директива "use strict"
    
             
    
           
    
 
@@ -347,7 +339,7 @@ 
    Операторы
    
           
    
             
    
               
    Объявление переменных и функций
    
-              
    При объявлении переменных предпочтение отдается ключевым словам let и const. Переменные объявляются через var только при наличии проблем с поддержкой ECMAScript 2015
    
+              
    Переменные объявляются через const или let. Ключевое слово var не используется
    
 
               
    Запрещено переопределять с помощью ключевого слова ранее созданные переменные
    
 
@@ -494,7 +486,7 @@ 
    Прочее
    
 
           
    
             
    
-              
    При итерировании по объектам через for..in при работе со свойствами используется конструкция hasOwnProperty
    
+              
    При итерировании по объектам через for..in при работе со свойствами используется Object.hasOwn()
    
 
               
    В объектах напрямую не переопределяется свойство __iterator__
    
 
@@ -503,9 +495,11 @@ 
    Прочее
    
   __proto__: Parent
 };
    - 
    const Obj = function() {};
-Obj.prototype = new Parent();
-const obj = new obj;
+              
    class Obj extends Parent {
+  constructor() {
+    super();
+  }
+}
 
 const obj = Object.create(Parent.prototype);
    
 
@@ -554,20 +548,6 @@ 
    Регулярные выражения
    
             
           HTML Academy
         
-        
         
    
           
             GitHub

From 16b29e3f38b786e6ecbbea9f632df72cf13b5ce8 Mon Sep 17 00:00:00 2001
From: Alexey Simonenko 
Date: Wed, 8 Apr 2026 15:51:49 +0300
Subject: [PATCH 10/13] =?UTF-8?q?=D0=A4=D0=B8=D0=BA=D1=81=D0=B8=D1=80?=
 =?UTF-8?q?=D1=83=D0=B5=D1=82=20=D0=B2=D0=B5=D1=80=D1=81=D0=B8=D1=8E=20Nod?=
 =?UTF-8?q?e.js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .nvmrc                 | 1 +
 License.md => LICENSE  | 0
 Readme.md => README.md | 0
 3 files changed, 1 insertion(+)
 create mode 100644 .nvmrc
 rename License.md => LICENSE (100%)
 rename Readme.md => README.md (100%)

diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..a45fd52
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+24
diff --git a/License.md b/LICENSE
similarity index 100%
rename from License.md
rename to LICENSE
diff --git a/Readme.md b/README.md
similarity index 100%
rename from Readme.md
rename to README.md

From 69bc6df0561ea165c4fbbeb46869c0325a70c035 Mon Sep 17 00:00:00 2001
From: Alexey Simonenko 
Date: Wed, 8 Apr 2026 15:51:49 +0300
Subject: [PATCH 11/13] =?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.gitignore?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index edc6c51..37def74 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,8 @@
-build/
 node_modules/
+build/
 *.log
 .DS_Store
-.vscode
+Thumbs.db
+.idea/
+*.sublime*
+.vscode/

From bf75778af5e893a01e236c27f9e64737dd91cbe9 Mon Sep 17 00:00:00 2001
From: Alexey Simonenko 
Date: Wed, 8 Apr 2026 15:52:31 +0300
Subject: [PATCH 12/13] =?UTF-8?q?=D0=A3=D0=B1=D0=B8=D1=80=D0=B0=D0=B5?=
 =?UTF-8?q?=D1=82=20=D1=83=D0=BF=D0=BE=D0=BC=D0=B8=D0=BD=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20noopener=20+=20=D0=BC=D0=B5=D0=BB=D0=BA=D0=B8=D0=B5=20?=
 =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=D1=8B=20=D0=BD=D0=B0=20=D1=81=D0=BE?=
 =?UTF-8?q?=D0=BE=D1=82=D0=B2=D0=B5=D1=82=D1=81=D1=82=D0=B2=D0=B8=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 html-css.html   | 46 ++++++++++++----------------------------------
 index.html      |  2 +-
 javascript.html | 24 +++++++++++-------------
 3 files changed, 24 insertions(+), 48 deletions(-)

diff --git a/html-css.html b/html-css.html
index 7f6c33d..486888d 100644
--- a/html-css.html
+++ b/html-css.html
@@ -63,7 +63,6 @@ 
             
  • Ленивая загрузка
    • 
             
  • Разделители в имени класса
    • 
             
  • Атрибуты action и method
    • 
-            
  • Безопасность внешних ссылок
    • 
             
  • Подключение стилей
    • 
             
  • Подключение скриптов
    • 
             
  • Валидность
    • 
@@ -109,7 +108,7 @@ 
    Автоматизация проверки кода
    
             
    
               
    Запоминать все правила необязательно — за этим следят линтеры.
    
               
      
-                
    • Для поддержания единообразия в коде используйте EditorConfig.
      • 
+                
    • Для поддержания единообразия в коде используйте EditorConfig.
      • 
                 
    • Для HTML используйте linthtml.
      • 
                 
    • Для стилей используйте Stylelint.
      • 
               
    
@@ -174,7 +173,7 @@ 
    Группировка файлов
    
           
    
             
    
               
    Форматирование кода
    
-              
    Настройте EditorConfig, чтобы редактор автоматически форматировал код:
    
+              
    Настройте EditorConfig, чтобы редактор автоматически форматировал код:
    
               
    root = true
 
 [*]
@@ -592,26 +591,6 @@ 
    Атрибуты action и method
           
    
 
-          
    
-            
    
-              
-              
    Для ссылок с target="_blank" добавляйте rel="noopener" — это защита от атаки через window.opener, когда внешняя страница может получить доступ к вашей.
    
-            
    
-            
    
-              
    
-                
    <!-- Хорошо -->
-<a href="https://example.com" target="_blank" rel="noopener">
-  Внешняя ссылка
-</a>
-
-<!-- Плохо -->
-<a href="https://example.com" target="_blank">
-  Внешняя ссылка
-</a>
-                
    
-              
    
-            
    
-          
    
 
           
    
             
    
@@ -691,7 +670,7 @@ 
    Подключение скриптов
    
           
    
             
    
               
    Валидность
    
-              
    Проверяйте HTML через валидатор — он найдёт ошибки, которые легко пропустить.
    
+              
    Проверяйте HTML через валидатор — он найдёт ошибки, которые легко пропустить.
    
             
    
           
    
 
@@ -829,11 +808,12 @@ 
    Форматирование правил
    
           
    
             
    
               
    Вложенность
    
-              
    Правила для @media, @container и CSS nesting:
    
+              
    Нативная вложенность CSS работает во всех современных браузерах. Правила для @media, @container и вложенных селекторов:
    
               
      
                 
    • Увеличивайте отступ на 2 пробела для каждого уровня.
      • 
                 
    • Отделяйте вложенные блоки пустой строкой от свойств родителя.
      • 
                 
    • Ограничивайте глубину до 2 уровней — глубже читать сложно.
      • 
+                
    • Используйте & для псевдоклассов, псевдоэлементов и составных селекторов. Для вложенных потомков & необязателен.
      • 
               
    
             
    
             
    
@@ -853,13 +833,17 @@ 
    Вложенность
    
 .card {
   padding: 16px;
 
-  & .title {
+  .title {
     font-size: 24px;
   }
 
   &:hover {
     background: #f0f0f0;
   }
+
+  &.card--active {
+    border-color: blue;
+  }
 }
 
 /* Плохо: слишком глубоко */
@@ -1006,13 +990,7 @@ 
    Современные селекторы
    
   padding-top: 0;
 }
 
-/* Плохо: дублирование вместо :is() */
-h1,
-h2,
-h3 {
-  margin-top: 0;
-}
-
+/* Плохо: дублирование вложенных селекторов */
 .card h2,
 .card h3,
 .banner h2,
@@ -1510,7 +1488,7 @@ 
    Порядок свойств
    
           HTML Academy
         
         
    
-          
+          
             GitHub
           
         
    
diff --git a/index.html b/index.html
index ed5136a..19e4958 100644
--- a/index.html
+++ b/index.html
@@ -63,7 +63,7 @@ 
           HTML Academy
         
         
    
-          
+          
             GitHub
           
         
    
diff --git a/javascript.html b/javascript.html
index a66e2c4..326b963 100644
--- a/javascript.html
+++ b/javascript.html
@@ -88,7 +88,7 @@ 
    Синтаксис
    
             
    
               
    Отступы, пробелы и переносы
    
 
-              
    Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
    
+              
    Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
    
 
               
    Для отступов используются два пробела. Знак табуляции не используется
    
 
@@ -239,7 +239,7 @@ 
    Именование
    
 
               
    Запрещено использовать имена переменных, которые используются во внешних областях видимости
    
 
-              
    Запрещено называть переменные и свойства ключевыми словами JS
    
+              
    Запрещено называть переменные и свойства ключевыми словами JS
    
 
               
    Запрещено использовать переменные, не объявленные ранее. При использовании переменной, объявленной в другом модуле в глобальной области видимости, нужно обращаться к ней как к свойству объекта window
    
 
@@ -262,7 +262,7 @@ 
    Предотвращение ошибок
    
 
               
    В коде нет пустых блоков кода
    
 
-              
    Код работает в строгом режиме. Модули ECMAScript (type="module") работают в строгом режиме автоматически. В обычных скриптах в начале файла явно прописывается директива "use strict"
    
+              
    Код работает в строгом режиме. Модули ECMAScript (type="module") работают в строгом режиме автоматически. В скриптах без type="module" в начале файла явно прописывается директива "use strict"
    
             
    
           
    
 
@@ -279,7 +279,7 @@ 
    Условные операторы
    
 
               
    В условиях не используется небезопасное отрицание, например использование ! в in или instanceof без скобок
    
 
-              
    Запрещено сравнение с NaN. Для проверки, является ли результат операции числовым, нужно использовать Number.isNaN
    
+              
    Запрещено сравнение с NaN. Для проверки, является ли результат операции числовым, нужно использовать Number.isNaN
    
 
               
    Запрещено использовать case без break или return в блоках switch
    
 
@@ -339,11 +339,11 @@ 
    Операторы
    
           
    
             
    
               
    Объявление переменных и функций
    
-              
    Переменные объявляются через const или let. Ключевое слово var не используется
    
+              
    Переменные объявляются через const. Если переменной нужно переприсвоение, используется let. Ключевое слово var не используется
    
 
               
    Запрещено переопределять с помощью ключевого слова ранее созданные переменные
    
 
-              
    Запрещено использовать множественное объявление через одно ключевое слово. Для каждой переменной используется отдельный var, let или const.
    
+              
    Запрещено использовать множественное объявление через одно ключевое слово. Для каждой переменной используется отдельный let или const.
    
               
    const a = 1, b = 2;
    
 
               
    const a = 1;
@@ -404,7 +404,7 @@ 
    Контекст
    
               
    В функциях, которые не являются методами никакого объекта или класса, не используется this
    
 
               
    Переменные
    
-              
    Переменные, объявленные через var не удаляются оператором delete
    
+              
    Переменные не удаляются оператором delete
    
             
    
           
    
 
@@ -495,19 +495,17 @@ 
    Прочее
    
   __proto__: Parent
 };
    - 
    class Obj extends Parent {
+              
    class Child extends Parent {
   constructor() {
     super();
   }
-}
-
-const obj = Object.create(Parent.prototype);
    
+}

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

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

    -

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

    +

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

    const result = (1, 2); // 2
    const result = 2;
    @@ -549,7 +547,7 @@

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

    HTML Academy
    - + GitHub
    From 7b3fc39fec6a476ce9b1f831016e09b5bfbe32ae Mon Sep 17 00:00:00 2001 From: Alexey Simonenko Date: Wed, 8 Apr 2026 15:52:50 +0300 Subject: [PATCH 13/13] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20README.md=20=D0=B8=20LICENSE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- LICENSE | 27 ++++++++++++++------------- README.md | 2 +- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/LICENSE b/LICENSE index a2229c0..e60aa98 100644 --- a/LICENSE +++ b/LICENSE @@ -1,20 +1,21 @@ -The MIT License (MIT) +MIT License -Copyright (c) 2015 HTML Academy, mail@htmlacademy.ru +Copyright (c) 2015-2026 HTML Academy -Permission is hereby granted, free of charge, to any person obtaining a copy of -this software and associated documentation files (the "Software"), to deal in -the Software without restriction, including without limitation the rights to -use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of -the Software, and to permit persons to whom the Software is furnished to do so, -subject to the following conditions: +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS -FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR -COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER -IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN -CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 947d906..4b829be 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ ## Лицензия -[MIT](./License.md). +[MIT](LICENSE). ## Правила линтеров