diff --git a/html-css.html b/html-css.html index 8e52a6a..413a16c 100644 --- a/html-css.html +++ b/html-css.html @@ -51,6 +51,7 @@ HTML @@ -72,8 +76,10 @@ @@ -95,13 +106,13 @@

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

-

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

+

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

-

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

+

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

@@ -112,10 +123,7 @@

Код

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

- +

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

@@ -165,7 +173,7 @@

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

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

-

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

+

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

root = true
 
 [*]
@@ -206,14 +214,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 +232,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 +257,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 +341,7 @@ 
Регистр тегов и атрибутов

           

             

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

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

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

             

             

               

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

           

             

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

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

-              

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

             

             

               

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

           

             

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

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

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

             

             

               

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

           

             

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

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

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

             

             

               

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

           

             

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

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

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

             

             

               

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

           

             

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

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

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

             

             

               

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

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

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

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

             

             

               

@@ -481,10 +520,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">

+              

+            

+          

+
           

             

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

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

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

             

             

               

@@ -504,29 +565,57 @@ 
Разделители в имени класса

 
           

             

-              
Атрибут 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>
+                

+              

+            

+          

+
           

             

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

-              

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

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

             

             

               

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

           

             

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

-              

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

-              

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

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

             

             

               

-                
<!-- Хорошо -->
+                
<!-- Хорошо: обычный скрипт перед </body> -->
 <!DOCTYPE html>
 <html lang="ru">
   <head>…</head>
@@ -573,7 +657,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 +690,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 +744,7 @@ 
CSS

           

             

               
Правило @import

-              

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

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

             

             

               

@@ -621,7 +762,7 @@ 
Правило @import

           

             

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

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

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

             

             

               

@@ -646,15 +787,14 @@ 
Регистр селекторов и свойс
 
           

             

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

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

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

             

             

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

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

 /* Плохо */
 .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;
@@ -687,13 +827,60 @@ 
Структура объявления

 
           

             

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

+              
Вложенность

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

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

             

+            

+              

+                
/* Хорошо: @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 уровня — избыточно */
+      }
+    }
+  }
+}
+

+              

+            

+          

+
+          

+            

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

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

+            

             

               

                 
/* Хорошо */
@@ -711,10 +898,39 @@ 
Имена классов

             

           

 
+          

+            

+              
ID-селекторы

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

+            

+            

+              

+                
/* Хорошо */
+.header {
+  background-color: #333333;
+}
+
+.navigation {
+  display: flex;
+}
+
+/* Плохо */
+#header {
+  background-color: #333333;
+}
+
+#navigation {
+  display: flex;
+}
+

+              

+            

+          

+
           

             

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

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

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

             

             

               

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

           

             

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

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

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

             

             

               

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

             

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

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

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

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

             

             

               

@@ -768,7 +981,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 +1004,7 @@ 
Формат цветов

           

             

               
Кавычки

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

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

             

             

               

@@ -810,23 +1026,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 +1054,7 @@ 
Ведущий ноль и пробелы после 
           

             

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

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

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

             

             

               

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

             

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

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

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

             

             

               

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

           

             

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

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

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

             

             

               

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

           

             

               
!important

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

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

             

             

               

@@ -946,7 +1150,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 +1166,7 @@ 
!important

           

             

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

-              

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

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

             

             

               

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

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

               

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

             

           

 
+          

+            

+              
Фокус :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");
+}

+              

+            

+          

+
+          

+            

+              
Свойство 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;
+}
+

+              

+            

+          

+
           

             

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

-              

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

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

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

-              

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

-              

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

-              

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

-              

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

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

             

             

               

                 
.declaration-order {
+  /* Кастомные свойства */
+  --element-color: #333333;
+
   /* Позиционирование */
   position: absolute;
   top: 0;
@@ -1038,12 +1405,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 +1423,7 @@ 
Порядок свойств

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

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