好奇是否有人对不会破坏浏览器的 DevTools 功能的开发工作流程有任何建议，以便 UX 工程师轻松修改、操作和理解 CSS。我了解 CSS 封装对于 React 开发人员来说是多么棒，但我发现许多实现在能够为开发团队系统地修改和强制执行样式系统时完全是垃圾箱之火，仅仅是因为查看 CSS 的工具是如此混淆并且将样式与元素匹配的面包屑路径被删除 10 次。显然，这些框架在没有任何浏览器支持的情况下开发自己的系统是一个问题，就像未来技术的创可贴一样。
我找到的最好的解决方案是 ShadowDOM，我也希望并期待它成为未来的原生标准。我没有找到 Chrome 插件来帮助解决这个问题的结果，但什么也没找到。这是一个简单的示例，您可以看到 CSS 很容易找到和理解——但使用它仍然有点挑战，因为它从根本上隔离在 DOM 中并且很难分辨样式的范围。 http://react-shadow.herokuapp.com/
我研究了 JSS 和许多其他帮助程序构建。我目前正在尝试在我们的构建中取消实现 Styled-Components，因为它似乎是所有这些中最模糊和最令人费解的。
我相信唯一的选择是：
- 放弃吧，让全栈开发人员修复排版并纠正所有挑剔的 CSS 并自己制定设计系统的策略（这不是一个合理的选择，他们无论如何都不想这样做）。
- 等到 Chrome 实现了一个比 ShadowDOM 的基本 CSS 更复杂的 DevTools 工具（我认为不会很快发生这种情况）
- 在 stack-overflow 上向其他同样沮丧的 UX 工程师寻求建议。
我在这里不仅仅是讨厌 Styled-Components，我真的在寻找适合封装组件开发流程的解决方案，该流程目前在 React 开发工作流程中无处不在——但 ALSO 在浏览器中也是可维护和可延展的，所以我的工作是t 困难 200 倍。我的开发团队同意，但没有人有解决方案。