Перевод статьи All You Need To Know About CSS-in-JS с сайта hackernoon.com для CSS-live.ru, автор — Индрек Ласн

Прекрасная иллюстрация Анны Дадей

Краткая выжимка статьи — поговорим о компонентном подходе к CSS. Больше нет необходимости в поддержке множества CSS-файлов. CSS-in-JS делает логику CSS абстракцией уровня компонента, а не уровня документа (используя принцип модульности).

Пример со стилизованным React-компонентом

---

Предположу, что вы слышали термины «CSS-in-JS», «стилизованные компоненты», «Radium», «Aphrodite», но не стали в них вникать, думая: «Ну и зачем это всё нужно? Мне вполне хватает CSS-in-CSS (обычного кода CSS в .css-файлах).»

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

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

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

Дадим ей шанс показать себя в деле.

CSS проекта, размер которого уже ближе к среднему

---

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

JSS — более мощная абстракция над CSS. Он использует Javascript в качестве языка для описания стилей в декларативном и удобном в поддержке виде. Это высокопроизводительный компилятор из JS в CSS, который работает и на стороне сервера, и на стороне клиента в реальном времени. Это низкоуровневая и не привязанная к какому-либо фреймворку библиотека. Она весит около 6KB (миницифированная и сжатая gzip). Ее можно расширить при помощи API для плагинов. — источник

Имейте ввиду, что inline-стили и CSS-in-JS — не одно и тоже! Это две разные вещи. Сейчас продемонстрирую.

Как работают inline-стили

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

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

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

Разница

Видите эту небольшую разницу? CSS-in-JS добавился в виде тега <style> вверху дерева DOM, тогда как inline-стили добавились к DOM-узлу в виде свойств (в атрибут style — прим. переводчика).

Какое это имеет значение?

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

С CSS-in-JS вся мощь CSS всегда под рукой. Поскольку генерируется настоящий CSS-код (в отличие от inline-стилей, где свойства прописаны в атрибуте style — прим. переводчика), вы можете использовать любые медиавыражения и псевдоселекторы, какие только захотите. Некоторые библиотеки (типа jss, styled-components) даже добавляют поддержку изящных возможностей, не нативных для CSS, типа вложенности.

Блестящая статья, в деталях рассматривающая разницу между этими двумя подходами.

«Да просто пишите CSS-in-CSS и забудьте об этой ерунде.»

Всё верно, мы так и делали с незапамятных времен. Но проблема в том, что современный веб строится не страницами, а компонентами.

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

Для сброса напряжения посмотрите, как Боб Росс рисует камушки :)
(по ссылке откроется анимация, 15 MB — прим. переводчика)

В чем плюсы использования CSS-in-JS?

• Компонентный подход к CSS. Больше нет необходимости в поддержке множества CSS-файлов. CSS-in-JS делает логику CSS абстракцией уровня компонента, а не уровня документа (используя принцип модульности).
• CSS-in-JS использует всю мощь JavaScript для расширения возможностей CSS.
• «Настоящая изоляция CSS-правил». Ограничения видимости селекторов недостаточно. В CSS есть свойства, которые, если не заданы явно, автоматически наследуются от родительских элементов. Но, благодаря плагину jss-isolate, JSS-правила не наследуют свойств.
• Селекторы с ограниченной областью видимости. В CSS есть только одно глобальное пространство имен. Невозможно избежать коллизий селекторов, если только речь идет не об элементарном проекте. Соглашения о наименованиях, вроде БЭМ, могут помочь в рамках одного проекта, но не тогда, когда мы включаем в него сторонний код. JSS генерирует уникальные имена классов по умолчанию при компиляции JSON-представления в CSS.
• Браузерные префиксы автоматически проставляются в CSS-правила, так что вам не нужно вообще о них думать.
• Совместное использование кода. JS и CSS легко используют одни и те же константы и функции.
• В DOM находятся только те стили, которые на данный момент используются для отображения элементов на экране (react-jss).
• Удаление мертвого кода.
• Модульное тестирование CSS.

В чем минусы использования CSS-in-JS?

• Сначала надо научиться пользоваться.
• Новые зависимости.
• Новым участникам команды труднее вникать в то, как организован код. Новичкам фронтенда придется изучать больше всяких инструментов.
• Отказ от привычного подхода (впрочем, это не обязательно минус).

Плюсы явно перевешивают минусы! Так давайте же дадим CSS-in-JS шанс! Нам нечего терять!

Самые популярные библиотеки CSS-in-JS

Я привожу простой «Hello World!» пример, используя все популярные библиотеки для CSS-in-JS. Выбирайте, какая вам больше нравится, исходя из синтаксиса.

npm trends (статистика загрузок, по которой можно отследить популярность раличных инструментов — прим. переводчика)

Styled Components

import React, { Component } from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  color: white;
`;

const Wrapper = styled.div`
    background: black
`

class App extends Component {
  render() {
    return (
        <Wrapper>
            <Title>Hello World!</Title>
        </Wrapper>
    );
  }
}

export default App;

JSS-React

import React from 'react'
import injectSheet from 'react-jss'

const styles = {
    wrapper: {
        background: 'black'
    },
    title: {
        color: 'white'
    }
}


const App = ({classes}) => (
    <div className={classes.wrapper}>
        <h1 className={classes.title}>
            Hello JSS-React!
        </h1>
    </div>
)

export default injectSheet(styles)(App)

Glamorous

import React from 'react'
import glamorous from 'glamorous'

const Wrapper = glamorous.div({
    backgroundColor: 'black'
})

const Title = glamorous.h1({
    color: 'white'
})

const App = () => (
    <Wrapper>
        <Title> Hello JSS-React!</Title>
    </Wrapper>
)

export default App;

Radium (предупреждение: использует inline-стили)

import React, { Component } from 'react';
import Radium from 'radium';

@Radium // decorator
class App extends Component {
    render() {

        const styles = {
            wrapper: {
                background: 'blue',
            }
            title: {
                color: 'white'
            }
        };

        return (
            <div style={styles.wrapper}>
                <h1 style={styles.title}>Hello Radium!</h1>
            </div>
        );
    }
}

export default Radium(App);

Обратите внимание еще на то, что Radium использует декораторы.

Aphrodite

import React, { Component } from 'react';
import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
    wrapper: {
        backgroundColor: 'red'
    },
    title: {
        backgroundColor: 'blue'
    }
});

class App extends Component {
    render() {
        return (
            <div className={css(styles.wrapper)}>
                <h1 className={css(styles.title)}>Hello Aphrodite!<h1>
            </div>;
        )
    }
}

Stylotron

import React, { Component } from 'react';
import { styled } from 'styletron-react';

const Wrapper = styled('div', {
    backgroundColor: 'black'
})

const Title = styled('h1', {
    color: 'white'
})

class App extends Component {
    render() {
        return (
            <Wrapper>
                <Title>Hello Styletron!<Titleh1>
            </Wrapper>;
        )
    }
}

Это всё очень простые примеры для демонстрации основ работы. Все библиотеки имеют гораздо больше возможностей — например, использование тем, динамические входные параметры, рендеринг на стороне сервера и много чего еще!

Отличная статья, в деталях рассказывающая обо всех возможностях CSS-in-JS.

Вот полный список — вперед, попробуйте каждую из библиотек!

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

Убеждены, что CSS-in-JS не для вас? Тогда есть другой вариант — CSS модули!

Всем спасибо!

P.S. Это тоже может быть интересно:

• CSS-выражения от контейнера для дизайнеров
• Как читать W3C-спецификации
• Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами