Обзор

В этом разделе мы рассмотрим базовые конфцепции EffCSS, сравним этот инструмент с аналогами и оценим, когда его использовать.

Еще одна CSS-in-JS библиотека?

Вкратце - да. EffCSS - это CSS-in-JS библиотека, которая стремится быть простым инструментом для создания сложных и предсказуемых стилей. Библиотека базируется на нескольких концепциях:

• Функция-автор (StyleSheet maker) - это просто JS-функция, которая принимает в качестве аргумента объект с утилитами и должна вернуть объект со стилями; утилиты предоставляют некоторую полезную функциональность, как, например, генерация псевдо-селекторов, at-rules, БЭМ-селекторов и т.д.,
• Провайдер стилей (Style provider) - это веб-компонент на основе HTMLScriptElement, который обрабатывает функции StyleSheet maker и управляет таблицами стилей,
• Потребитель стилей (Style consumer) - это просто JS-объект, с помощью которого ваш код может взаимодействовать с провайдером. В браузере это сам элемент Style provider, а на сервере - его эмуляция.

Библиотека опирается на некоторые браузерные API, такие как

• CSSStyleSheet API,
• Web Components,
• Document adoptedStyleSheets property.

По итогу EffCSS не требует никаких внешних зависимостей. Она работает одинаково во всех современных браузерах и с любыми фреймворками.

Особенности

• генерация CSS на клиенте - вы можете использовать таблицы стилей динамически на клиенте через Style consumer,
• генерация CSS на сервере - Style consumer может сериализовать свое состояние в HTML-строку, которая может быть использована для SSR / SSG,
• переключение CSS - любая сгенерированная таблица стилей может быть включена или выключена с помощью методов on/off объекта Style consumer,
• поддержка темизации - создание/обновление/удаление тем производится через объект контроллера тем, доступный из свойства theme объекта Style consumer,
• таблицы стилей на базе TypeScript - если при создании таблицы стилей в функции StyleSheet maker используется БЭМ-интерфейс, то Style consumer может выводить автодополнения TypeScript относительно доступных селекторов,
• изолированные и минифицированные селекторы - каждая функция StyleSheet maker может использовать утилиту bem, которая возвращает селекторы с уникальным префиксом; эти селекторы можно минифицировать с помощью атрибута min для Style provider.

Сравнение

Sass / Less

Препроцессоры имеют свой собственный синтаксис и связанные с ним ограничения. EffCSS позволяет использовать современные JavaScript и TypeScript так, как вы хотите.

Tailwind

Tailwind оперирует утилитами и требует настройки редактора для подсветки синтаксиса и автодополнения. EffCSS оперирует таблицами стилей и поддерживает автодополнение селекторов с помощью дженериков TypeScript.

Emotion

@emotion/css имеет зависимости и в некоторых случаях требует другие пакеты из смежной экосистемы (такие как @emotion/react, @emotion/styled). EffCSS уверен в себе и не имеет зависимостей, работает одинаково во всех случаях.

Styled Components

Styled Components предназначены для стилизации компонентов React. EffCSS не зависит от фреймворка.

Linaria

Linaria создает стили CSS до выполнения кода в браузере. EffCSS создает CSS где угодно.

Когда использовать?

Что ж, выбор библиотеки - дело вкуса. На самом деле, может быть несколько других причин:

Вы желаете

• использовать инструмент, не зависящий от фремворка 😍,
• использовать стили многократно и с подсказками TypeScript 😎,
• использовать стили на сервере без дополнительных усилий 😃.

Вы не желаете

• устанавливать дополнительные плагины для сборки проекта 😦,
• добавлять специальные расширения в свой редактор кода 😨,
• изучать новый синтаксис 😠.

Подошел хотя бы один вариант? Тогда приступим!