Привет всем из Берлина! На этой неделе с вами @oleg008.

Я разрабатываю библиотеку jss для генерирования стилей на js, поэтому буду развлекать вас своими мыслями на эту и соседние темы.

А кто здесь собственно пользовался уже любой cssinjs библиотекой?

@oleg008 @jsunderhood 1. Доступны все переменные из js, не надо дублировать.

@oleg008 @jsunderhood 2. Можно писать нормальные функции хелперы и не страдать

@oleg008 @jsunderhood 3. Стили рядом с версткой, не надо переключаться. И можно использовать общий скоуп.

@oleg008 @jsunderhood 4. Не надо учить новый язык

@oleg008 @jsunderhood 5. Нет возможности писать вложенный ад )

@pavelsilin я бы не говорил «богомерзкий CSS» — в CSS-in-JS всё равно есть CSS /cc @kizmarh альтернативное мнение о полезности CSS-in-JS

@andrey_sitnik @kizmarh количество болей, страданий и +100500 костылей в виде препроцессоров и плагинов к postcss, делают его именно таким.

Пожалуй надо сказать пару слов по поводу что такое хорошо и что такое плохо)

Меня часто спрашивают что дает cssinjs чего не дает css. Раньше я давал ссылку на github.com/cssinjs/jss/bl… и говорил как много приимуществ.

@jsunderhood Но на самом деле незаменимых преимуществ нету до тех пор пока вы не получите задачу где другие подходы вам что-то дают.

Поэтому всем тем кто задают себе вопрос, нафига это вообще надо, вам ответ: вам не надо.

Это всегда было фантазией, которую породило наличие отдельных языков под эти три задачи.

К сожалению веб платформа никогда не предоставила возможности чисто разделять все эти вещи.

CSS использует селекторы, которые прописаны в html а также использует его структуру.

Плюс в js мы обычно также используем селекторы чтоб манипулировать DOM.

Вот и получается хоть еще 10 языков специализированных изобретай, сущности не разделены, ничего хорошего не будет.

Что делает React + JSS: стили, структура html и логика по манипуляции html кладется рядом. Разделение по языкам игнорируется.

Зато разделяем все сущности очень четко. Сущность которая отвечает за отображение - один компонент с очень простым интерфейсом.

Сущность которая отвечает за какую то специфическую логику, назовем ее "бизнес" опять таки отдельный компонент или функции.

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

Вобщем вместо того чтоб плодить языки, мы плодим сущности. И тем самым добиваемся более высокое переиспользование кода.

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

@taujavarob @pavelsilin @jsunderhood @oleg008 Это надо по ситуации смотреть. Иногда в тему и логика входит (фронтэнд же такой разный).

все так фокусируются на том чтоб тщательно вытереть пыль и натереть до блеска что забывают что это машина у которой совсем другие задачи.

Все остальное вообще похуй)

Когда мы можем легко понять код, мы мы можем легко его исправить, выкинуть, заменить итд.

Это самый важный фактор который делает программы и быстрыми и стабильными.

я всегда стараюсь по максимуму логики выделить в чистые функции и потом их использовать уже где надо, включая в компонентах.

. @jsunderhood я использую селекторы в CSS, чтобы манипулировать другими людьми!

@taujavarob @jsunderhood immutable code это идея, которую я продвигаю btw

И так, поговорим о библиотеках для cssinjs и в часности об альтернативах JSS.

Вот более менее полный список библиотек github.com/MicheleBertoli…

Начнем с aphrodite. Я написал как то статью сравнивающую их: medium.com/@oleg008/aphro…

Что характеризует афродиту: более высокий уровень абстракции, апи пытается дать пользователю инлайн стили которые генерируют CSS в <style>

Но при ограниченом сабсете CSS который можно использовать: к примеру нету доступа к селекторам тепа ~> итд.

Далее у афродиты только один режим рендеринга: все стили пишутся в один <style>. В JSS можно и так и так.

Негативное у афродиты это батчинг - они прежде чем отрендерить стили ждут. Это может дать перерисовку.

И не дает конечный (computed) результат если делать это синхронно. Тем самым заставляет тебя использовать setTimeout.

Также некорректно сравнивать jss и aphrodite напрямую, для этого я написал отдельную библиотеку, которая совмещает обе идеи в одной.

github.com/cssinjs/aphrod…

Эта библиотека дает API практически как у aphrodite но для описания стилей можно использовать весь JSS JSON DSL.

Также там решена проблема с батчингом и всеми видами селекторов.

@jsunderhood У меня это давало страшное мигание интерфейса, когда дом показывается без стилей, а затем применяются стили.

@pavelsilin @jsunderhood у этого явления даже название есть en.m.wikipedia.org/wiki/Flash_of_…

И так поговорим о библиотеке radium. Кто что может сказать по ней?

@jsunderhood Вопросы тоже велком

А это проблема когда есть длинные списки, тк для каждой строки дублируются одинаковые стили.

@jsunderhood трогал его когда работал с github.com/FormidableLabs… Не понравилось, даже завел issue на какую-то мелочь github.com/FormidableLabs…

На мой взгляд важная штука отличающая JSS от Radium: весь сгенерированый CSS можно посмотреть как он есть в доме в style тэге.

Тоесть по сути также как и с чистым CSS.

Cool presentation on how @MaterialUI uses #cssinjs by @olivtassinari Go check it out: oliviertassinari.github.io/a-journey-towa…

Кто нибудь уже пользовался jss-isolate плагином?

@jsunderhood Мне кажется что никто толком не понял для чего он и почему он очень круто меняет все.

этот список можно также самому расширять или изменять и тем самым получить глобальные умолчания без использования глобальных стилей

@iamstarkov, @boriscoder, @jsunderhood, лишь то, что кто-то понимает технологию и умеет ей пользоваться, не делает её хорошей.

это дает более явный контрол компонента над самим собой.

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

в любом из родителей она может сломаться в зависимости от того какое наследуемое свойство родитель решил определить.

это в конфликте с понятием компонент, внутренности которого не должны неявно меняться

Вот еще о чем хотел поговорить, есть один плагин для jss который очень сильно меняет синтаксис для стилей. github.com/cssinjs/jss-ex…

pic.twitter.com/uMMwD51M3p

@jsunderhood главная особенность в том чтоб свойства которые имеют ряд значений разделенных пробелом не надо больше запоминать.

а также это позволяет в большинстве случаев использовать числа как значения вместо строк.

Лично мне кажется этот синтаксис не только приемлемым, а даже лучше чем CSS. 1. легче запомнить 2. легче читать и 3. Никакого дублирования.

вы знаете что-то обо мне чего не знаю я?))))

Кто еще что думает по поводу развернутого синтаксиса?

@jsunderhood все меняется, когда ты делаешь виджет, который ни страницу менять не должен, ни сам ломаться. И никаких стайлгайдов нет

@jsunderhood поэтому всякие штуки, облегчающие изоляцию очень круты, чем больше они будут развиваться, тем лучше

@jsunderhood Возможно, он мне скоро пригодится.

Написал статью про "профессиональную деформацию" medium.com/@oleg008/profe…

Неделя пролета, скоро меня отсюда выкинут)))