支持DevTools的CSS-in-JS实现

Question

好奇的是，是否有人对开发工作流程有任何建议，而不破坏浏览器的DevTools功能，让UX工程师能够轻松地修改、操作和理解CSS。我理解CSS封装对于响应开发人员来说是多么美妙，但当涉及到能够系统地修改和执行开发人员的样式系统时，我发现许多实现都是一个完全的垃圾堆，仅仅因为查看CSS的工具非常混乱，并且将样式与元素匹配的面包屑轨迹删除了10倍。显然，这些框架在没有任何浏览器支持的情况下开发自己的系统是个问题，就像为未来的技术提供带宽一样。

我找到的最好的解决方案是ShadowDOM，我也希望并期望这将成为未来的原生标准。我找过没有结果的Chrome插件来帮助这个，但什么也没有发现。这里有一个简单的例子，您可以看到CSS很容易找到和理解--但是仍然是一个很难处理的挑战，因为它在DOM中基本上是孤立的，并且很难分辨样式的范围。http://react-shadow.herokuapp.com/

我已经研究过JSS和许多其他的帮助构建。我目前正试图在我们的构建中去实现样式化的组件，因为它似乎是所有这些组件中最模糊、最复杂的。

我相信唯一的选择是：

1. 放弃吧，让完整的堆栈开发人员修复排版，纠正所有挑剔的CSS，自己制定设计系统的策略(这不是一个合理的选择，反正他们也不想这么做)。
2. 等到Chrome实现了一个比ShadowDOM的基本CSS更复杂的ShadowDOM工具(我不认为这种情况会很快发生)。
3. 询问堆栈溢出，从其他类似受挫的UX工程师那里寻求建议。

我在这里并不只是讨厌使用样式--组件，我真的是在寻找适合封装组件开发流程的解决方案，这些解决方案目前普遍存在于工作流中--而且在浏览器中也是可维护和可扩展的，所以我的工作不会比以前困难200倍。我的开发团队同意，但没有人有解决方案。

Answer 1

设计系统与css库无关。他们关注CSS呈现，而不是为您提供一个设计系统，您将不得不使用一个或构建一个无论您使用什么渲染引擎。

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