我做前端开发，但讨厌 CSS。以下是我应对 CSS 的方法。

（编辑）——读了之后的评论，我现在强烈认为这篇文章有缺陷，这要感谢了优秀的社区，我现在发现评论比文章本身更有价值。

TLDR：使用styled-components。如果你有其他想法，请阅读全文并在评论区与我辩论✊

我是一名 React 前端 Web 开发人员，后端经验来自 Node、Express 和 MongoDB。所以，很自然地，我不喜欢 CSS。它对我来说不够直观，而且我喜欢构建数据库结构并高效地编写查询语句，因此，我对 React Hooks 的热情对我来说却成了巨大的负担，因为我需要使用 CSS 才能做好前端开发。
结果，我总是需要一个所谓的“发布者”（我不确定其他国家是否有这种职位，但在韩国有，基本上就是 HTML/CSS 专家）。但是，当我成为一家创业公司唯一的全栈开发人员（兼职）时，我不得不走出我的“无 CSS 区”，因为我忘记了我不会 CSS。

顺便说一句，这种方法可能只适用于你合作的设计师通过 Zeplin 提供设计稿的情况（我估计大多数设计师都是这么做的）。如果不是这种情况，恐怕你这位讨厌 CSS 的同志的日子不好过了——我帮不上忙。

所以重点是——使用 Styled Components。除非你项目的大部分 CSS 已经设置好了，否则我看不出有什么例外情况你不应该用它——我可不是开玩笑。在开始我的项目之前，我考虑了三天（我想尽可能少用 CSS），一开始尝试过Reactstrap + Bootstrap。后来我放弃了所有这些，现在我完全用 Styled Components 来做所有的事情。

原因如下。

为什么选择 styled-components？

这是我正在制作的一个页面（是的，有些命名规则没有遵守，但我以后会改正）。

下一张截图是未使用 styled-components 的版本（也是一个开发者体验 (DX) 非常糟糕的项目）。

我真的得费劲去找一段看起来不太糟糕的代码片段（嗯，这是其中比较好的一段）。

别急着反驳——我同意你的观点，这代码确实不是最好的。
关键在于可读性，它会影响开发者体验，最终带来更好的用户体验（引自Tejas在 2019 年 React 大会上的精彩演讲）（因为这样可以把更多资源投入到更有意义的代码编写中）。

我不是个视觉型的人，很难在脑海中想象出图像。然而，作为第一张截图中代码的编写者，我仅仅浏览一下组件的名称，就能清晰地想象出它的样子。

找到需要编辑的组件容易多了，代码也简单得多。

styled-components 的优点在他们的网站上有列出，所以请阅读一下，然后在评论区试着说服我使用其他组件。我还在摸索阶段，如果你成功说服我，我绝对愿意切换到其他组件。

至于我之前提到的需要 Zeplin 的部分——它包含了所有 CSS。你只需要对所有组件进行 flex 布局以实现响应式，并设置最小宽度即可。如果你像我一样讨厌 CSS 到没学过 flexbox，那就先玩完这个游戏，你就可以马上开始使用了（我就是这么做的）。

这就是我处理 CSS 的方法。😄
感谢阅读，希望这篇文章对你有所帮助。