Статистики толком нигде никакой нет :/
https://github.com/MicheleBertoli/css-in-js
Есть 47 имплементаций CSS Modules (точнее сказать CSS in JS - не все из них предерживаются техник на которых базируется CSS Modules)
Базируясь на статискику из https://libraries.io
18245 projects depend on react (это прямые Dependency - если смотреть на косвенные/deb зависимости их намного больше и один из репозиториев angular/angular :D)
Если исключить CSS loader (от которого зависят 9519 проектов) то мы получим 1090 - приблизительно 6% использует CSS Modules (CSS in JS).
Ряд проблем с этими данными - CSS Modules стали популярны относительно недавно, так что выборку нужно делать немного по другому. https://libraries.io учитывает только те репозитории которые запаблешены на NPM
Про CSS Loader напишу отдельно.
но css-in-js и css modules это очень разные технологии
⩔wein
⩔wein
в чатике по реакту постоянно холивары между сторонниками одного и другого)
Алексей
В create-react-app нет css модулей
Несмотря на то что авторы create-react-app утверждают что
Some features are currently not supported:
- Server rendering.
- Some experimental syntax extensions (e.g. decorators).
- CSS Modules.
- Importing LESS or Sass directly (but you still can use them).
- Hot reloading of components.
CSS модули на самом деле есть и работают (все благодоря такой штуке как CSS Loader)
Создайте приложение с помощью create-react-app. Запустите его
1) в App.css замените .App-header на :local(.App-header)
2) в App.js замените import './App.css' на import cls from './App.css'
3) в App.js <div className="App-header"> на <div className={cls['App-header']}>
4) PROFIT
(можете проверить с помощью devTools - в аттрибуте class будет стоять hash)
Как такое возможно? Все из webpack модуля css-loader. Он позволяет работать с CSS модулями если мы передали флаг 'css-loader?modules'. В create-react-app этого флага нет. Но на самом деле это не важно. Если заглянуть в исходники css-loader можно увидеть что единственное что меняется от этого флага это префикс для классов по умолчанию mode: moduleMode ? "local" : "global"
У css-loader есть два префикса :local(.class), :global(.class). Если нет флага modules то css-loader по умолчанию просто подставляет :global (на самом деле не подставляет но это технический момент) а если мы хотим получить локальный className то нам нужно добавить :local вручную. Если же флаг стоит то по умолчанию подставляется префикс :local и если нужно сделать стиль глобальным то нужно вручную добавить префикс :global.
Тоесть CSS Modules всегда включены в css-loader. Вопрос только в настройке по умолчанию. Естественно это не удобно к каждому селектору в CSS вручную добавлять :local. Но по факту работать с CSS Modules можно и без флага modules.
Так что create-react-app на самом деле поддерживают "не удобный" вариант работы с CSS Modules
Алексей
в чатике по реакту постоянно холивары между сторонниками одного и другого)
Тут для меня важнее было понять просто pure CSS vs CSS in JS. 6% достаточно маленькая цифра чтобы сделать некие выдоды (но как я писыл к сожалению статистика эта имеет много погрешностей)
Vlad
Anonymous
react-router поддерживает ssr
Но разве это всё не через ноду будет идти? Я не хочу на сервере ноду держать.
Vlad
Но разве это всё не через ноду будет идти? Я не хочу на сервере ноду держать.
Тогда у тебя не будет ssr и будут Seo issues
Anonymous
Тогда у тебя не будет ssr и будут Seo issues
А нельзя настроить роутинг(?) как-то по-хитрому? Чтобы и статику показывал и приложение.
⩔wein
Тут для меня важнее было понять просто pure CSS vs CSS in JS. 6% достаточно маленькая цифра чтобы сделать некие выдоды (но как я писыл к сожалению статистика эта имеет много погрешностей)
ну меня не удивляет такая цифра эта вся штука с css modules и css-in-js серьезно популярна начала с пол года назад делаться
Владимир
но css-in-js и css modules это очень разные технологии
Если говорить о css modules то они появились из одного решения css-in-js, поэтому не правильно утверждать что они разные
Алексей
ну меня не удивляет такая цифра эта вся штука с css modules и css-in-js серьезно популярна начала с пол года назад делаться
Если честно - 6% это только если учитывать CSSinJS только с учетом React приложений - если подключить Ember и Angular в статистику. То цифра станет еще меньше. А вообще я ожидал увидеть более высокие показатели -.- даже можно сказать так - я был уверен что они намного выше
Владимир
Если честно - 6% это только если учитывать CSSinJS только с учетом React приложений - если подключить Ember и Angular в статистику. То цифра станет еще меньше. А вообще я ожидал увидеть более высокие показатели -.- даже можно сказать так - я был уверен что они намного выше
Мало людей вообще понимают зачем им это, кто понял тот и использует, статистика тут не показатель, время и опыт решат эту проблему
⩔wein
Если говорить о css modules то они появились из одного решения css-in-js, поэтому не правильно утверждать что они разные
подход просто в результате разный совершенно.
все css-in-js решения, сколько бы разными ни были, имели друг с другом куда больше общего, чем с css-modules
Владимир
Вообще не так
Владимир
Они изолируют твой css? Уже главное сходство
Vlad
А нельзя настроить роутинг(?) как-то по-хитрому? Чтобы и статику показывал и приложение.
Ты понимаешь как работает ssr?
Vlad
Только скоупы
Владимир
Нейминг это делает
Vlad
Не делает
Владимир
Делает
Vlad
Нейминг делает скоуп
Vlad
Но не изоляцию
Владимир
Никогда два разных селектора не будут иметь одинаковое имя
Vlad
Это скоупы
Владимир
Скоуп это и есть изоляция
Vlad
Нет
Vlad
Смотри
Vlad
#app button { font-weight: bold; }
Vlad
И все
Владимир
Это называется наследование
Vlad
Какой бы скоуп не был бы
Vlad
Цсс не изолирован и подвержен влиянию окружения
Владимир
Ты хочешь сказать что спека веб компонент это будет учитывать?
Владимир
Это возможность цсс же
Vlad
И?
Vlad
Скоупы на рынке есть, изоляции нет
Владимир
Следовательно это частный случай который ок
Vlad
Хорошо
Владимир
Когда ты это пишешь ты ждешь такого поведения
Vlad
Только называй это скоупы селекторов
Vlad
Это точно не изоляция
Владимир
Если не хочешь ждать, стоит резетить стили компонент, что на мой взгляд в корне не верно
Vlad
Изоляция это в каком то смысле shadow dom
Владимир
Так она подразумевает это?
Владимир
Если да то это бред, будет куча проблем
Владимир
Зависимые единицы измерения станут не нужны
Vlad
Если не хочешь ждать, стоит резетить стили компонент, что на мой взгляд в корне не верно
Мм? Композиция лучше иерархии и наследования
Владимир
Будем в каждом компоненте прописывать шрифты и типографику
Владимир
Но к ним же так долго шли 😬
Vlad
Будем в каждом компоненте прописывать шрифты и типографику
Это просто будет переменная в глобальном сторе
Владимир
Я пробовал писать в таком стиле на том же жсс убирая наследование, кроме боли ничего полезного
Vlad
Владимир
Переменные решат проблему, но создадут множество других
Владимир
Так и будем ходить по кругу
Владимир
Банальное переопределение переменной
Vlad
И есть примеры на гитхабе?
Владимир
Ну смотри, под сколько свойств ты создашь переменные?
Владимир
Стили браузеров перестанут влиять на что либо
Владимир
Все нужно переопределять
Владимир
И получается что описывая 2 совершенно разных кнопки от дизайнера ты должен будешь написать простыню из свойств
Владимир
Которые могли бы наследоваться описав ты их в глобале где нибудь вверху файла или скоупа
Vlad
Vlad
Которые я мерджу с первым правилом для каждого компонента
Владимир
Ну ты сам пишешь - мержишь с первым правилом, удобной конструкции для этого нет
Владимир
Кроме как ручками написать все свойства
Владимир
Вторая проблема которую я вижу это отладка, наверное никому не хочется видеть inheritance свойства при просмотре
Vlad
Владимир
Достаточная для того что бы так не делать
Vlad
Если в девтулзах включить show user agent styles будет тоже самое