[AskJS], почему css-in-js так популярен, когда css-модули — это вещь?

Question

[stevejock1]

Мне кажется, что css-in-js требует некоторого дополнительного анализа, который, на мой взгляд, происходит при начальном времени загрузки, который мы обычно стараемся минимизировать. В какой-то момент, когда конфликты стилей были разрешены с помощью дисц whatsapp web иплины с использованием пространств имен, таких как BEM, избегать конфликтов было хлопотно и им неудобно, но занятая работа, но модули css решают эту проблему. Теперь я предп 192.168.0.1 олагаю, что большая часть веб-сообщества, которая решила использовать css-in-js, не идиоты, но я не понимаю. Я пропускаю некоторые основные преимущества?

Answer 1

[nikita_li]

Для большинства приложений модулей будет достаточно. Важно понимать, что css-in-js решает не только задачу разрешения уникальности имён селекторов. Я считаю, что некоторые задачи он решает гораздо лучше:

• Создание цветовых тем
  
• Создание API для библиотеки компонентов (вроде Material UI)
  
• Выгрузка критических стилей для SSR, или пререндеринга
  
• Создание динамических стилей и манипулирование CSSOM
  

Касательно времени на инициализацию и создание стилей: да, css-in-js требует небольших временных затрат, но на практике это не та вещь, которая поголовно становится узким местом. Гораздо чаще встречаются сайты, загружающие несколько шрифтов, и тянущие огромный не разделенный бандл, что становится проблемой для UX. Этому стоит уделить больше внимания, чем инициализации css-in-js.

Answer 2

[JS Noob]

Ещё из преимуществ я бы выделил привязанность стилей к конкретным компонентам. Если вы удаляете этот компонент, то и стили удалите вместе с ним. Это довольно просто сделать в тех же SC, чем выискивать классы, которые привязаны к удаляемым блокам в css файле CSS Modules.

Comments

[strelok011]

И плюс к этому - изоляция имени класса. Для каждого компонента класс будет генериться с уникальным префиксом. Т.е. получить конфликты по имени класса не получится.

Answer 3

[Александр Баталов]

Предпочитаю CSS-модули, но поддержка модуля для Webpack почти мертвая, все работает, но проблему перекрытия стилей и разрешения циклических зависимостей нет. Проект собирается, конечно, только в консоль будут сыпаться ворнинги, и в стилях могут быть реальные пересечения, которые создают проблемы.
Вижу преимущество от CSS-модулей только в связке с TypeScript, 'd.ts' для стилей можно генерировать с помощью 'tsm'.