I front-end and hate CSS. Here's how I deal with it

(Edit) - read the comments afterwards, I now strongly believe that this post is flawed thanks to the awesome community and I now find that there is more value in the comments than the post.

TLDR; use styled-components. If you suggest otherwise, read the post and fight me in the comments ✊

I'm a React front-end web developer with back-end origins(node, express, mongo). So naturally(for me), I dislike CSS. It doesn't feel intuitive(to me) and as someone who loves structuring databases and making queries efficiently, my passion for React hooks was a real pain since I needed to CSS in order to front-end properly.
As a result, I always required a so-called 'publisher'(not sure if such a position exists in other countries, but it exists in South Korea, basically an HTML/CSS specialist). But I was forced out of my 'no-CSS-zone' when I became the sole full-stack developer(part-time) for a startup because I forgot I don't CSS.

By the way, this method probably only works if the designer you work with supplies the design via Zeplin(which I expect to be most designers). If that's not the case, I'm afraid dark days are ahead of you my CSS-hating-comrade - I don't have answers.

So here's the gist - use Styled Components. Unless a large portion of your project's CSS is already set, I don't see an edge case when you shouldn't - and I'm not kidding. I thought about it for 3 days before I started working on my project(I wanted to CSS as less as physically possible) and tried using reactstrap+bootstrap at the beginning. Ditched everything and now I do everything with styled-components.

Here's why.

Why styled-components?

This is a page I'm working on(yes some naming conventions have not been kept but I'll fix that in the future)

The next screenshot is one without styled-components(and also a project that was terrible in terms of DX(Developer eXperience))

And I literally had to search for a snippet that didn't look terrible(yeah this is the decent one)

Before you ready your pitchforks - I agree with you, it's not the best code.
The point is readability, which influences DX, which ultimately leads to better UX(quoted from Tejas on his spectacular talk at React conf 2019)(because you spend more resources on meaningful coding)

I'm not a visual person and have difficulty picturing visual things in my mind. Yet as the person who wrote the code in the first screenshot, just scanning the names of the components I can literally visualize how it looks like.

Finding the component which I have to edit is so much easier and the code is myriads more straight forward.

The pros of using styled-components are listed on their website, so have a read and try to convince me to use something else in the comments. I'm still in my early stages if you succeed I am definitely willing to switch.

As for the part where I said you need Zeplin - it has all the CSS. Just flex all the components for responsiveness and set min-width. If you hate CSS enough to not have studied flexbox like me, finish this game and you'll be set to begin straight away(it did for me)

And that's how I deal with CSS. 😄
Thanks for reading, hope you get something out of this post.