Comments 18
Для работы в CSS нужно использовать SCSS и CSS Modules, а CSS in JS это мракобесие и извращенство засоряющее код, добавляющее ненужный шум и размывающее явное визуальное отличие компонентов в JSX'e от обычных div'ов, span'ов и т.п.
Вообще есть нормальные compile time реализации CSS in JS.
Вообще есть нормальные compile time реализации CSS in JS.
Это не имеет отношения к тому что я написал выше. Вы скинули только то, что на выходе при сборке эти стили извлекутся в отдельный css файл. Все остальные жирные минусы никуда не делись. И исходный код благодаря этому подходу как был ужасным, так и остался.
Вы скинули только то, что на выходе при сборке эти стили извлекутся в отдельный css файл.
Всего-то убирает весь оверхед css-in-js решений.
Все остальные жирные минусы никуда не делись.
А какие именно? Если про
размывающее явное визуальное отличие компонентов в JSX'e от обычных div'ов, span'ов и т.п.
то мне это тоже не нравится. Но у linaria этот функционал даже не в базовой библиотеке, а плагином. Ничего не мешает тупо не ставить этот пакет.
При этом сохраняется главное преимущество css-in-js решений: неиспользуемые классы сразу видны.
У styled проблемы с производительностью. Как только в DOM появляется пара десятков тысяч элементов, styled начинает визуально тормозить, когда пользователь покидает страницу и нужно почистить стили для всех этих десятков тысяч элементов.
Соответственно, если какие-то сложные гриды с кучей styled компонентов внутри — жди беды. Наступили на грабли уже и с ant-table и c aggrid.
Разве для тех же CSS-модулей ситуация не такая же?
Это же webpack css-loader, флаг modules: true и получаем css modules. Т.е. это просто обычный css + имена классов изменяются чтобы можно было во многих компонентах использовать .title и т.п.
https://webpack.js.org/loaders/css-loader/#modules
https://github.com/css-modules/css-modules
В общем вот живой пример:
https://codesandbox.io/s/jolly-tdd-jyh2w?file=/src/index.js
Смотрите там в консоль и сразу все увидите.
Ну а разве styled components делает что-то другое? Вроде как он тоже генерирует CSS и классы для селекторов, и так же генерирует `<style/>` узел в `<head/>`. Ну разве что в случае модулей это будет `<link/>`. Но в обоих случаях браузеру нужно загружать все стили.
Нет, он не тоже самое делает. Всё это хранится в JS файле бандла, а не вырезано отдельным .css файлом сбилженым, отсюда неоправданно более жирный JS бандл, и при каждом изменении JS'a вынужденно пользователь загружает ещё CSS in JS месте с ним, хотя мог бы и не загружать без изменения стилей и пользовался бы закэшированным .css'ником. В любом случае css in js это просто неоправданно срать в коде и срать в бандле итоговом.
Чтобы CSS был отдельным файлом тот же webpack нужно отдельно настраивать. По-умолчанию стандартная связка style-loader/css-loader помещают стили в JS бандл.
> css in js это просто неоправданно срать в коде
Когда-то так же говорили про JSX, якобы это "html in js"
> срать в бандле итоговом.
Не уверен что это недостаток. С помощью того же url-loader картинки бандлят. Иногда может быть удобно иметь приложение в виде одного файла, например для встраивания.
Не знаю деталей про styled components, но вроде бы есть аналогичные библиотеки которые позволяют извлечь CSS (google подсказывает linaria и astroturf, может есть и другие). Так что я бы не стал обобщать на весь "css in js".
Чтобы CSS был отдельным файлом тот же webpack нужно отдельно настраивать. По-умолчанию стандартная связка style-loader/css-loader помещают стили в JS бандл.
Да, надо настроить, но никто в здравом уме не использует голый webpack без кастомного конфига и у всех уважающих себя разработчиков есть webpack config для всех проектов, который уже можно дотюнить под конкретные нужны если в этом есть нужда. Есть ещё конечно и отдельные индивидумы которые используют Create React App не в hello world'e, а в комерческих проектах это конечно отдельная смешная история, но чтож и такие к сожалению тоже есть)
Не знаю деталей про styled components, но вроде бы есть аналогичные библиотеки которые позволяют извлечь CSS (google подсказывает linaria и astroturf, может есть и другие). Так что я бы не стал обобщать на весь "css in js".
Тогда полностью его "преимущества" улетучиваются и его использование становится абсурдным в квадрате.
Когда-то так же говорили про JSX, якобы это "html in js"
Тут другая история, неравнозначная аналогия, но попытка не пытка конечно)
Если хотите используйте CSS in JS сколько влезет, только не в коммерческих проектах пожалуйста, т.к. потом кому-то кроме вас их поддерживать придется. Вы же уйдете и забудете это как страшный сон, а другим потом волосы на голове рвать или переписывать все.
В v3 половина просадки производительности была из-за поддержки тем, которыми большая часть проектов не пользуется, а просадка есть. Это так, к примеру. Текущее состояние не знаю. Те нет, не тоже самое он делает.
Спасибо за статью! Вопрос к опытным разработчикам: сильно ли ухудшает производительность данная библиотека на больших проектах?
Главное что эта поделка сильно ухудшает код:
1) У тебя в JSX'e перестает быть видно разницу между компонентами и просто html тэгам, т.к. всё теперь с заглавное буквы.
2) CSS это CSS. Писать его в JS это просто полнейший бред и каша. Это всё равно что писать SQL запросы в базу а на следующих строчках в этом же файле html генерировать.
Если в проекте используются custom elements, то:
1) Просто HTML теги и custom elements со строчной буквы (<div> и <data-div>).
Да, конечно, тут "-" есть, но и в случае StyledComponents можно добавить просто префикс или импортировать как объект и писать так: <S.Component>;
2) CSS там пишут прямо в JS. Есть даже библиотека от гугла: Lit.
Styled Components — идеальная стилизация React-приложения