Как мы отказались от использования Styled-System для создания компонентов и изобрели собственный велосипед

[wentout]

Спасибо за статью )

Ребят, поясните про эффекты?
> Основным отличием Atomize от Styled-System являются «effects».

Как вы относитесь к возможным проблемам из-за того, что это в принципе всё же Side Effects?

[Eddort]

Спасибо за комментарий :)

Задача абстракции effects (в контексте atomize) — предоставлять возможность атомарно описывать какие-либо составные свойства.

Конфигурация вида

{hover: ":hover"}

позволяет описать стили на состояние наведения

<Button hover-color=”purple” />

В результате получится такой CSS:

.%класс CSS-in-JS библиотеки%:hover { color: purple }

Возможно указать любой CSS-селектор, :hover лишь частный случай.

На счет того, является ли сайд эффектом такое поведение — думаю, что нет, т.к сама функция активации CSS является чистой.

[atamur]

А чем вам не угодил jss?

[Eddort]

Спасибо за комментарий)

Тут все зависит от того, что конкретно вы имеете в виду под jss.

Если вопрос про то, почему бы просто не использовать styled-components или emotion, то для решения нашей задачи (создание виджетов с возможностью интерактивного редактирования) концепция атомарного CSS подходит больше.
Виджеты никогда не будут зависеть от замыкания, их можно будет свободно перемещать, как между собой, так и между страницами проекта, да что уж, можно просто скопировать код и переместить в другой проект.

А если вопрос про то, почему мы используем именно styled-components, а не библиотеку JSS(https://github.com/cssinjs/jss), то тут дело в том, что данный проект плохо поддерживают, я более года назад создавал issue, на него так ответа и не получил.

[radist2s]

А можно было не придумывать свой велосипед, и взять велосипед, который делают в Яндексе — reshadow. Пока использовал только на одном проекте, всем доволен и рекомендую к использованию. Стили компилируются в статику, для динамических значений — пробрасываются CSS-переменные, позволяет использовать любой препроцессор, писать обычный CSS с вменяемой подсветкой синтаксиса и автокомплитом, а так же полностью отказаться от CSS-классов.

[Eddort]

Спасибо за комментарий и наводку)
Про данный проект я раньше не слышал, сейчас ознакомился.

reshadow выглядит как очень интересный и стоящий проект — он решает одну из основных проблем концепции JSS — производительность.

Я изучу возможность замены styled-components (atomize — обертка над SC или Emotion) на reshadow, это бы нам очень помогло.

Но отказаться от концепции атомарного CSS мы не можем.
Без сомнения, на данный момент трудно найти инструментарий в виде линтеров, токенизаторов для редакторов кода, но все впереди :)
А плюсов конкретно под нашу задачу более чем достаточно :)

[radist2s]

Я совсем не против собственных велосипедов, даже наоборот. Просто мне кажется, можно было придумать, как разбирать стили на набор переменных, и уже с ними работать как угодно. Придумывание новой абстракции над стилями может быть оправдано, как мне кажется, если сохраняется основная идея каскада. Концептуально классический CSS все равно лучше подходит для стилей, но инструментов иногда не хватает.

[Uwizart]

Спасибо за статью! Как дальше планируете развивать проект и библиотеку?

[Kurt]

У проектов планов прям море, но есть роад-мэп, который обязательно поделимся.
Пост про проект и его планы в целом в планах, есть о чем рассказать.

По библиотеке есть как минимум план оформить, документацию в нормальном виде выложить. Но более внятно Саша уже завтра ответит, думаю.

[artemmalko]

Подскажите, а как работать с media-выражениями?

[Eddort]

Спасибо за комментарий)

Медиа-выражения конструируются относительно абстракции брейкпоинт из темы.
Для работы достаточно написать префикс (имя брейкпоинта) к любому CSS свойству

Пример:

<Text md-color="red">Some text</Text>

В данном примере применяется свойство color на брейкпоинте с именем md.

Пример работы здесь по ссылке (измените размер окна превью, чтобы увидеть отличие) codesandbox.io/s/atomize-demo-skhjw?file=/src/Example.js

[Tramway]

Эффекты и работа с media query сильно напоминают tailwind css. При должной настройке тема там также настраивается через css variables. Смотрели в его сторону?