шутишь что ли?)

ок, тогда 1) учишь английский 2) читаешь аргументы 3) приводишь контраргументы в этом чате ;)

1) Scoped selectors. решаемо на стороне вебпака когда префикс блока это его имя.

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

а по руцке это как? моя твоя не понимать

а по руцке это как? моя твоя не понимать

значет ты не руцкий

значет ты не руцкий

бля логично)

2) True rules isolation. - не понял про что пишет автор .

3) Slow selectors взаимоисключается первым пунктом.

3) Code reuse, expressiveness. решается на стороне CSSO и подобными инструментами

когда соединяются одинаковые правила запятой при сборке

5) Refactoring эта же возможность доступна изкоробки в вебпаке. когда подключаешь стили и юзаешь их style.myClass

2) True rules isolation. - не понял про что пишет автор .

мне кажется ты смысл пунктов 1 и 2 спутал

6) Dead code elimination то же что и 5 но если не юзить екстракт-текст плагин

7) Vendor Prefixing автопрефиксер все забыли ?

8) Download size 9) Code sharing. 10) Adoption to environment здесь всё ок ) согласен.

еще можно добавить про типизацию для ts/flow

короч есть плюсы. Но неудобство в работе перевешивает )

короч есть плюсы. Но неудобство в работе перевешивает )

Неудобство это субъективный фактор

погоди, ты вообще не с той стороны на это смотришь Эти пункты — не какие-то _уникальные_ возможности. Почти всего можно добиться с помощью других подходов — того же бема, тех же css-модулей, тех же препроцессоров, тех же бандлеров. Дело в другом. Зачем все эти сложные подходы, если при использовании css-in-js получаешь все эти возможности практически бесплатно? Вот и всё. Это просто для кого-то удобно. Так или иначе на экране мы получим одно и то же, используя хоть бем, хоть pure css, хоть инлайн-стили. Но одни подходы эффективнее других.

в бэме ты "изолируешь" стили вручную (пишешь длинные селекторы), в css-модулях изолирование происходит засчёт автоматического хэширования Результат — один. Способы разные.

погоди, ты вообще не с той стороны на это смотришь Эти пункты — не какие-то _уникальные_ возможности. Почти всего можно добиться с помощью других подходов — того же бема, тех же css-модулей, тех же препроцессоров, тех же бандлеров. Дело в другом. Зачем все эти сложные подходы, если при использовании css-in-js получаешь все эти возможности практически бесплатно? Вот и всё. Это просто для кого-то удобно. Так или иначе на экране мы получим одно и то же, используя хоть бем, хоть pure css, хоть инлайн-стили. Но одни подходы эффективнее других.

а. тогда ладно )

в бэме ты "изолируешь" стили вручную (пишешь длинные селекторы), в css-модулях изолирование происходит засчёт автоматического хэширования Результат — один. Способы разные.

Есть вещи которые которые без костылей на cssmodules не сделать

в бэме ты "изолируешь" стили вручную (пишешь длинные селекторы), в css-модулях изолирование происходит засчёт автоматического хэширования Результат — один. Способы разные.

И всё это ради того чтобы не писать 3-4 строчки символов?

Есть вещи которые которые без костылей на cssmodules не сделать

да, есть, тот же обмен переменными в js и css "мирах"

И всё это ради того чтобы не писать 3-4 строчки символов?

Каждый раз

И всё это ради того чтобы не писать 3-4 строчки символов?

3-4 строчки символов это по-моему дохрена, если речь о классе oO

в бэме ты "изолируешь" стили вручную (пишешь длинные селекторы), в css-модулях изолирование происходит засчёт автоматического хэширования Результат — один. Способы разные.

в беме не обязательно писать длинные селекторы. ) можно например вот так https://github.com/CSSSR/csssr-project-template/blob/demo/app/blocks/footer/footer.jade но это уже не реакт-лайк подход

3-4 строчки символов это по-моему дохрена, если речь о классе oO

Не о классе же говорю, а о сколько набирается строчек в полном файле.

Есть вещи которые которые без костылей на cssmodules не сделать

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

в беме не обязательно писать длинные селекторы. ) можно например вот так https://github.com/CSSSR/csssr-project-template/blob/demo/app/blocks/footer/footer.jade но это уже не реакт-лайк подход

так это очередной инструмент в наборе и новый синтаксис для ознакомления "можно" как угодно)

да, есть, тот же обмен переменными в js и css "мирах"

вот

Сколько там, одно слово добавить в css и всё. Всё что на странице меняется динамически - отдельно через стиль элемента. Просто, понятно, без лишней хуеты и велосипедов. А если не забывать про комментарии в коде - вообще всё прекрасно.

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

полноценные условные операторы в стилях в зависимости от состояния приложения

Сколько там, одно слово добавить в css и всё. Всё что на странице меняется динамически - отдельно через стиль элемента. Просто, понятно, без лишней хуеты и велосипедов. А если не забывать про комментарии в коде - вообще всё прекрасно.

бешено плюсую

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

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

полноценные условные операторы в стилях в зависимости от состояния приложения

это подход к написанию стилей откуда ? из мобильной разработки ?

полноценные условные операторы в стилях в зависимости от состояния приложения

а какие неполноценные в js + css-modules?

Кажется пора создавать группу css vs cssinjs

это подход к написанию стилей откуда ? из мобильной разработки ?

это подход который реализуем в css-in-js.

а какие неполноценные в js + css-modules?

дублирование переменных для цветов/размеров в css-файлах и в js-файлах

может давайте в редакс запихнём стили? Будем стору редуцировать . для изменения состояния в стилях

может давайте в редакс запихнём стили? Будем стору редуцировать . для изменения состояния в стилях

не надо опускаться на уровень бреда

это ж очередной подход. Бема же не придумали ещё

дублирование переменных для цветов/размеров в css-файлах и в js-файлах

нет, это кстати в css-modules не нужно. там можно импортировать значения из css в js

дублирование переменных для цветов/размеров в css-файлах и в js-файлах

[styles.someCssClass]: active && valid

[styles.someCssClass]: active && valid

и? jss так и работает

нет, это кстати в css-modules не нужно. там можно импортировать значения из css в js

хм, мб, как?

ну я ответил на сообщение о дублировании

а какие неполноценные в js + css-modules?

ну смотри, css-modules позволяют в js доставать значения из css. css-in-js позволяют в css доставать значения из js

[styles.someCssClass]: active && valid

тут переменных-то нет

@panisimov я привел кейс, ты увидел?

так, уже второй человек не знает как работает css-modules и ратует за jss

похоже спор можно реально завершать

css-modules тема

я сам css-модулями как раз пользуюсь)

все что я щас увидел это "зачем css-in-js, это большой костыль", а затем в ответ на аргументы кучу костылей вокруг css)

интересно ктонить мерял производительность изменения стилей путём добавления/изменения текста в <style> из js ?

так, уже второй человек не знает как работает css-modules и ратует за jss

то есть ты говоришь, что с помощью css-modules можно из css доставать не только хешированные имена классов, но и значения переменных?

то есть ты говоришь, что с помощью css-modules можно из css доставать не только хешированные имена классов, но и значения переменных?

это я не про тебя говорил

хм, мб, как?

в scss :export { variable: $variable; } в js styles.variable

Cssmodules + inline styles для меняющихся

то есть ты говоришь, что с помощью css-modules можно из css доставать не только хешированные имена классов, но и значения переменных?

но кейс описанный тобой действительно просто реализуется с помощью css-modules

то есть ты говоришь, что с помощью css-modules можно из css доставать не только хешированные имена классов, но и значения переменных?

да

интересно ктонить мерял производительность изменения стилей путём добавления/изменения текста в <style> из js ?

интересно, кто-нибудь замерял количество труда потраченного на переделку 5-6 кастомных тем от верстальщиков, после хорошего рефакторинга библиотеки компонентов?

ERROR: S client not available

то есть ты говоришь, что с помощью css-modules можно из css доставать не только хешированные имена классов, но и значения переменных?

ну способ достать значения не проблема. наверняка ля этого и лоадеры есть :) Но зачем ??? — если надо изменить состояние — это БЭМ-модификатором делается

да

ссылку в доку, пожалуйста

интересно, кто-нибудь замерял количество труда потраченного на переделку 5-6 кастомных тем от верстальщиков, после хорошего рефакторинга библиотеки компонентов?

мне это предстоит(

ну способ достать значения не проблема. наверняка ля этого и лоадеры есть :) Но зачем ??? — если надо изменить состояние — это БЭМ-модификатором делается

а если состояний 100? а если их 100^100

а если состояний 100? а если их 100^100

никто не мешает нагенерировать 100 разных состояний и юзить их в жс.

никто не мешает нагенерировать 100 разных состояний и юзить их в жс.

ага а где critical-css? Будешь грузить эту тонну CSS, большая часть которого тупо не юзается?

ага а где critical-css? Будешь грузить эту тонну CSS, большая часть которого тупо не юзается?

генерирование этих состояний можно произвести внутри жса в цикле например

интересно, внезапно понадобился js и что же ты будешь ставить в классах?

Css быстро наберет вес там текст селлекторов огромен, при геометрической прогрессии

а если состояний 100? а если их 100^100

Так создай отдельный компонент который управляет всем этим и всё. Зачем какие-то модули дополнительно ставить?

Так создай отдельный компонент который управляет всем этим и всё. Зачем какие-то модули дополнительно ставить?

ха))) на каждый компонент будет ещё 5 компонентов который этим управляют Так будешь писать динамические стили, и постепенно осознаешь, что 90% стилей у тебя: <div style={this.state.styles} />

css-in-js это не большой оверхед над тем что есть но, при подключении модуля ты сразу из коробки получаешь всё что имел раньше + ещё несколько плюшек

в scss :export { variable: $variable; } в js styles.variable

ну это норм вообще! очень удобно

ссылку в доку, пожалуйста

https://github.com/css-modules/icss

в scss :export { variable: $variable; } в js styles.variable

а если динамически надо изменить переменную?

а если динамически надо изменить переменную?

то есть?

ха))) на каждый компонент будет ещё 5 компонентов который этим управляют Так будешь писать динамические стили, и постепенно осознаешь, что 90% стилей у тебя: <div style={this.state.styles} />

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

в js же получишь значение, с которым делай что хочешь

то есть?

как мне изменить эту переменную в css чтобы везде изменилось?

а если динамически надо изменить переменную?

ну, я говорю - модули позволяют в js получить css переменные. css-in-js в дополнение к этому позволяют в css получить js переменные

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

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

интересно, внезапно понадобился js и что же ты будешь ставить в классах?

цикл с таким телом например variable++; const myModifications = `.${sytle.myClass} { padding-top: ${variable}px; }`; const myCustomClass=`${sytle.myClass} ${sytle.myClass}_${myModifications}`;

цикл с таким телом например variable++; const myModifications = `.${sytle.myClass} { padding-top: ${variable}px; }`; const myCustomClass=`${sytle.myClass} ${sytle.myClass}_${myModifications}`;

и куда ты это засунешь?

как мне изменить эту переменную в css чтобы везде изменилось?

ну это думаю никак, другой подход придётся выбрать, да

ну и аппендить этот стиль к хеаду. как в цсс-модулях завещали

ну и аппендить этот стиль к хеаду. как в цсс-модулях завещали

так блин это и делает jss только в НОРМАЛЬНОМ стиле

и куда ты это засунешь?

у меня нет готового решения на этот счёт..

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

Только один хуй это велосипед ради велосипеда.

Только один хуй это велосипед ради велосипеда.

тугие люди...

так блин это и делает jss только в НОРМАЛЬНОМ стиле

жсс заставляет этот звиздец делать во всём проекте а не там где надо

жсс заставляет этот звиздец делать во всём проекте а не там где надо

отнюдь только там где хочешь никто не заставляет тебя совмещать это с CSSModules