Вероятно, вы слышали такие термины, как CSS в языке JS, Styled Components, Radium, Aphrodite, и, скорее всего, решили, что это всё ненужные штуки. В этой статье я расскажу про их суть. Сразу следует оговориться, что нижесказанное - всего лишь частное мнение, и его не обязательно придерживаться.

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

Что такое CSS в языке JS?

Имейте в виду, что стили Inline и CSS в JS - не одно и то же! Ниже краткая демонстрация различий.

- Как работают встроенные стили?

const textStyles = {
    color: white,
    backgroundColor: black
}

<p style={textStyles}>inline style!</p>

В браузере это будет привязано к узлу DOM следующим образом:

<p style="color: white; backgrond-color: black;">inline style!</p>

- Как работают CSS в JS?

import styled from 'styled-components';

const Text = styled.div`
    color: white,
    background: black
`

<Text>Hello CSS-in-JS</Text>

В браузере это будет привязано к DOM, например вот так:

<style>
    .hash136s21 {
        background-color: black;
        color: white;
    }
</style>

<p class="hash136s21">Hello CSS-in-JS</p>

- Различия

Увидели разницу? CSS в языке JS приложил тег <style> поверх DOM, а встроенные стили просто привязали свойства к узлу DOM.

Ну и почему это важно?

Не все CSS-функции корректно работают с обработчиками событий JavaScript, многие псевдоселекторы (например disabled, before, nth-child) невозможны, не поддерживаются html и body, а также другие неприятные вещи.

Используя эту технологию, все возможности CSS остаются у вас под рукой. Поскольку создается фактический CSS, вы можете использовать каждый медиа-запрос и псевдоселектор. Некоторые библиотеки (например, jss, styled-components) даже добавляют поддержку функций, не связанных с CSS, и это круто!

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

В чём преимущества использования?

  • Вам больше не нужно поддерживать набор стилей. CSS в JS абстрагируют модель CSS на уровне компонентов, а не на уровне документа (это называется модульность).
  • Данная технология использует всю мощь экосистемы JavaScript для улучшения CSS.
  • Ограниченных селекторов недостаточно. CSS имеет свойства, которые автоматически наследуются от родительского элемента, если они явно не определены. Благодаря плагину jss-isolate, правила JSS не наследуют свойства.
  • Невозможно избежать селекторных столкновений в нетривиальных приложениях. Соглашения об именах, таких как BEM, могут помочь в рамках одного проекта, но не будут использоваться при интеграции стороннего кода. При компиляции JSS генерирует уникальные имена классов по умолчанию JSON-представления в CSS.
  • Правила CSS автоматически начинаются с префикса, поэтому вам не нужно об этом думать.
  • Легкое разделение констант и функций между JS и CSS (для тех кто не понял, это про совместное использование кода).
  • В DOM находятся те же стили, которые в настоящее время используются на вашем экране.
  • Удаление кода (Dead Code Elimination, DCE).
  • Юнит-тесты для CSS.

В чём недостатки использования?

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

Короче, если всё освоить, то недостатков нет.

Наиболее популярные библиотеки

  • Styled Components
  • Radium
  • Aphrodite
  • Emotion
  • Styletron
  • JSS