I front-end and hate CSS. Here's how I deal with it
Tags: css, react, javascript
Published: 2019-12-15 13:41:53

(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](https://www.styled-components.com/). If you suggest otherwise, read the post and fight me in the comments :fist:

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](https://www.npmjs.com/package/reactstrap)+bootstrap at the beginning. Ditched everything and now I do everything with styled-components.

Here's why.
#### Why styled-components?
![styled-component ex](https://i.imgur.com/yuFLFu1.png)
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))
![NopeNopeNope](https://i.imgur.com/xl9wlu4.png)
###### 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](https://twitter.com/TejasKumar_) 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](https://www.styled-components.com/docs/basics#motivation), 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](https://flexboxfroggy.com/) and you'll be set to begin straight away(it did for me)

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