CSS-in-JS实现与DevTools配合使用

Question

很奇怪，如果有人对开发工作流程有任何建议，不会破坏浏览器的DevTools能力，使UX工程师能够轻松地修改，操纵和理解CSS。我理解CSS封装对于React开发人员来说是多么美妙，但我发现很多实现都是一个完整的垃圾站，因为它能够为开发人员团队系统地修改和实施样式系统，因为查看CSS的工具是如此模糊处理和使用元素匹配样式的痕迹痕迹被删除10次。显然，这些框架在没有任何浏览器支持的情况下开发自己的系统是一个问题，例如未来技术的创可贴。

我发现的最佳解决方案是ShadowDOM，我也希望并期望这是未来的本土标准。我看起来没有一个Chrome插件的结果来帮助解决这个问题，但一无所获。这是一个简单的例子，您可以看到CSS很容易找到和理解 - 但仍然有一些挑战，因为它在DOM中基本上是孤立的，很难说出样式的范围。 http://react-shadow.herokuapp.com/

我查看了JSS和其他一些帮助程序构建。我目前正在尝试在我们的构建中去除Styled-Components，因为它似乎是最混乱和最复杂的。

我相信唯一的选择是：

1. 放弃，让全栈开发人员修复排版并纠正所有针织挑剔的CSS并自行制定设计系统的策略（不是一个合理的选择，他们不想这样做）。
2. 等到Chrome实现了一个比ShadowDOM的基本CSS更复杂的DevTools工具（我不会很快看到这种情况发生）
3. 请求堆栈溢出，以获取其他同样受挫的UX工程师的建议。

我不是只讨厌Styled-Components，我真的在寻找适合当前在React开发工作流程中无处不在的封装组件开发过程的解决方案 - 但是ALSO在浏览器中是可维护和可塑的，所以我的工作不是' t 200x更难。我的开发团队同意，但没有人有解决方案。

Answer 1

设计系统与css-in-js库无关。他们关注CSS渲染而不是为您提供设计系统，无论您使用什么渲染引擎，都必须使用一个或构建一个。

您尝试过的调试解决方案有哪些具体问题？请提供具体问题的具体示例。