CSS-in-JS реализация, которая хорошо работает с DevTools - PullRequest
0 голосов
/ 01 марта 2019

Любопытно, есть ли у кого-нибудь совет для рабочего процесса разработки, который не нарушает способность браузера 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 Ответ

0 голосов
/ 01 марта 2019

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

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

...