Что нужно знать о CSS в языке JS: плюсы и минусы

4
7587
Добавить в избранное

Что-то слышали о CSS в языке JS, но так и не разобрались? Возможно, зря. Мы подготовили статью про работу с этой технологией. Читайте.

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

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

Давайте посмотрим, что может CSS в JS.

css-in-js-feature
Проекты отсортированы по размеру

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

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

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

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

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

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

Различия

Увидели разницу? 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 находятся те же стили, которые в настоящее время используются на вашем экране.
  • Удаление кода.
  • Юнит-тесты для CSS.

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

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

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

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

Styled Components

JSS-React

CSS в языке JS

glamorous

CSS в языке JS

Radium

CSS в языке JS

Внимание: Radium использует декораторы!

Aphrodite

Stylotron

CSS в языке JS

Это действительно простые примеры, демонстрирующие основные функции. Само собой, все библиотеки имеют гораздо больше функциональных возможностей.

Несколько полезных ссылок

Перевод статьи Indrek Lasn

Интересуетесь веб-разработкой?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Добавить комментарий