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

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

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 определяется требованиями к производительности, объёмом динамики в интерфейсе и готовностью настраивать сборку. При этом на практике часто всё сводится к двум простым сценариям: