Что такое CSS в JS?

Этот подход использует JavaScript для написания CSS.

CSS определяется в компонентах, которые не зависят от внешних файлов CSS.

В следующем примере стилизация выполняется с помощью компонента styled-component.
(Цитируется по: https://styled-components.com)

const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;

  ${props => props.primary && css`
    background: white;
    color: black;
  `}
`

render(
  <div>
    <Button
      href="https://github.com/styled-components/styled-components"
      target="_blank"
      rel="noopener"
      primary
    >
      GitHub
    </Button>

    <Button as={Link} href="/docs">
      Documentation
    </Button>
  </div>
)

Вход в полноэкранный режим Выйти из полноэкранного режима

Результатом будет следующая КНОПКА.

Основные CSS в JS

styled-components
Emotion

Что хорошего в CSS в JS?

Ниже приведен список типичных преимуществ CSS в JS.

Инкапсуляция
Удобство обслуживания

При использовании глобального CSS трудно определить, где именно происходит изменение определения CSS, поэтому необходимо учитывать это при проектировании CSS, например, иерархию селекторов CSS и соглашения об именовании.

CSS в JS устраняет необходимость в детальном проектировании CSS, поскольку воздействие ограничивается компонентами.

Динамическая стилизация
Различные удобные функции, предоставляемые библиотекой
- Автоматическая вставка префиксов производителей
- Также возможны вложенные селекторы, как в Sass.

Поскольку CSS генерируется во время выполнения, стилизация может быть выполнена на основе сложной логики в JavaScript, например, динамическая стилизация с использованием JavaScript props.

Кроме того, DX можно улучшить, используя удобные функции, предоставляемые библиотекой. (Однако это требует определенных затрат на обучение).

Статический анализ CSS

В CSS и Sass, если имя класса неверно, это невозможно заметить, пока он не будет выполнен.

Кроме того, неиспользуемые стили не могут быть обнаружены статическим анализом.

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

Переносимость

Наличие стилей и компонентов в одном файле позволяет легко использовать эти компоненты в других проектах.

Что не очень хорошо в CSS в JS?

Ниже перечислены типичные недостатки CSS в JS, но поскольку производительность — самый важный момент, мы обсудим его в отдельном разделе.

Плохая читаемость
- Невозможно понять, какие компоненты являются стилизованными.
- Имена классов нечитабельны例：.

<li href="/blog/ecl19xgcapo" class="sc-iqseJM jtAoBP">... </li>

Вход в полноэкранный режим Выход из полноэкранного режима

Стоимость обучения (в зависимости от библиотеки)

Существует стоимость обучения, поскольку CSS в нотации JS уникален, и каждая библиотека имеет свой собственный способ его написания.

Производительность

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

CSS in JS, с другой стороны, анализирует CSS, определенный в JavaScript, и создает элементы JSX, сопоставленные с CSS.

Браузер динамически генерирует теги стилей CSS, которые затем считываются и применяются к веб-странице. Это чтение и генерация занимает время производительности. (Двойной парсинг).

После разбора библиотекой
Затем разбирается браузером при следующей вставке стиля.

*Если вы заботитесь о производительности загрузки сайта, то runtime CSS-in-JS — не лучшее решение. *

Нулевое время выполнения CSS в JS

Решением вышеуказанной потери времени производительности из-за двойного парсинга является «Zero-Runtime».

Zero-runtime» относится к CSS in JS, который создает стили, используя синтаксис *CSS-in-JS, но генерирует .css файлы, подобные тем, которые генерируются другими препроцессорами CSS. *

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

** Особенно полезно для больших или сложных проектов, где производительность имеет решающее значение. **

Сравнение производительности начальных инъекций стилей по мере рендеринга компонентов.
(источник изображения: https://stitches.dev/docs/benchmarks)

Основные возможности Zero-run-time CSS в JS.

Linaria
vanilla-extract
Stitches (почти нулевое время выполнения)

Резюме

CSS в JS широко используется сегодня, так как известно, что стилизованные компоненты заняли первое место по использованию в The State of CSS 2021: CSS-in-JS.

В будущем стоит следить за развитием zero-runtime CSS в JS, который улучшает недостатки производительности.

Ссылки

Что такое CSS в JS
Сравнение лучших библиотек CSS-in-JS с нулевым временем выполнения — Блог LogRocket
Невидимые издержки производительности современных библиотек CSS-in-JS | CSS-Tricks — CSS-Tricks