Почему именно CSS-in-JS?

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

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

p {
    color: pink;
    background: blue;
}

CSS-in-JS
CSS-in-JS – это техника, использующая JavaScript для создания, добавления и управления стилями. Стили, созданные с помощью CSS-in-JS, записываются в файл Javascript и используют синтаксис Javascript.

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

Существует множество библиотек, которые позволяют нам реализовать CSS-in-JS. В некоторых из этих библиотек при разборе стилей JavaScript генерируется CSS и прикрепляется к DOM.

import styled from 'styled-components';

const pText = styled.p`
  color: pink;
  background: blue;
`;

<pText>This is my text</pText>

Эти стилизованные компоненты могут быть определены в том же файле или в другом файле. Поскольку это компоненты React, их можно экспортировать или использовать в JSX.

Почему я должен использовать CSS-in-JS?
С помощью CSS-in-JS система сборки позволит нам как разработчикам не беспокоиться о некоторых специфических для CSS практиках. Некоторые из них включают:

1. Мы получаем возможность использовать синтаксис JavaScript для написания стилей, поэтому нам не нужно постоянно переключать синтаксис.
2. Автоматическая инкрустация CSS с критическими путями
3. Отсутствие коллизий имен классов и идентификаторов, каждое имя класса и идентификатор гарантированно уникальны.
4. Рефакторинг CSS в CSS-in-JS проще и безопаснее, поскольку наши стили теперь представлены в виде абстрактного синтаксического дерева. В обычном CSS трудно быть уверенным, что изменение селектора не приведет к непреднамеренным изменениям.
5. Автоматическая префиксация поставщиков
6. Наконец, это уменьшает объем кода и размер файла, поскольку скомпилированный CSS включает только необходимые декларации.

В правильном контексте CSS-in-JS может позволить нам сделать стилизацию наших компонентов простым и лаконичным процессом.

Разобравшись с причинами, по которым мы должны использовать css в JS, теперь давайте посмотрим на недостатки использования Css в Js.

Почему я не должен использовать CSS-in-JS?
Хотя CSS-in-JS может быть очень полезен, он не идеален для каждой ситуации. Его использование также вызывает некоторые сомнения у некоторых веб-разработчиков. Вот некоторые существенные недостатки CSS-in-JS:

1. Многие люди считают, что CSS легче понять, поскольку в нем все наши стили представлены в (в некоторой степени) легко читаемом формате.
2. Стили CSS-in-JS менее легко передаются другим веб-приложениям.
3. В зависимости от реализации, использование CSS-in-JS будет увеличивать затраты на производительность во время выполнения, поскольку Javascript должен быть загружен, разобран и выполнен до того, как будет выполнена стилизация/разметка.

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

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