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

22 июля 2023 г.

Еще в 2015 году была запущена библиотека JavaScript под названием JSS (которая до сих пор активно поддерживается), которая позволила разработчикам использовать JavaScript для описания стилей декларативным, бесконфликтным и многоразовым способом. JSS автоматически применяет объявленные свойства к соответствующим селекторам после загрузки страницы. По мере того, как библиотеки внешнего интерфейса JavaScript (JS), такие как React, набирали популярность, они представили новое решение CSS-in-JS, называемое стилизованными компонентами. Что общего у стилевых компонентов и библиотек CSS-in-JS, таких как Emotion, так это то, что все они позволяют веб-разработчикам записывать свойства CSS для компонентов через JavaScript. В этом руководстве по веб-разработке будут представлены некоторые общие черты CSS-in-JS, а также рассмотрены его сильные и слабые стороны. В конце концов, вы также должны знать, на что обращать внимание при выборе между CSS-in-JS, библиотеками CSS, такими как Less или SaSS, и старым добрым ванильным CSS.

Как работает CSS-in-JS?

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

постоянные стили = {
  фон: "#FE0000",
  цвет: "#FFFFFF"
};

Затем все, что вам нужно сделать, это передать его элементу через атрибут стиля, например:

Хотя нет ничего плохого в использовании подобных встроенных стилей, этот подход сильно ограничен, потому что в простых объектах, таких как эти, отсутствует множество полезных функций CSS. По этой причине большинство разработчиков предпочитают обращаться к библиотекам, которых очень много. Вот пример стилизованной кнопки React с использованием Styled Components:

импортировать React из «реагировать»;
импортировать стили из "styled-components";

const StyledButton = стилизованная кнопка`
  ширина: 90 пикселей;
  высота: 40 пикселей;
  фон: ${props => props.active ? "черный" : "темно-серый"};
  цвет синий;
`;

константная кнопка = () => (
  <СтиледКнопка>
    Моя стилизованная кнопка
  
);

Кнопка экспорта по умолчанию;

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

ПОСМОТРЕТЬ: Изучите JavaScript с нуля за 30 долларов

Библиотеки, специфичные для фреймворка, и библиотеки, не зависящие от фреймворка

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

Некоторые библиотеки, такие как Radium и JSX, работают только с определенным фреймворком JavaScript. Например, Radium был создан для приложений React, а Styled JSX поддерживает только компоненты, написанные на JSX (хотя его также можно использовать с React).

Неудивительно, что специфичные для фреймворка библиотеки CSS-in-JS используют тот же синтаксис, что и фреймворк, который они поддерживают. Например, Styled JSX использует литералы шаблонов в синтаксисе JSX для добавления стилей CSS к компонентам. Вот пример кода Styled JSX, который создает кнопку с динамическим стилем:

константная кнопка = реквизит => (
  <кнопка>
    {реквизиты.дети}
    <стиль jsx> {`
      кнопка {
        заполнение: ${'большой' в реквизите? '40' : '22'} пикселя;
        фон: ${реквизит.тема.фон};
        цвет: #555;
        дисплей: блок;
        размер шрифта: .5em;
      }
    `}
  
)

Другие библиотеки CSS-in-JS, такие как JSS, Emotion и Styled Components, не зависят от фреймворка, а это означает, что вы можете использовать их с любым фреймворком, основанным на компонентах, или даже с простым JavaScript. Другие библиотеки, такие как Aphrodite, также работают с веб-компонентами.

Вот пример веб-компонента, который использует Aphrodite для установки цвета фона:

/* Регистрирует веб-компонент с синим фоном */
импортировать { StyleSheet, css } из "Афродиты";

константные стили = StyleSheet.create({
    синий: {
        backgroundColor: синий
    }
});

Приложение класса расширяет HTMLElement {
    прикрепленныйCallback () {
        this.innerHTML = `

Это красный.

`;
    }
}

document.registerElement('мое-приложение', приложение);

ПОСМОТРЕТЬ: Обзор BitBucket

Преимущества CSS-in-JS

Какую бы библиотеку вы ни выбрали, все они включают следующие функции:

Scoped CSS: все библиотеки CSS-in-JS генерируют уникальные имена классов CSS. Более того, все стили привязаны к соответствующему компоненту, обеспечивая инкапсуляцию, не влияя на стили, определенные за пределами компонента. Это красноречиво позволяет избежать конфликтов имен классов CSS, войн специфики и траты большого количества времени на придумывание уникальных имен классов во всем приложении. Рендеринг на стороне сервера (SSR): Хотя рендеринг на стороне сервера (SSR) не дает особых преимуществ в одностраничных приложениях (SPA), он чрезвычайно полезен для веб-сайтов или приложений, которые необходимо анализировать и индексировать поисковыми системами, поскольку они требуют, чтобы и страницы, и стили создавались на сервере. Автоматические префиксы поставщиков. Все библиотеки CSS-in-JS предоставляют префиксы поставщиков по умолчанию. Это значительно экономит время, поскольку разработчикам не нужно выяснять, какие функции требуют префикса поставщика в старых браузерах.

Недостатки CSS-in-JS

CSS-in-JS, безусловно, не лишен недостатков. Было несколько случаев, когда разработчики проектов отказывались от него в пользу более традиционных подходов CSS. Вот несколько причин, почему:

Накладные расходы во время выполнения: по мере рендеринга компонентов библиотека CSS-in-JS должна преобразовывать стили в простой CSS для вставки в документ. Ведутся споры о том, может ли это оказать заметное влияние на производительность приложений. Вероятно, это будет зависеть от ряда факторов, от сложности кода до аппаратного обеспечения. Большой размер пакета: каждый пользователь, использующий ваше приложение, должен загрузить JavaScript для библиотеки CSS-in-JS. Emotion занимает 7,9 КБ в сжатом виде, а стилизованные компоненты — 12,7 КБ. Для сравнения React + react-dom — 44,5 КБ, так что библиотека CSS-in-JS, вероятно, не будет той соломинкой, которая сломает хребет верблюду.

Заключительные мысли о CSS-in-JS

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

---

Оригинал