CSS-in-JS реализация, которая хорошо работает с DevTools

Любопытно, есть ли у кого-нибудь совет для рабочего процесса разработки, который не нарушает способность браузера DevTools для UX Engineer легко изменять, манипулировать и понимать CSS. Я понимаю, как CSS-инкапсуляция является фантастической для разработчиков React, но я нахожу, что многие реализации являются полным огнем мусора, когда дело доходит до возможности систематически модифицировать и применять системы стилей для команды разработчиков просто потому, что инструменты для просмотра CSS таковы. запутанный и след крошки, чтобы соответствовать стилям с элементами, удален в 10 раз. Очевидно, проблема в том, что эти платформы разрабатывают свои собственные системы без какой-либо поддержки браузера, например, как бэнд для будущих технологий.

Лучшее решение, которое я нашел, - ShadowDOM, и я также надеюсь и ожидаю, что это будет родной стандарт будущего. Я не нашел результатов для плагина Chrome, чтобы помочь с этим, но ничего не нашел. Вот простой пример, и вы можете видеть, что CSS довольно легко найти и понять - но все же это немного сложная задача для работы, так как он принципиально изолирован в DOM и трудно определить область применения стиля. http://react-shadow.herokuapp.com/

Я посмотрел на JSS и ряд других вспомогательных сборок. В настоящее время я пытаюсь де-реализовать Styled-Components в нашей сборке, так как она кажется наиболее запутанной и запутанной из всех.

Я считаю, что единственные варианты:

  1. Откажитесь, пусть разработчики полного стека исправят типографику и исправят весь вяжущий CSS и сами разработают стратегию системы дизайна (не разумный вариант, они все равно не хотят этого делать).
  2. Подождите, пока Chrome не реализует инструмент DevTools, который является более сложным, чем базовый CSS для ShadowDOM (я не думаю, что это произойдет в ближайшее время)
  3. Спросите о переполнении стека за советом от других аналогично разочарованных UX-инженеров.

Я здесь не для того, чтобы просто ненавидеть Styled-Components, я действительно ищу решения, которые соответствуют процессу разработки инкапсулированных компонентов, который в настоящее время повсеместен в рабочих процессах разработки React, но ТАКЖЕ поддерживается и поддается изменению в браузере, так что моя работа нет т в 200 раз сложнее. Моя команда разработчиков согласна, но ни у кого нет решения.

Источник

1 ответ

Система проектирования не связана с библиотекой css-in-js. Они занимаются рендерингом CSS и не предоставляют вам систему проектирования, вам придется использовать ее или создавать независимо от того, какой движок рендеринга вы используете.

Какие конкретные проблемы у вас были с решениями отладки, которые вы пробовали? Пожалуйста, приведите конкретные примеры с конкретными вопросами.

Источник
Другие вопросы по тегам