From c8ca72e4726f72a3a713ba08e1f93ea6562b181c Mon Sep 17 00:00:00 2001 From: Alexey Simonenko Date: Fri, 23 Jan 2026 20:33:59 +0300 Subject: [PATCH 1/6] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=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?=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B0=D0=B5=D1=82=20=D1=84=D0=BE?= =?UTF-8?q?=D1=80=D0=BC=D1=83=D0=BB=D0=B8=D1=80=D0=BE=D0=B2=D0=BA=D0=B8,?= =?UTF-8?q?=20=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B0=D0=B5=D1=82=20=D0=BF?= =?UTF-8?q?=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 2/6] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?=
 =?UTF-8?q?=D0=B5=D1=82=20=D0=B8=D0=B7=20stylint=20=D0=BA=D0=BE=D0=BD?=
 =?UTF-8?q?=D1=84=D0=B8=D0=B3=D0=B0=20=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D0=BF=D1=80=D0=BE=20id,=20font-weight=20=D0=B8=20?=
 =?UTF-8?q?=D1=83=D1=80=D0=BE=D0=B2=D0=B5=D0=BD=D1=8C=20=D0=B2=D0=BB=D0=BE?=
 =?UTF-8?q?=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 3/6] =?UTF-8?q?=D0=A3=D0=B1=D0=B8=D1=80=D0=B0=D0=B5=D1=82?=
 =?UTF-8?q?=20=D0=BB=D0=B8=D1=88=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=BE=D1=8F?=
 =?UTF-8?q?=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 4/6] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D1=8F=D0=B5=D1=82?=
 =?UTF-8?q?=20=D0=B1=D0=BB=D0=BE=D0=BA=20=D0=BF=D1=80=D0=BE=20=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=BD=D1=82=D0=B5=D0=B9=D0=BD=D0=B5=D1=80=D0=BD=D1=8B=D0=B5=20?=
 =?UTF-8?q?=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 5/6] =?UTF-8?q?=D0=A0=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=D1=8F?=
 =?UTF-8?q?=D0=B5=D1=82=20=D1=80=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=20=D1=81?=
 =?UTF-8?q?=D1=82=D1=80=D1=83=D0=BA=D1=82=D1=83=D1=80=D0=B0=20=D0=BE=D0=B1?=
 =?UTF-8?q?=D1=8A=D1=8F=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BD=D0=B0?=
 =?UTF-8?q?=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 6/6] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?=
 =?UTF-8?q?=D0=B5=D1=82=20action=20=D0=B4=D0=BB=D1=8F=20=D1=84=D0=BE=D1=80?=
 =?UTF-8?q?=D0=BC=20=D0=B8=20noopener=20=D0=B4=D0=BB=D1=8F=20=D1=81=D1=81?=
 =?UTF-8?q?=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>
+                
    
+              
    
+            
    
+          
    
+
           
    
             
    
               
    Подключение стилей