Добавляет статью про CSS-in-JS #5670

RuslanPro01 · 2025-01-26T11:19:57Z

Описание

Добавляет статью про CSS-in-JS решения.
Это мой превый подобный опыт, так что буду рад обратной связи 😊

Closes #5238

Превью: https://content-5670.dev.doka.guide/tools/css-in-js/

Чек-лист

Текст оформлен согласно руководству по стилю
Ссылки на внутренние материалы начинаются со слеша и заканчиваются слэшем либо якорем на заголовок (/css/color/, /tools/json/, /tools/gulp/#kak-ponyat)
Ссылки на картинки, видео и демки относительные (images/example.png, demos/example/, ../demos/example/)

…"На практике"

ra1nbow1

Привет!

Спасибо за такую фундаментальную документацию) Я внес пару предложений

tools/css-in-js/index.md

RuslanPro01 · 2025-01-26T12:56:29Z

@ra1nbow1 большое спасибо за апдейт, беру в работу!)

tools/css-in-js/index.md

Статья получилась очень теоритической, кажется, что кусочки кода чуть-чуть добавят ясности

people/ruslanpro01/index.md

solarrust

Потрясно! С большим интересом прочитала. Спасибо!

Оставила несколько предложений по улучшению. Не пугайся, что их много. Все они больше про форматирование и про перестановку слов =)
Всё можем обсуждать!

tools/css-in-js/index.md

solarrust

Кайф, мне всё нравится!

RuslanPro01 · 2025-02-04T13:29:13Z

@solarrust, подскажи, пожалуйста, а мы тут ещё апрувы ждём или нужно сделать что-то еще?)

solarrust · 2025-02-04T13:30:47Z

@solarrust, подскажи, пожалуйста, а мы тут ещё апрувы ждём или нужно сделать что-то еще?)

Ага, ждём ещё аппрув от редактора раздела @HellSquirrel =)

HellSquirrel

Привет! Спасибо большое за статью. Я добавила несколько замечаний. Давай немножко уточним формулировки и переставим парочку абзацев :)

tools/css-in-js/index.md

HellSquirrel · 2025-02-27T19:21:43Z

tools/css-in-js/index.md

+
+**CSS-in-JS** — это подход, при котором стили пишутся непосредственно в JavaScript-коде компонентов, а не в отдельных CSS-файлах. Это позволяет использовать возможности JavaScript для динамического управления стилями и обеспечивает изоляцию стилей на уровне компонентов, предотвращая конфликты и облегчая поддержку кода.
+
+Существуют разные решения, но все они работают схожим образом: стили задаются как [объекты](/js/object/) или [шаблонные строки](/js/template-strings/) и привязываются к компонентам через уникальные классы — это обеспечивает их изоляцию и упрощённое управление.


И тут бы хорошо немного обобщить. Вот пример из vanilla-extract

margin: 0 });``` здесь вызывается функция и стиль не привязывается к классу

Добавил в обобщении

HellSquirrel · 2025-02-27T19:24:03Z

tools/css-in-js/index.md

+
+Существуют разные решения, но все они работают схожим образом: стили задаются как [объекты](/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/).


Это не все библиотеки которыми пользуются. Есть еще :) (stitches, material-ui...)

Suggested change

Основные библиотеки для написания 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 библиотек: [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/).

Я тут брал данные из stateofcss, взял первые, самы популярные на тот момент, конечно список можно продолжить, н я хотел показать популярные решения. Могу уточнить что это на основе данные из stateofcss

HellSquirrel · 2025-02-27T19:25:01Z

tools/css-in-js/index.md

+
+## Почему CSS-in-JS?
+
+Главное преимущество использования подхода CSS-in-JS — возможность использовать конструкции JS при описании стилей компонента. В зависимости от проекта, это может помочь описывать динамические стили, которые зависят от условий, а также упростить работу с темизацией.


Возможно тут стоит добавить несколько слов про типизацию. Vanilla-extract продвигает это как основное приимущество фреймворка

HellSquirrel · 2025-02-27T19:25:25Z

tools/css-in-js/index.md

+
+☝️ CSS-in-JS не универсальное решение
+
+Многие задачи, такие как изоляция стилей, динамическая стилизация и управление темами, можно решить с помощью традиционного CSS, препроцессоров или CSS Modules. Выбор подхода зависит от специфики проекта и предпочтений команды. CSS-in-JS предлагает определённые преимущества, но не является универсальным решением для всех случаев.


Давайте добавим ссылочка на CSS Modules

Я не виду в доке статьи про CSS Modules, добавить сторонний ресурс?)

HellSquirrel · 2025-02-27T19:25:53Z

tools/css-in-js/index.md

+
+### Становление CSS
+
+CSS (Каскадные таблицы стилей) начал развитие в 90-е годы, был отмечен консорциумом [W3C](https://www.w3.org/) и начал стремительно развиваться. CSS стал методом определения стиля веб-документа. Он был мощным, чтобы удовлетворить потребности проектов тех лет, и был относительно прост, чтобы все желающие могли приступить к работе в короткий срок.


@solarrust а тут точно единственное число?)

CSS как язык описания внешнего вида страницы, поэтому ед. число)

HellSquirrel · 2025-02-27T19:28:06Z

tools/css-in-js/index.md

+
+## Runtime и Zero-runtime
+
+За время развития CSS-in-JS появилось несколько вариантов реализации: от полностью рантайм-решений до почти «нулевого» времени исполнения. Ниже разберём ключевые варианты и их особенности.


Давай попробуем не упоминать термин без объяснения. Было бы лучше так
За время развития появилось несколько вариантов

рантайм

но-рантайм
И не будем убирать эти уточнения в это очень важный момент

Переработал, постарался уточнить определния сразу

HellSquirrel · 2025-02-27T19:28:28Z

tools/css-in-js/index.md

+
+💡 Рантайм в контексте фронтенд-разработки обычно означает, что часть логики (в данном случае генерация стилей) выполняется напрямую в браузере, «на лету» при запуске приложения. То есть когда пользователь уже открыл страницу, JS-код просчитывает стили и «вживую» вставляет их в [`<style>`](/html/style/) или управляет классами.
+
+В отличие от этого, «zero-runtime» решения максимально переносят логику (включая генерацию CSS) на этап сборки, чтобы в браузер попадал уже готовый, статический CSS.


Zero-runtime переносят полностью. Almost-zero максимально

HellSquirrel · 2025-02-27T19:31:08Z

tools/css-in-js/index.md

+
+<aside>
+
+💡 Рантайм в контексте фронтенд-разработки обычно означает, что часть логики (в данном случае генерация стилей) выполняется напрямую в браузере, «на лету» при запуске приложения. То есть когда пользователь уже открыл страницу, JS-код просчитывает стили и «вживую» вставляет их в [`<style>`](/html/style/) или управляет классами.


Не обязательно в style. Можно определять css переменные на лету или
что то типа такого
const sheet = new CSSStyleSheet(); sheet.replaceSync("body { background-color: lightblue; }"); document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

Обощил

HellSquirrel · 2025-02-27T19:31:38Z

tools/css-in-js/index.md

+
+#### Суть подхода
+
+Стили формируются и добавляются в [DOM](/js/dom/) во время исполнения (рантайма) приложения. В процессе рендера или при изменении состояний создаются (или обновляются) соответствующие `<style>` или классы в браузере.


как я уточняла выше механик больше чем две

Добавил блок о том, что механик несколько, чтобы не перегуржать и без того не самую короткую статью 😅

ra1nbow1 · 2025-05-05T16:46:35Z

@RuslanPro01 привет! Нужна помощь по этой статье?

RuslanPro01 · 2025-06-03T15:56:05Z

@ra1nbow1, привет
В работе, если что

ra1nbow1

Кайф. Ждем финальный аппрув от Полины

ra1nbow1 · 2025-06-16T18:08:03Z

@HellSquirrel Полин, посмотри пожалуйста

HellSquirrel · 2025-07-01T18:40:36Z

Супер спасибо!

github-actions · 2025-07-01T18:46:48Z

Превью контента из 0bb56ea опубликовано.

Ruslan Shevchenko added 3 commits January 17, 2025 15:49

Добавляет страницу автора

0aceabc

Начинает работу над статьёй про CSS-in-JS

41d285d

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

525d8f1

…"На практике"

RuslanPro01 requested review from igsekor, HellSquirrel and ra1nbow1 as code owners January 26, 2025 11:19

github-actions bot added веб-платформа Контент по Веб-платформе статья Расширенный материал labels Jan 26, 2025

vitya-ne assigned RuslanPro01 Jan 26, 2025

TatianaFokina changed the title ~~Article/css in js~~ Добавляет статью про CSS-in-JS Jan 26, 2025

ra1nbow1 requested changes Jan 26, 2025

View reviewed changes

tools/css-in-js/index.md Outdated Show resolved Hide resolved

Вносит правки по рекомендациям от @ra1nbow1

31b6b87

RuslanPro01 requested a review from ra1nbow1 January 26, 2025 13:28

ra1nbow1 requested changes Jan 26, 2025

View reviewed changes

tools/css-in-js/index.md Outdated Show resolved Hide resolved

Чинит орфографию

064b356

ra1nbow1 approved these changes Jan 26, 2025

View reviewed changes

Добавляет раздел Основы синтаксиса

b307446

Статья получилась очень теоритической, кажется, что кусочки кода чуть-чуть добавят ясности

solarrust reviewed Jan 29, 2025

View reviewed changes

people/ruslanpro01/index.md Show resolved Hide resolved

Добавляет значок за первый контрибьют

808632f

solarrust reviewed Jan 29, 2025

View reviewed changes

Ruslan Shevchenko added 3 commits January 29, 2025 16:20

Вносит первоначальные правки по рекомендациям от @solarrust

db20c33

Переносит раздел "На практике в practice"

4325519

Переносит раздел "На практике в practice"

2a3aba0

RuslanPro01 requested a review from solarrust January 29, 2025 14:14

solarrust approved these changes Jan 30, 2025

View reviewed changes

Вносит окончательные правки

d4c04ec

HellSquirrel reviewed Feb 27, 2025

View reviewed changes

Вносит правки по замечаниям @HellSquirrel.

580f6f8

RuslanPro01 requested a review from HellSquirrel June 4, 2025 08:01

ra1nbow1 approved these changes Jun 16, 2025

View reviewed changes

Чуть-чуть редактирует

0bb56ea

HellSquirrel approved these changes Jul 1, 2025

View reviewed changes

HellSquirrel merged commit 8b8ad48 into doka-guide:main Jul 1, 2025
6 checks passed


		CSS-in-JS — это подход, при котором стили пишутся непосредственно в JavaScript-коде компонентов, а не в отдельных CSS-файлах. Это позволяет использовать возможности JavaScript для динамического управления стилями и обеспечивает изоляцию стилей на уровне компонентов, предотвращая конфликты и облегчая поддержку кода.

		Существуют разные решения, но все они работают схожим образом: стили задаются как [объекты](/js/object/) или [шаблонные строки](/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/).

	Основные библиотеки для написания 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 библиотек: [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 при описании стилей компонента. В зависимости от проекта, это может помочь описывать динамические стили, которые зависят от условий, а также упростить работу с темизацией.


		☝️ CSS-in-JS не универсальное решение

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


		### Становление CSS

		CSS (Каскадные таблицы стилей) начал развитие в 90-е годы, был отмечен консорциумом [W3C](https://www.w3.org/) и начал стремительно развиваться. CSS стал методом определения стиля веб-документа. Он был мощным, чтобы удовлетворить потребности проектов тех лет, и был относительно прост, чтобы все желающие могли приступить к работе в короткий срок.


		## Runtime и Zero-runtime

		За время развития CSS-in-JS появилось несколько вариантов реализации: от полностью рантайм-решений до почти «нулевого» времени исполнения. Ниже разберём ключевые варианты и их особенности.


		💡 Рантайм в контексте фронтенд-разработки обычно означает, что часть логики (в данном случае генерация стилей) выполняется напрямую в браузере, «на лету» при запуске приложения. То есть когда пользователь уже открыл страницу, JS-код просчитывает стили и «вживую» вставляет их в [`<style>`](/html/style/) или управляет классами.

		В отличие от этого, «zero-runtime» решения максимально переносят логику (включая генерацию CSS) на этап сборки, чтобы в браузер попадал уже готовый, статический CSS.


		<aside>

		💡 Рантайм в контексте фронтенд-разработки обычно означает, что часть логики (в данном случае генерация стилей) выполняется напрямую в браузере, «на лету» при запуске приложения. То есть когда пользователь уже открыл страницу, JS-код просчитывает стили и «вживую» вставляет их в [`<style>`](/html/style/) или управляет классами.


		#### Суть подхода

		Стили формируются и добавляются в [DOM](/js/dom/) во время исполнения (рантайма) приложения. В процессе рендера или при изменении состояний создаются (или обновляются) соответствующие `<style>` или классы в браузере.

Добавляет статью про CSS-in-JS #5670

Добавляет статью про CSS-in-JS #5670

Uh oh!

Conversation

RuslanPro01 commented Jan 26, 2025 • edited by solarrust Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Описание

Чек-лист

Uh oh!

ra1nbow1 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

RuslanPro01 commented Jan 26, 2025

Uh oh!

Uh oh!

Uh oh!

solarrust left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

solarrust left a comment

Choose a reason for hiding this comment

Uh oh!

RuslanPro01 commented Feb 4, 2025

Uh oh!

solarrust commented Feb 4, 2025

Uh oh!

HellSquirrel left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RuslanPro01 commented Jan 26, 2025 •

edited by solarrust

Loading