StyleX - новая библиотека для стилизации CSS-in-JS 

🔗 Ссылки: StyleX: stylexjs.com 🎓 Курс по React и Redux Toolkit: purpleschool.ru/course/react-redux 🎓 Направление Frontend: purpleschool.ru/profession/frontend 💬 Telegram канал с полезными советами: t.me/purple_code_channel

Вот это вырви глаз синтаксис и сомнительные удобства. Берём, например, Kuma UI, Chakra UI или даже Emotion - всё чистенько и удобно, включая условную стилизацию.

так в чем преимущество по сравнению с SASS/SCSS?

А что скажете про Vanilla Extract? Он тоже компилирует css на этапе сборки и с типизацией у него вроде всё в порядке)

Здравствуйте! Прохожу сейчас Ваш курс по HTML и CSS и хотела написать большое спасибо за изложенную информацию, за манеру подачи, разьяснения. Лучшей школы я пока не встречала, а перепробовала (в попытке найти наиболее для себя понятную манеру изложения) многие. Для меня, как новичка, все настолько понятно и доступно, что по окончанию планирую приобрести курс по базовому Джаваскрипту и так далее. Больше никого пока не ищу) Спасибо еще раз.

Пока что впечатления от стайл-икс типа "мы пахали - я и трактор")) Можно вместо дефайн варс сделать константу-объект, тоже типизация будет из коробки, что касается кондишенл стайл - тоже, сама библиотека ничего не добавила. Повторение медиа-запросов? Вынесли в константу и через динамический ключ подставить, тоже библиотека как топор в каше) Ну, а вам спасибо за труд! :)

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

Благодарю !

Спасибо за разбор! Как всегда: коротко, чётко и по делу. Что касается библиотеки CSS-In-JS, то ничего, лучше Linaria не придумали.

да, хочется css держать рядом с ts, но пока идеального решения нет а не подскажешь, что у тебя за браузер?

Прикол с иконкой оценил))0)

Они решили сделать стилизацию как в Реакт Натив когда стили находиться в самом филе с компонентом.

Из шертса было неочевидно зачем это всё нужно. В целом понятно. Мне все еще хватает инструментов vue. Однако я понимаю где и зачем можно применить это. Я подписан? Вроде да из-за новостей про новинки в web. А узнал кажется тоже от какого-то не большеготканала, где автор делал обзор на курсы и проходил твои и ему понравилось. Смотря трои видео понимаю почему.👍

Да уж, похоже лучше styled-components не придумают уже А stylex еще расти и расти до удобства

Выглядит она конечно очень своеобразно , нет пока Css modules или на крайний случай Tailwind Css. Но спасибо Антон за подробный разбор!

Мне бы в tailwind функцию что последний класс применяется после первого и так можно было бы менять порядок применения, я бы писался кипятком

Пока что останусь с модульным scss

Робкая попытка отказаться от css с последующей реанимаций css в js(x)-коде. StyleX, JSS и styled-components - мутанты, продукты скрещивания css с js, которое не решает главной проблемы - раздвоение/дублирование модуля, нарушение изоляции ui-компонента. В результате ui-логика постоянно растекается между css, js, jsx блоками (и не так важно, имеем ли мы дело с одним файлом или несколькими). Чтобы как-то приглушить порожденный css хаос, то есть устранить лишь симптомы проблемы, придумываются устные ограничения вроде соглашений БЭМ, не понимая, что лучшие ограничения - функциональные. Emotion - это следующий этап зволюции стилизации, в которой устранена проблема раздвоение модуля, но еще сохраняется css-синтаксис. Остался еще один шаг, и css скроется под более читабельными, удобными и безопасными абстракциями. Мы должны получить в итоге нечто подобное: const Demo = () => { const theme = useGlobalTheme() return ( ) } Тогда будет один модуль и один синтаксис. В таком случае можно группировать модули в модулях-контейнерах, не создавая вложенных, иерархических структур в css.

Ух... Как же хочется, чтобы у Реакта была "экосистема" как у Ангуляра. Надеюсь разработчики придут к этому

Я так скажу, я разные CSS in js пробовал, всякие там StylesComponent и блин, это такая каша. Возьмите обычный sass + css.modules, и classmates, все, больше в этой жизни для фронта в рамках браузера ничего не надо! А это ваш еще styleX фулл типизированный где нет фулл типизации, гениально)

Тейлвинд это безумие, но тут пошли ещё дальше. Тейлвинд хотя бы использует читабельный класс, например, `p:2` и это что-то вроде `padding: 2em`, то в СтайлХ `padding: 2em` превращается в атомарную нечитабельную белиберду `iuybtiu`, ужас.

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

Я потестил - он там навешивает на каждое css свойство свой класс. Дико неудобно в консоле отлаживать. Пока что решил поинвестигать JSS

по мне лучше модули чем css in js, сейчас я использую tailwind и мне нормально

StyledComponents емае. Проще и лучше модульный подход нежели эта котовасия.

А tailwind такого видосика нет?

Одно время работал с ReactNativw. Там подход +- такой же. И как же я кайфанул когда вернулся обратно в web и модульный scss. Вообще не понимаю всех этих заморочек со стилями. Чем людей так отталкивает css? Дополнительным файлом? Синтаксисом? Один чёрт в RN, чтобы не было шума, выносил стили в отдельный файл. Я не понимаю этот мир))

Хотел бы я посмотреть на мудреца, который в 2к23 пишет либы без типизации

Tailwind (ограниченно) + изоляция CSS от Svelte + пару глобальных и скоуп файлов pcss. Минимум работы и максимум поддержки.

Для теста библиотеки достаточно сделать компонент кастомного чекбокса. Тривиальная задача (если не джун), которая решается небольшим css с использованием комбинатора "~". И чем удобнее это будет сделать - тем лучше библиотека. Вопрос - сколько нужно и как написать кода на stylex, чтобы это было читабельно и удобно?

Пишут, что Tailwind Killer 😎 А так нужно начать юзать на реальном проекте, что бы понять

Ну такое конечно. Я так и не понял, для чего она нужна если все тоже самое можно делать в scss modules. Обычно в компоненте и так логики бывает не мало + еще стили. Я бы такое не стал в проект тащить.

CSS-in-JS - не нужен, JS код и так перегружен. Лучше SCSS + BEM/CSS Modules. Та даже plain CSS лучше чем CSS-in-JS! Видимо, Facebook выделил кучу денег на инфлюэнсеров.

Не перевариваю css in js. Пока есть mui это не умрет.

Can i use next.js with styleX css

при всей моей нелюбви к tailwind но tailwind + cva смотрится лучше чем это

не впечатлил стайлх

Что можно сказать, слишком сырая, даже подсказки типизации нету, лучше на модулях писать чем это убогое styleX, и вообще стили писать в объектах крайне неудобно, лучше styled components уже не будет, раз уже сам Facebook провалил в этом деле

css in js не нужен, вообще. Нам БЭМ за глаза хватает. Остальное решается в рамках css

Выглядит каким-то очень извращенным костылём😢

выглядит убого