From 0aceabcb02ee05fd74195668ef4ff09b90352267 Mon Sep 17 00:00:00 2001
From: Ruslan Shevchenko <ruslan91999@gmail.com>
Date: Fri, 17 Jan 2025 15:49:48 +0300
Subject: [PATCH 01/11] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86?=
 =?UTF-8?q?=D1=83=20=D0=B0=D0=B2=D1=82=D0=BE=D1=80=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 people/ruslanpro01/index.md | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 people/ruslanpro01/index.md

diff --git a/people/ruslanpro01/index.md b/people/ruslanpro01/index.md
new file mode 100644
index 0000000000..a673a2a961
--- /dev/null
+++ b/people/ruslanpro01/index.md
@@ -0,0 +1,4 @@
+---
+name: 'Руслан Шевченко'
+url: https://github.com/RuslanPro01
+---

From 41d285d51cb8a03aa74f9365af92ef1db1b5dfd6 Mon Sep 17 00:00:00 2001
From: Ruslan Shevchenko <ruslan91999@gmail.com>
Date: Fri, 17 Jan 2025 15:51:25 +0300
Subject: [PATCH 02/11] =?UTF-8?q?=D0=9D=D0=B0=D1=87=D0=B8=D0=BD=D0=B0?=
 =?UTF-8?q?=D0=B5=D1=82=20=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D1=83=20=D0=BD?=
 =?UTF-8?q?=D0=B0=D0=B4=20=D1=81=D1=82=D0=B0=D1=82=D1=8C=D1=91=D0=B9=20?=
 =?UTF-8?q?=D0=BF=D1=80=D0=BE=20CSS-in-JS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tools/css-in-js/index.md | 56 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 tools/css-in-js/index.md

diff --git a/tools/css-in-js/index.md b/tools/css-in-js/index.md
new file mode 100644
index 0000000000..e3a6312885
--- /dev/null
+++ b/tools/css-in-js/index.md
@@ -0,0 +1,56 @@
+---
+title: "Обзор CSS-in-JS"
+description: "А что, так можно было? Разберём, как можно описывать компоненты и стили не создав ни одного css-файла"
+authors:
+  - ruslanpro01
+related:
+  - tools/how-the-browser-creates-pages
+  - tools/preprocessors
+  - tools/react-and-alternatives
+tags:
+  - article
+---
+
+<!--
+1. В description есть описание для соцсетей и поисковиков, не больше 200 символов
+2. В authors есть ники авторов основного текста
+3. В contributors перечислены ники всех соавторов и тех, кто работал над текстом (дописали «На практике»? Переписали блок? Вам сюда)
+4. В keywords записаны ключевые слова для SEO: пишем сюда слова или фразы, которых нет в тексте статьи, но по ним могут искать этот материал
+5. Удалены все пустые теги в шапке
+6. Подпапка автора есть в папке _people/_
+7. Демки лежат в подпапке _demos/_
+8. В related добавлено три ссылки на материалы Доки, которые будут предлагаться в конце. Не добавляем следующий или предыдущий материал в разделе
+-->
+
+## Кратко
+
+**CSS-in-JS** — это способ писать стили непосредственно в JavaScript, что позволяет использовать возможности языка для управления внешним видом элементов. Обычно эта методика используется в компонентной архитектуре, например, в разработке на React, где каждому компоненту соответствуют свои стили.
+
+Существуют разные решения, но все они работают схожим образом: стили задаются как [объекты](https://doka.guide/js/object/) или [шаблонные строки](https://doka.guide/js/template-strings/) и привязываются к компонентам через уникальные классы - это обеспечивает их изоляцию и упрощённое управление.
+
+Основные библиотеки для написания CSS внутри JS — это [Styled Components](https://styled-components.com/), [Emotion](https://emotion.sh/docs/introduction), [Styled JSX](https://github.com/vercel/styled-jsx) и [vanilla-extract](https://vanilla-extract.style/).
+
+## Почему CSS-in-JS?
+
+Главное преимущество использования подхода CSS-in-JS — возможность использовать конструкции JS при описании стилей компонента, в зависимости от проекта это может помочь описывать динамические стили, которые зависят от условия, ещё помогает работать с темизацией.
+
+<aside>
+
+CSS-in-JS не универсальное решение
+
+Многие задачи, такие как изоляция стилей, динамическая стилизация и управление темами, можно решить с помощью традиционного CSS, препроцессоров или CSS Modules. Выбор подхода зависит от специфики проекта и предпочтений команды. CSS-in-JS предлагает определённые преимущества, но не является универсальным решением для всех случаев 🙂
+
+</aside>
+
+## Краткая история ~~времени~~ CSS-in-JS
+
+### Становление CSS
+
+CSS (Каскадные таблицы стилей) начал развитие в 90-е годы, был отмечен консорциумом [W3C](https://www.w3.org/) и начал стремительно развиваться. CSS стал методом определения стиля веб-документа. Он был мощным, чтобы удовлетворить потребности проектов тех лет, и был относительно прост, чтобы все желающие, могли приступить к работе в короткий срок.
+
+### Проблемы CSS
+
+sdfsdf
+
+
+

From 525d8f1e177af6940b0d9ebd625f4bd382be405b Mon Sep 17 00:00:00 2001
From: Ruslan Shevchenko <ruslan91999@gmail.com>
Date: Sun, 26 Jan 2025 14:11:01 +0300
Subject: [PATCH 03/11] =?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=B1=D0=BB=D0=BE=D0=BA=D0=B8=20=D1=81=20?=
 =?UTF-8?q?=D0=B8=D1=81=D1=82=D0=BE=D1=80=D0=B8=D0=B5=D0=B9,=20=D0=BE?=
 =?UTF-8?q?=D0=BF=D0=B8=D1=81=D0=B0=D0=BD=D0=B8=D0=B5=D0=BC=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=B4=D1=85=D0=BE=D0=B4=D0=BE=D0=B2=20=D0=B8=20=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=BE=D0=B1=D1=89=D0=B0=D1=8E=D1=89=D0=B5=D0=B3=D0=BE=20=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=D0=B0=20"=D0=9D=D0=B0=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B0=D0=BA=D1=82=D0=B8=D0=BA=D0=B5"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tools/css-in-js/index.md | 120 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 115 insertions(+), 5 deletions(-)

diff --git a/tools/css-in-js/index.md b/tools/css-in-js/index.md
index e3a6312885..0efd8e9870 100644
--- a/tools/css-in-js/index.md
+++ b/tools/css-in-js/index.md
@@ -1,6 +1,6 @@
 ---
 title: "Обзор CSS-in-JS"
-description: "А что, так можно было? Разберём, как можно описывать компоненты и стили не создав ни одного css-файла"
+description: "CSS в JavaScript — разберём, как можно описывать компоненты и стили не создав ни одного css-файла"
 authors:
   - ruslanpro01
 related:
@@ -24,7 +24,7 @@ tags:
 
 ## Кратко
 
-**CSS-in-JS** — это способ писать стили непосредственно в JavaScript, что позволяет использовать возможности языка для управления внешним видом элементов. Обычно эта методика используется в компонентной архитектуре, например, в разработке на React, где каждому компоненту соответствуют свои стили.
+**CSS-in-JS** — это способ писать стили непосредственно в JavaScript, а не в классических CSS-файлах — это позволяет использовать возможности языка для управления внешним видом элементов. Чаще всего CSS-in-JS встречается в компонентной архитектуре, например, в разработке на React, где каждому компоненту соответствуют свои стили.
 
 Существуют разные решения, но все они работают схожим образом: стили задаются как [объекты](https://doka.guide/js/object/) или [шаблонные строки](https://doka.guide/js/template-strings/) и привязываются к компонентам через уникальные классы - это обеспечивает их изоляцию и упрощённое управление.
 
@@ -42,15 +42,125 @@ CSS-in-JS не универсальное решение
 
 </aside>
 
-## Краткая история ~~времени~~ CSS-in-JS
+## Краткая история CSS-in-JS
+
+Тут мы бегло рассмотрим историю появления CSS-in-JS решений.
+
+<aside>
+
+🏃‍♂️ Краткое содержание блока, для тех, кто спешит
+
+CSS зародился в 90-е годы и, будучи относительно простым, долго удовлетворял потребности веб-разработки, однако с появлением реактивных фреймворков и переходом к крупным SPA-приложениям стал очевиден ряд проблем в масштабировании стилей. Чтобы их решить, начиная с 2014 года, разработчики начали экспериментировать с подходом CSS-in-JS, что привело к созданию библиотек вроде [JSS](https://cssinjs.org/) и [Radium](https://github.com/formidablelabs/radium) (больше не поддерживается).
+
+</aside>
 
 ### Становление CSS
 
 CSS (Каскадные таблицы стилей) начал развитие в 90-е годы, был отмечен консорциумом [W3C](https://www.w3.org/) и начал стремительно развиваться. CSS стал методом определения стиля веб-документа. Он был мощным, чтобы удовлетворить потребности проектов тех лет, и был относительно прост, чтобы все желающие, могли приступить к работе в короткий срок.
 
-### Проблемы CSS
+### Появление реактивных фреймворков и SPA
+
+До 2010-х годов, в основном создавались многостраничные приложения с четким разделением ответственности:
+
+- HTML — разметка страницы,
+- CSS — описывал, как они будут выглядеть,
+- JavaScript — отвечал за интерактивность.
+
+С течением времени развивался не только CSS, но и JavaScript — это приводит к появлению новой экосистемы разработки и современных реактивных фреймворков: Angular (2010), React (2013), Vuejs (2014). Разработка приложений начинает смещаться от многостраничных приложений на разработку одностраничных приложений (SPA), а пользователи стали ожидать от них более динамичного и сложного поведения.
+
+### Кристофер Шедо, его доклад о проблемах CSS и разработка первых решений CSS-in-JS
+
+В 2014 году Кристофер Шедо (инженер известной социальной сети) [выступает с докладом](https://speakerdeck.com/vjeux/react-css-in-js) о 7 проблемах CSS, которые нужно решить для беспроблемной разработки больших динамичных приложений:
+
+1. **Глобальное пространство имён**
+   Все CSS-селекторы живут в одной глобальной области, из-за чего стили разных компонентов могут конфликтовать или перезаписывать друг друга.
+
+1. **Зависимости**
+   При большом числе стилей сложно понять, в каком порядке подключать файлы и какие компоненты от чего зависят, что может привести к нежелательным коллизиям.
+
+1. **Удаление неиспользуемого кода**
+   В больших проектах часто копится CSS, который больше нигде не применяется, и его непросто безопасно убрать, не зная точного использования.
+
+1. **Минификация**
+   При сжатии стилей важно сохранять их читабельность для отладки, но и уменьшать размер, чтобы повысить производительность.
+
+1. **Общий доступ к константам**
+   Трудно централизованно хранить и переиспользовать значения (например, цвета, размеры), чтобы все команды работали с едиными стилевыми параметрами.
+
+1. **Проблемы каскада**
+   Когда несколько правил стилизуют одни и те же элементы, порядок подключения CSS может приводить к непредсказуемым результатам и конфликтам.
+
+1. **Изоляция**
+   Нужен способ гарантировать, что стили каждого компонента не затронут стили других, что особенно актуально в больших проектах.
+
+В этом же году начинается работа над CSS-in-JS. Первыми экспериментальными подходами можно считать решения, появившиеся в экосистеме React. Одна из самых ранних и широко известных библиотек — [JSS](https://cssinjs.org/). Чуть позже начали появляться и другие проекты (например, [Radium](https://github.com/formidablelabs/radium)), но именно JSS часто упоминают как одну из первых полноценных реализаций «CSS в JavaScript».
+
+## Runtime / zero runtime
+
+За время развития CSS-in-JS появилось несколько вариантов реализации: от полностью рантайм-решений до почти «нулевого» времени исполнения. Ниже разберём ключевые варианты и их особенности.
+
+<aside>
+
+💡 Рантайм в контексте фронтенд-разработки
+
+обычно означает, что часть логики (в данном случае генерация стилей) выполняется напрямую в браузере, «на лету» при запуске приложения. То есть когда пользователь уже открыл страницу, JS-код просчитывает стили и «вживую» вставляет их в `<style>` или управляет классами.
+
+В отличие от этого, «zero-runtime» решения максимально переносят логику (включая генерацию CSS) на этап сборки, чтобы в браузер попадал уже готовый, статический CSS.
+
+</aside>
+
+### Runtime подход
+
+#### Суть подхода
+
+Стили формируются и инжектируются в DOM во время исполнения (рантайма) приложения. В процессе рендера или при изменении состояний создаются (или обновляются) соответствующие `<style>` или классы в браузере.
+
+#### Плюсы
+
+- Легко менять стили на лету в зависимости от состояния, темизации и т. д.
+- Удобно изолировать логику стилизации в самих компонентах, сохраняя стиль и логику рядом
+
+#### Минусы
+
+- Дополнительная нагрузка в рантайме: при каждом рендере может происходить генерация и монтирование новых стилей, что влияет на производительность.
+- Возможны сложности и повышенные требования к настройке серверного рендеринга (SSR) и кеширования стилей.
+
+#### Библиотеки, реализующие подход
+
+- [Styled Components](https://styled-components.com/)
+  Использует шаблонные литералы для описания стилей внутри JS/TS. Генерирует уникальные классы в рантайме и монтирует их в DOM.
+- [Emotion](https://emotion.sh/docs/styled)
+  Также генерирует стили во время исполнения. Позволяет писать стили через шаблонные литералы (`styled`) или объектный синтаксис (`css`).
+- [JSS](https://cssinjs.org/)
+  Основан на использовании JS-объектов, которые конвертируются в CSS в рантайме.
+
+### Zero-runtime подход
+
+#### Суть подхода
+
+Стили вычисляются и извлекаются на этапе сборки. В результате в браузер попадает статический (или почти статический) CSS, а логика генерации стилей не исполняется или почти не исполняется.
+
+#### Плюсы
+
+- Нет накладных расходов в браузере (минимальный дополнительный JS-код)
+- Благодаря пункту выше обычно получаются улучшенные показатели производительности и метрик загрузки
+- Проще реализовать серверный рендеринг, так как стили уже готовы к моменту, когда HTML отдается клиенту
+
+#### Минусы
+
+- Ограничения в динамических стилях: большая часть логики должна быть статически рассчитана во время сборки, поэтому стили, зависящие от состояний, могут быть менее гибкими
+- Сложность настройки сборки: обычно требует дополнительной настройки сборщиков (Webpack, Vite и другие)
+
+#### Библиотеки, реализующие подход
 
-sdfsdf
+- [Linaria](https://linaria.dev/)
+  Анализирует CSS, написанный в виде шаблонных литералов, на этапе сборки и извлекает его в отдельные файлы. В рантайме остаются только классы.
+- [Vanilla Extract](https://vanilla-extract.style/)
+  Пишется на TypeScript/JS, но генерирует классические CSS-файлы во время сборки, практически без JS для стилизации на клиенте.
 
+## На практике
 
+Чаще всего выбор подхода к CSS-in-JS определяется требованиями к производительности, объёмом динамики в интерфейсе и готовностью настраивать сборку. При этом на практике часто всё сводится к двум простым сценариям:
 
+- Если нужна «минимальная боль» при использовании динамических стилей и важна поддержка большого сообщества — часто берут **Emotion** или **Styled Components**.
+- Если же приоритет — производительность и нет потребности в постоянном рендере уникальных стилей, можно обратить внимание на **Linaria** или **Vanilla Extract**.

From 31b6b8700f31af580efa58c2d1e0a5c54fb3068f Mon Sep 17 00:00:00 2001
From: Ruslan Shevchenko <ruslan91999@gmail.com>
Date: Sun, 26 Jan 2025 16:24:21 +0300
Subject: [PATCH 04/11] =?UTF-8?q?=D0=92=D0=BD=D0=BE=D1=81=D0=B8=D1=82=20?=
 =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=BF=D0=BE=20=D1=80?=
 =?UTF-8?q?=D0=B5=D0=BA=D0=BE=D0=BC=D0=B5=D0=BD=D0=B4=D0=B0=D1=86=D0=B8?=
 =?UTF-8?q?=D1=8F=D0=BC=20=D0=BE=D1=82=20@ra1nbow1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tools/css-in-js/index.md | 49 ++++++++++++++++------------------------
 1 file changed, 19 insertions(+), 30 deletions(-)

diff --git a/tools/css-in-js/index.md b/tools/css-in-js/index.md
index 0efd8e9870..e8f488862a 100644
--- a/tools/css-in-js/index.md
+++ b/tools/css-in-js/index.md
@@ -1,6 +1,6 @@
 ---
 title: "Обзор CSS-in-JS"
-description: "CSS в JavaScript — разберём, как можно описывать компоненты и стили не создав ни одного css-файла"
+description: "CSS в JavaScript — разберём, как можно описывать компоненты и стили, не создав ни одного CSS-файла"
 authors:
   - ruslanpro01
 related:
@@ -11,20 +11,9 @@ tags:
   - article
 ---
 
-<!--
-1. В description есть описание для соцсетей и поисковиков, не больше 200 символов
-2. В authors есть ники авторов основного текста
-3. В contributors перечислены ники всех соавторов и тех, кто работал над текстом (дописали «На практике»? Переписали блок? Вам сюда)
-4. В keywords записаны ключевые слова для SEO: пишем сюда слова или фразы, которых нет в тексте статьи, но по ним могут искать этот материал
-5. Удалены все пустые теги в шапке
-6. Подпапка автора есть в папке _people/_
-7. Демки лежат в подпапке _demos/_
-8. В related добавлено три ссылки на материалы Доки, которые будут предлагаться в конце. Не добавляем следующий или предыдущий материал в разделе
--->
-
 ## Кратко
 
-**CSS-in-JS** — это способ писать стили непосредственно в JavaScript, а не в классических CSS-файлах — это позволяет использовать возможности языка для управления внешним видом элементов. Чаще всего CSS-in-JS встречается в компонентной архитектуре, например, в разработке на React, где каждому компоненту соответствуют свои стили.
+**CSS-in-JS** — это подход, при котором стили пишутся непосредственно в JavaScript-коде компонентов, а не в отдельных CSS-файлах. Это позволяет использовать возможности JavaScript для динамического управления стилями и обеспечивает изоляцию стилей на уровне компонентов, предотвращая конфликты и облегчая поддержку кода.
 
 Существуют разные решения, но все они работают схожим образом: стили задаются как [объекты](https://doka.guide/js/object/) или [шаблонные строки](https://doka.guide/js/template-strings/) и привязываются к компонентам через уникальные классы - это обеспечивает их изоляцию и упрощённое управление.
 
@@ -32,11 +21,11 @@ tags:
 
 ## Почему CSS-in-JS?
 
-Главное преимущество использования подхода CSS-in-JS — возможность использовать конструкции JS при описании стилей компонента, в зависимости от проекта это может помочь описывать динамические стили, которые зависят от условия, ещё помогает работать с темизацией.
+Главное преимущество использования подхода CSS-in-JS — возможность использовать конструкции JS при описании стилей компонента. В зависимости от проекта — это может помочь описывать динамические стили, которые зависят от условий, а также упростить работу с темизацией.
 
 <aside>
 
-CSS-in-JS не универсальное решение
+☝️ CSS-in-JS не универсальное решение
 
 Многие задачи, такие как изоляция стилей, динамическая стилизация и управление темами, можно решить с помощью традиционного CSS, препроцессоров или CSS Modules. Выбор подхода зависит от специфики проекта и предпочтений команды. CSS-in-JS предлагает определённые преимущества, но не является универсальным решением для всех случаев 🙂
 
@@ -50,13 +39,13 @@ CSS-in-JS не универсальное решение
 
 🏃‍♂️ Краткое содержание блока, для тех, кто спешит
 
-CSS зародился в 90-е годы и, будучи относительно простым, долго удовлетворял потребности веб-разработки, однако с появлением реактивных фреймворков и переходом к крупным SPA-приложениям стал очевиден ряд проблем в масштабировании стилей. Чтобы их решить, начиная с 2014 года, разработчики начали экспериментировать с подходом CSS-in-JS, что привело к созданию библиотек вроде [JSS](https://cssinjs.org/) и [Radium](https://github.com/formidablelabs/radium) (больше не поддерживается).
+CSS зародился в 90-е годы и, будучи относительно простым, долго удовлетворял потребности веб-разработки, однако с появлением реактивных фреймворков и переходом к крупным SPA-приложениям стал очевиден ряд проблем в масштабировании стилей. Чтобы их решить, начиная с 2014 года, разработчики начали экспериментировать с подходом CSS-in-JS, что привело к созданию библиотек вроде [JSS](https://cssinjs.org/) и подобных.
 
 </aside>
 
 ### Становление CSS
 
-CSS (Каскадные таблицы стилей) начал развитие в 90-е годы, был отмечен консорциумом [W3C](https://www.w3.org/) и начал стремительно развиваться. CSS стал методом определения стиля веб-документа. Он был мощным, чтобы удовлетворить потребности проектов тех лет, и был относительно прост, чтобы все желающие, могли приступить к работе в короткий срок.
+CSS (Каскадные таблицы стилей) начал развитие в 90-е годы, был отмечен консорциумом [W3C](https://www.w3.org/) и начал стремительно развиваться. CSS стал методом определения стиля веб-документа. Он был мощным, чтобы удовлетворить потребности проектов тех лет, и был относительно прост, чтобы все желающие могли приступить к работе в короткий срок.
 
 ### Появление реактивных фреймворков и SPA
 
@@ -73,27 +62,27 @@ CSS (Каскадные таблицы стилей) начал развитие
 В 2014 году Кристофер Шедо (инженер известной социальной сети) [выступает с докладом](https://speakerdeck.com/vjeux/react-css-in-js) о 7 проблемах CSS, которые нужно решить для беспроблемной разработки больших динамичных приложений:
 
 1. **Глобальное пространство имён**
-   Все CSS-селекторы живут в одной глобальной области, из-за чего стили разных компонентов могут конфликтовать или перезаписывать друг друга.
+Все CSS-селекторы живут в одной глобальной области, из-за чего стили разных компонентов могут конфликтовать или перезаписывать друг друга.
 
 1. **Зависимости**
-   При большом числе стилей сложно понять, в каком порядке подключать файлы и какие компоненты от чего зависят, что может привести к нежелательным коллизиям.
+При большом числе стилей сложно понять, в каком порядке подключать файлы и какие компоненты от чего зависят, что может привести к нежелательным коллизиям.
 
 1. **Удаление неиспользуемого кода**
-   В больших проектах часто копится CSS, который больше нигде не применяется, и его непросто безопасно убрать, не зная точного использования.
+В больших проектах часто копится CSS, который больше нигде не применяется, и его непросто безопасно убрать, не зная точного использования.
 
 1. **Минификация**
-   При сжатии стилей важно сохранять их читабельность для отладки, но и уменьшать размер, чтобы повысить производительность.
+При сжатии стилей важно сохранять их читабельность для отладки, но и уменьшать размер, чтобы повысить производительность.
 
 1. **Общий доступ к константам**
-   Трудно централизованно хранить и переиспользовать значения (например, цвета, размеры), чтобы все команды работали с едиными стилевыми параметрами.
+Трудно централизованно хранить и переиспользовать значения (например, цвета, размеры), чтобы все команды работали с едиными стилевыми параметрами.
 
 1. **Проблемы каскада**
-   Когда несколько правил стилизуют одни и те же элементы, порядок подключения CSS может приводить к непредсказуемым результатам и конфликтам.
+Когда несколько правил стилизуют одни и те же элементы, порядок подключения CSS может приводить к непредсказуемым результатам и конфликтам.
 
 1. **Изоляция**
-   Нужен способ гарантировать, что стили каждого компонента не затронут стили других, что особенно актуально в больших проектах.
+Нужен способ гарантировать, что стили каждого компонента не затронут стили других, что особенно актуально в больших проектах.
 
-В этом же году начинается работа над CSS-in-JS. Первыми экспериментальными подходами можно считать решения, появившиеся в экосистеме React. Одна из самых ранних и широко известных библиотек — [JSS](https://cssinjs.org/). Чуть позже начали появляться и другие проекты (например, [Radium](https://github.com/formidablelabs/radium)), но именно JSS часто упоминают как одну из первых полноценных реализаций «CSS в JavaScript».
+В этом же году начинается работа над CSS-in-JS. Первыми экспериментальными подходами можно считать решения, появившиеся в экосистеме React. Одна из самых ранних и широко известных библиотек — [JSS](https://cssinjs.org/). Чуть позже начали появляться и другие проекты, но именно JSS часто упоминают как одну из первых полноценных реализаций «CSS в JavaScript».
 
 ## Runtime / zero runtime
 
@@ -128,11 +117,11 @@ CSS (Каскадные таблицы стилей) начал развитие
 #### Библиотеки, реализующие подход
 
 - [Styled Components](https://styled-components.com/)
-  Использует шаблонные литералы для описания стилей внутри JS/TS. Генерирует уникальные классы в рантайме и монтирует их в DOM.
+Использует шаблонные литералы для описания стилей внутри JS/TS. Генерирует уникальные классы в рантайме и монтирует их в DOM.
 - [Emotion](https://emotion.sh/docs/styled)
-  Также генерирует стили во время исполнения. Позволяет писать стили через шаблонные литералы (`styled`) или объектный синтаксис (`css`).
+Также генерирует стили во время исполнения. Позволяет писать стили через шаблонные литералы (`styled`) или объектный синтаксис (`css`).
 - [JSS](https://cssinjs.org/)
-  Основан на использовании JS-объектов, которые конвертируются в CSS в рантайме.
+Основан на использовании JS-объектов, которые конвертируются в CSS в рантайме.
 
 ### Zero-runtime подход
 
@@ -154,9 +143,9 @@ CSS (Каскадные таблицы стилей) начал развитие
 #### Библиотеки, реализующие подход
 
 - [Linaria](https://linaria.dev/)
-  Анализирует CSS, написанный в виде шаблонных литералов, на этапе сборки и извлекает его в отдельные файлы. В рантайме остаются только классы.
+Анализирует CSS, написанный в виде шаблонных литералов, на этапе сборки и извлекает его в отдельные файлы. В рантайме остаются только классы.
 - [Vanilla Extract](https://vanilla-extract.style/)
-  Пишется на TypeScript/JS, но генерирует классические CSS-файлы во время сборки, практически без JS для стилизации на клиенте.
+Пишется на TypeScript/JS, но генерирует классические CSS-файлы во время сборки, практически без JS для стилизации на клиенте.
 
 ## На практике
 

From 064b356358a9e9945e41845601316768f2cd21e4 Mon Sep 17 00:00:00 2001
From: Ruslan Shevchenko <ruslan91999@gmail.com>
Date: Sun, 26 Jan 2025 16:38:16 +0300
Subject: [PATCH 05/11] =?UTF-8?q?=D0=A7=D0=B8=D0=BD=D0=B8=D1=82=20=D0=BE?=
 =?UTF-8?q?=D1=80=D1=84=D0=BE=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tools/css-in-js/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/css-in-js/index.md b/tools/css-in-js/index.md
index e8f488862a..934557f483 100644
--- a/tools/css-in-js/index.md
+++ b/tools/css-in-js/index.md
@@ -21,7 +21,7 @@ tags:
 
 ## Почему CSS-in-JS?
 
-Главное преимущество использования подхода CSS-in-JS — возможность использовать конструкции JS при описании стилей компонента. В зависимости от проекта — это может помочь описывать динамические стили, которые зависят от условий, а также упростить работу с темизацией.
+Главное преимущество использования подхода CSS-in-JS — возможность использовать конструкции JS при описании стилей компонента. В зависимости от проекта, это может помочь описывать динамические стили, которые зависят от условий, а также упростить работу с темизацией.
 
 <aside>
 

From b3074462471013749733d4ddf11329695b764c80 Mon Sep 17 00:00:00 2001
From: Ruslan Shevchenko <ruslan91999@gmail.com>
Date: Sun, 26 Jan 2025 18:37:38 +0300
Subject: [PATCH 06/11] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D1=80=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=20?=
 =?UTF-8?q?=D0=9E=D1=81=D0=BD=D0=BE=D0=B2=D1=8B=20=D1=81=D0=B8=D0=BD=D1=82?=
 =?UTF-8?q?=D0=B0=D0=BA=D1=81=D0=B8=D1=81=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Статья получилась очень теоритической, кажется, что кусочки кода чуть-чуть добавят ясности
---
 tools/css-in-js/index.md | 63 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/tools/css-in-js/index.md b/tools/css-in-js/index.md
index 934557f483..ca8153d506 100644
--- a/tools/css-in-js/index.md
+++ b/tools/css-in-js/index.md
@@ -147,6 +147,69 @@ CSS (Каскадные таблицы стилей) начал развитие
 - [Vanilla Extract](https://vanilla-extract.style/)
 Пишется на TypeScript/JS, но генерирует классические CSS-файлы во время сборки, практически без JS для стилизации на клиенте.
 
+## Основы синтаксиса
+
+Синтаксис у большинства решений очень похож, мы рассмотрим основы синтаксиса на псевдокоде, за подробностями лучше заглянуть в документацию к конкретной библиотеке.
+
+### Простейший компонент
+
+Ниже показан пример объявления компонента-кнопки, стили для которого описаны прямо внутри JavaScript-кода. Благодаря функции `styled('button')` создаётся новый компонент, наследующий все свойства обычной кнопки, но обладающий заданными стилями.
+
+```javascript
+import {styled} from "css-in-js" // псевдобиблиотека для примера
+
+const Button = styled('button')`
+  color: white;
+  background-color: black;
+  border: none;
+`
+
+export default Button;
+```
+
+### Динамические стили
+
+Ниже показана функция, которая генерирует динамические стили для фона зависимости от флага `isPrimary`. При `true` функция вернёт синий цвет фона, при `false` — серый.
+
+```javascript
+import {css} from "css-in-js" // псевдобиблиотека для примера
+
+function getBackgroundColor(isPrimary) {
+  return css`
+    background-color: ${isPrimary ? 'blue' : 'gray'};
+
+    &:hover {
+      background-color: ${isPrimary ? 'darkblue' : 'darkgray'};
+    }
+  `;
+}
+
+export {getBackgroundColor};
+```
+
+В первом фрагменте создаётся функция `getBackgroundColor(isPrimary)`, которая возвращает блок CSS с разными цветами фона и `:hover` в зависимости от аргумента `isPrimary`. Во втором примере мы видим, как этот фрагмент может **переиспользоваться**: в новом компоненте `Button` мы вызываем `getBackgroundColor(true)` и вставляем результат в шаблон стилей, «включая» логику динамической стилизации, уже описанной в функции. Это удобно, если нужно единообразно управлять цветами фона в разных компонентах, сохранив их стили в одном месте.
+
+```javascript
+import {styled} from "css-in-js" // псевдобиблиотека для примера
+import {getBackgroundColor} from "./utils.js"
+
+const Button = styled('button')`
+  color: white;
+  border: none;
+  ${getBackgroundColor(true)};
+`
+
+export default Button;
+```
+
+<aside>
+
+💡 Что такое `const styles = css``;`?
+
+В основе такого подхода лежит Теговый шаблон, подробнее об этом мы рассказали [в статье про шаблонные строки](https://doka.guide/js/template-strings/#tegovyy-shablon).
+
+</aside>
+
 ## На практике
 
 Чаще всего выбор подхода к CSS-in-JS определяется требованиями к производительности, объёмом динамики в интерфейсе и готовностью настраивать сборку. При этом на практике часто всё сводится к двум простым сценариям:

From 808632f22666a3f007afe3f22dec9e02f8c34bbc Mon Sep 17 00:00:00 2001
From: Alena Batitskaia <solarrust@users.noreply.github.com>
Date: Wed, 29 Jan 2025 09:39:48 +0000
Subject: [PATCH 07/11] =?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=B7=D0=BD=D0=B0=D1=87=D0=BE=D0=BA=20?=
 =?UTF-8?q?=D0=B7=D0=B0=20=D0=BF=D0=B5=D1=80=D0=B2=D1=8B=D0=B9=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=BD=D1=82=D1=80=D0=B8=D0=B1=D1=8C=D1=8E=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 people/ruslanpro01/index.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/people/ruslanpro01/index.md b/people/ruslanpro01/index.md
index a673a2a961..3d0bfa6ffa 100644
--- a/people/ruslanpro01/index.md
+++ b/people/ruslanpro01/index.md
@@ -1,4 +1,6 @@
 ---
 name: 'Руслан Шевченко'
 url: https://github.com/RuslanPro01
+badges:
+  - first-contribution-small
 ---

From db20c3365969771837d59deb456c539ec435c7af Mon Sep 17 00:00:00 2001
From: Ruslan Shevchenko <ruslan91999@gmail.com>
Date: Wed, 29 Jan 2025 16:20:24 +0300
Subject: [PATCH 08/11] =?UTF-8?q?=D0=92=D0=BD=D0=BE=D1=81=D0=B8=D1=82=20?=
 =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B2=D0=BE=D0=BD=D0=B0=D1=87=D0=B0=D0=BB?=
 =?UTF-8?q?=D1=8C=D0=BD=D1=8B=D0=B5=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?=
 =?UTF-8?q?=20=D0=BF=D0=BE=20=D1=80=D0=B5=D0=BA=D0=BE=D0=BC=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B4=D0=B0=D1=86=D0=B8=D1=8F=D0=BC=20=D0=BE=D1=82=20@solarrus?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tools/css-in-js/index.md | 51 ++++++++++++++++++++--------------------
 1 file changed, 26 insertions(+), 25 deletions(-)

diff --git a/tools/css-in-js/index.md b/tools/css-in-js/index.md
index ca8153d506..07de9460b7 100644
--- a/tools/css-in-js/index.md
+++ b/tools/css-in-js/index.md
@@ -15,7 +15,7 @@ tags:
 
 **CSS-in-JS** — это подход, при котором стили пишутся непосредственно в JavaScript-коде компонентов, а не в отдельных CSS-файлах. Это позволяет использовать возможности JavaScript для динамического управления стилями и обеспечивает изоляцию стилей на уровне компонентов, предотвращая конфликты и облегчая поддержку кода.
 
-Существуют разные решения, но все они работают схожим образом: стили задаются как [объекты](https://doka.guide/js/object/) или [шаблонные строки](https://doka.guide/js/template-strings/) и привязываются к компонентам через уникальные классы - это обеспечивает их изоляцию и упрощённое управление.
+Существуют разные решения, но все они работают схожим образом: стили задаются как [объекты](/js/object/) или [шаблонные строки](/js/template-strings/) и привязываются к компонентам через уникальные классы — это обеспечивает их изоляцию и упрощённое управление.
 
 Основные библиотеки для написания CSS внутри JS — это [Styled Components](https://styled-components.com/), [Emotion](https://emotion.sh/docs/introduction), [Styled JSX](https://github.com/vercel/styled-jsx) и [vanilla-extract](https://vanilla-extract.style/).
 
@@ -27,19 +27,19 @@ tags:
 
 ☝️ CSS-in-JS не универсальное решение
 
-Многие задачи, такие как изоляция стилей, динамическая стилизация и управление темами, можно решить с помощью традиционного CSS, препроцессоров или CSS Modules. Выбор подхода зависит от специфики проекта и предпочтений команды. CSS-in-JS предлагает определённые преимущества, но не является универсальным решением для всех случаев 🙂
+Многие задачи, такие как изоляция стилей, динамическая стилизация и управление темами, можно решить с помощью традиционного CSS, препроцессоров или CSS Modules. Выбор подхода зависит от специфики проекта и предпочтений команды. CSS-in-JS предлагает определённые преимущества, но не является универсальным решением для всех случаев.
 
 </aside>
 
-## Краткая история CSS-in-JS
+## Краткая история
 
-Тут мы бегло рассмотрим историю появления CSS-in-JS решений.
+Бегло рассмотрим историю появления CSS-in-JS решений.
 
 <aside>
 
-🏃‍♂️ Краткое содержание блока, для тех, кто спешит
+🏃‍♂️ В двух словах, для тех, кто спешит
 
-CSS зародился в 90-е годы и, будучи относительно простым, долго удовлетворял потребности веб-разработки, однако с появлением реактивных фреймворков и переходом к крупным SPA-приложениям стал очевиден ряд проблем в масштабировании стилей. Чтобы их решить, начиная с 2014 года, разработчики начали экспериментировать с подходом CSS-in-JS, что привело к созданию библиотек вроде [JSS](https://cssinjs.org/) и подобных.
+CSS зародился в 90-е годы и, будучи относительно простым, долго удовлетворял потребности веб-разработки. Однако с появлением реактивных фреймворков и переходом к крупным SPA-приложениям стал очевиден ряд проблем в масштабировании стилей. Чтобы их решить, начиная с 2014 года, разработчики начали экспериментировать с подходом CSS-in-JS, что привело к созданию библиотек вроде [JSS](https://cssinjs.org/) и подобных.
 
 </aside>
 
@@ -51,11 +51,11 @@ CSS (Каскадные таблицы стилей) начал развитие
 
 До 2010-х годов, в основном создавались многостраничные приложения с четким разделением ответственности:
 
-- HTML — разметка страницы,
+- HTML — определял разметку страницы,
 - CSS — описывал, как они будут выглядеть,
 - JavaScript — отвечал за интерактивность.
 
-С течением времени развивался не только CSS, но и JavaScript — это приводит к появлению новой экосистемы разработки и современных реактивных фреймворков: Angular (2010), React (2013), Vuejs (2014). Разработка приложений начинает смещаться от многостраничных приложений на разработку одностраничных приложений (SPA), а пользователи стали ожидать от них более динамичного и сложного поведения.
+С течением времени развивался не только CSS, но и JavaScript — это приводит к появлению новой экосистемы разработки и современных реактивных фреймворков: Angular (2010), React (2013), Vue.js (2014). Разработка приложений начинает смещаться от многостраничных приложений на разработку одностраничных приложений (SPA), а пользователи стали ожидать от них более динамичного и сложного поведения.
 
 ### Кристофер Шедо, его доклад о проблемах CSS и разработка первых решений CSS-in-JS
 
@@ -84,15 +84,13 @@ CSS (Каскадные таблицы стилей) начал развитие
 
 В этом же году начинается работа над CSS-in-JS. Первыми экспериментальными подходами можно считать решения, появившиеся в экосистеме React. Одна из самых ранних и широко известных библиотек — [JSS](https://cssinjs.org/). Чуть позже начали появляться и другие проекты, но именно JSS часто упоминают как одну из первых полноценных реализаций «CSS в JavaScript».
 
-## Runtime / zero runtime
+## Runtime и Zero-runtime
 
 За время развития CSS-in-JS появилось несколько вариантов реализации: от полностью рантайм-решений до почти «нулевого» времени исполнения. Ниже разберём ключевые варианты и их особенности.
 
 <aside>
 
-💡 Рантайм в контексте фронтенд-разработки
-
-обычно означает, что часть логики (в данном случае генерация стилей) выполняется напрямую в браузере, «на лету» при запуске приложения. То есть когда пользователь уже открыл страницу, JS-код просчитывает стили и «вживую» вставляет их в `<style>` или управляет классами.
+💡 Рантайм в контексте фронтенд-разработки обычно означает, что часть логики (в данном случае генерация стилей) выполняется напрямую в браузере, «на лету» при запуске приложения. То есть когда пользователь уже открыл страницу, JS-код просчитывает стили и «вживую» вставляет их в [`<style>`](/html/style/) или управляет классами.
 
 В отличие от этого, «zero-runtime» решения максимально переносят логику (включая генерацию CSS) на этап сборки, чтобы в браузер попадал уже готовый, статический CSS.
 
@@ -102,12 +100,12 @@ CSS (Каскадные таблицы стилей) начал развитие
 
 #### Суть подхода
 
-Стили формируются и инжектируются в DOM во время исполнения (рантайма) приложения. В процессе рендера или при изменении состояний создаются (или обновляются) соответствующие `<style>` или классы в браузере.
+Стили формируются и добавляются в [DOM](/js/dom/) во время исполнения (рантайма) приложения. В процессе рендера или при изменении состояний создаются (или обновляются) соответствующие `<style>` или классы в браузере.
 
 #### Плюсы
 
-- Легко менять стили на лету в зависимости от состояния, темизации и т. д.
-- Удобно изолировать логику стилизации в самих компонентах, сохраняя стиль и логику рядом
+- Легко менять стили на лету в зависимости от состояния, темизации и так далее.
+- Удобно изолировать логику стилизации в самих компонентах, сохраняя стиль и логику рядом.
 
 #### Минусы
 
@@ -117,11 +115,11 @@ CSS (Каскадные таблицы стилей) начал развитие
 #### Библиотеки, реализующие подход
 
 - [Styled Components](https://styled-components.com/)
-Использует шаблонные литералы для описания стилей внутри JS/TS. Генерирует уникальные классы в рантайме и монтирует их в DOM.
+Использует шаблонные литералы для описания стилей внутри JavaScript/TypeScript. Генерирует уникальные классы в рантайме и монтирует их в DOM.
 - [Emotion](https://emotion.sh/docs/styled)
 Также генерирует стили во время исполнения. Позволяет писать стили через шаблонные литералы (`styled`) или объектный синтаксис (`css`).
 - [JSS](https://cssinjs.org/)
-Основан на использовании JS-объектов, которые конвертируются в CSS в рантайме.
+Основан на использовании JavaScript-объектов, которые конвертируются в CSS в рантайме.
 
 ### Zero-runtime подход
 
@@ -131,14 +129,14 @@ CSS (Каскадные таблицы стилей) начал развитие
 
 #### Плюсы
 
-- Нет накладных расходов в браузере (минимальный дополнительный JS-код)
-- Благодаря пункту выше обычно получаются улучшенные показатели производительности и метрик загрузки
-- Проще реализовать серверный рендеринг, так как стили уже готовы к моменту, когда HTML отдается клиенту
+- Нет накладных расходов в браузере (минимальный дополнительный JS-код).
+- Благодаря пункту выше обычно получаются улучшенные показатели производительности и метрик загрузки.
+- Проще реализовать серверный рендеринг, так как стили уже готовы к моменту, когда HTML отдается клиенту.
 
 #### Минусы
 
-- Ограничения в динамических стилях: большая часть логики должна быть статически рассчитана во время сборки, поэтому стили, зависящие от состояний, могут быть менее гибкими
-- Сложность настройки сборки: обычно требует дополнительной настройки сборщиков (Webpack, Vite и другие)
+- Ограничения в динамических стилях: большая часть логики должна быть статически рассчитана во время сборки, поэтому зависимые от состояний стили, могут быть менее гибкими.
+- Сложность настройки сборки: обычно требует дополнительной настройки сборщиков (Webpack, Vite и другие).
 
 #### Библиотеки, реализующие подход
 
@@ -149,7 +147,7 @@ CSS (Каскадные таблицы стилей) начал развитие
 
 ## Основы синтаксиса
 
-Синтаксис у большинства решений очень похож, мы рассмотрим основы синтаксиса на псевдокоде, за подробностями лучше заглянуть в документацию к конкретной библиотеке.
+Синтаксис у большинства решений очень похож. Рассмотрим основы синтаксиса на псевдокоде. За подробностями лучше заглянуть в документацию к конкретной библиотеке.
 
 ### Простейший компонент
 
@@ -187,7 +185,10 @@ function getBackgroundColor(isPrimary) {
 export {getBackgroundColor};
 ```
 
-В первом фрагменте создаётся функция `getBackgroundColor(isPrimary)`, которая возвращает блок CSS с разными цветами фона и `:hover` в зависимости от аргумента `isPrimary`. Во втором примере мы видим, как этот фрагмент может **переиспользоваться**: в новом компоненте `Button` мы вызываем `getBackgroundColor(true)` и вставляем результат в шаблон стилей, «включая» логику динамической стилизации, уже описанной в функции. Это удобно, если нужно единообразно управлять цветами фона в разных компонентах, сохранив их стили в одном месте.
+
+В первом фрагменте создаётся функция `getBackgroundColor(isPrimary)`, которая возвращает блок CSS с разными цветами фона в покое и при наведении курсора в зависимости от аргумента `isPrimary`.
+
+Во втором примере показано, как этот фрагмент может **переиспользоваться**: в новом компоненте `Button` вызывается `getBackgroundColor(true)` и результат вставляется в шаблон стилей, «включая» логику динамической стилизации, уже описанной в функции. Это удобно, если нужно единообразно управлять цветами фона в разных компонентах, сохранив их стили в одном месте.
 
 ```javascript
 import {styled} from "css-in-js" // псевдобиблиотека для примера
@@ -206,7 +207,7 @@ export default Button;
 
 💡 Что такое `const styles = css``;`?
 
-В основе такого подхода лежит Теговый шаблон, подробнее об этом мы рассказали [в статье про шаблонные строки](https://doka.guide/js/template-strings/#tegovyy-shablon).
+В основе такого подхода лежит _теговый шаблон_, подробнее об этом в статье про «[Шаблонные строки](/js/template-strings/#tegovyy-shablon)».
 
 </aside>
 

From 432551950a21b5f98173b8355b4fe75a268ca45e Mon Sep 17 00:00:00 2001
From: Ruslan Shevchenko <ruslan91999@gmail.com>
Date: Wed, 29 Jan 2025 17:08:22 +0300
Subject: [PATCH 09/11] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=BD=D0=BE?=
 =?UTF-8?q?=D1=81=D0=B8=D1=82=20=D1=80=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=20"?=
 =?UTF-8?q?=D0=9D=D0=B0=20=D0=BF=D1=80=D0=B0=D0=BA=D1=82=D0=B8=D0=BA=D0=B5?=
 =?UTF-8?q?=20=D0=B2=20practice"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tools/css-in-js/practice/ruslanpro01.md | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 tools/css-in-js/practice/ruslanpro01.md

diff --git a/tools/css-in-js/practice/ruslanpro01.md b/tools/css-in-js/practice/ruslanpro01.md
new file mode 100644
index 0000000000..e69de29bb2

From 2a3aba0ddf7687f4ee1972791ad17fcc32be4a72 Mon Sep 17 00:00:00 2001
From: Ruslan Shevchenko <ruslan91999@gmail.com>
Date: Wed, 29 Jan 2025 17:11:56 +0300
Subject: [PATCH 10/11] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=BD=D0=BE?=
 =?UTF-8?q?=D1=81=D0=B8=D1=82=20=D1=80=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=20"?=
 =?UTF-8?q?=D0=9D=D0=B0=20=D0=BF=D1=80=D0=B0=D0=BA=D1=82=D0=B8=D0=BA=D0=B5?=
 =?UTF-8?q?=20=D0=B2=20practice"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tools/css-in-js/index.md                | 7 -------
 tools/css-in-js/practice/ruslanpro01.md | 4 ++++
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/tools/css-in-js/index.md b/tools/css-in-js/index.md
index 07de9460b7..b88aae2825 100644
--- a/tools/css-in-js/index.md
+++ b/tools/css-in-js/index.md
@@ -210,10 +210,3 @@ export default Button;
 В основе такого подхода лежит _теговый шаблон_, подробнее об этом в статье про «[Шаблонные строки](/js/template-strings/#tegovyy-shablon)».
 
 </aside>
-
-## На практике
-
-Чаще всего выбор подхода к CSS-in-JS определяется требованиями к производительности, объёмом динамики в интерфейсе и готовностью настраивать сборку. При этом на практике часто всё сводится к двум простым сценариям:
-
-- Если нужна «минимальная боль» при использовании динамических стилей и важна поддержка большого сообщества — часто берут **Emotion** или **Styled Components**.
-- Если же приоритет — производительность и нет потребности в постоянном рендере уникальных стилей, можно обратить внимание на **Linaria** или **Vanilla Extract**.
diff --git a/tools/css-in-js/practice/ruslanpro01.md b/tools/css-in-js/practice/ruslanpro01.md
index e69de29bb2..f1364132fc 100644
--- a/tools/css-in-js/practice/ruslanpro01.md
+++ b/tools/css-in-js/practice/ruslanpro01.md
@@ -0,0 +1,4 @@
+🛠️ Какую библиотеку выбрать? Чаще всего выбор подхода к CSS-in-JS определяется требованиями к производительности, объёмом динамики в интерфейсе и готовностью настраивать сборку. При этом часто всё сводится к двум простым сценариям:
+
+- Если нужна «минимальная боль» при использовании динамических стилей и важна поддержка большого сообщества — часто берут **Emotion** или **Styled Components**.
+- Если же приоритет — производительность и нет потребности в постоянном рендере уникальных стилей, можно обратить внимание на **Linaria** или **Vanilla Extract**.

From d4c04ec184c6bb4c1d0006a2301310985499987c Mon Sep 17 00:00:00 2001
From: Ruslan Shevchenko <ruslan91999@gmail.com>
Date: Fri, 31 Jan 2025 09:05:05 +0300
Subject: [PATCH 11/11] =?UTF-8?q?=D0=92=D0=BD=D0=BE=D1=81=D0=B8=D1=82=20?=
 =?UTF-8?q?=D0=BE=D0=BA=D0=BE=D0=BD=D1=87=D0=B0=D1=82=D0=B5=D0=BB=D1=8C?=
 =?UTF-8?q?=D0=BD=D1=8B=D0=B5=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tools/css-in-js/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tools/css-in-js/index.md b/tools/css-in-js/index.md
index b88aae2825..c9b5794ed0 100644
--- a/tools/css-in-js/index.md
+++ b/tools/css-in-js/index.md
@@ -1,6 +1,6 @@
 ---
 title: "Обзор CSS-in-JS"
-description: "CSS в JavaScript — разберём, как можно описывать компоненты и стили, не создав ни одного CSS-файла"
+description: "CSS в JavaScript — разберём, как можно описывать компоненты и стили, не создав ни одного CSS-файла."
 authors:
   - ruslanpro01
 related:
@@ -37,7 +37,7 @@ tags:
 
 <aside>
 
-🏃‍♂️ В двух словах, для тех, кто спешит
+🏃‍♂️ Многабукафф / не осилил
 
 CSS зародился в 90-е годы и, будучи относительно простым, долго удовлетворял потребности веб-разработки. Однако с появлением реактивных фреймворков и переходом к крупным SPA-приложениям стал очевиден ряд проблем в масштабировании стилей. Чтобы их решить, начиная с 2014 года, разработчики начали экспериментировать с подходом CSS-in-JS, что привело к созданию библиотек вроде [JSS](https://cssinjs.org/) и подобных.