joon

Posted on Dec 15, 2019

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

#css #react #javascript

(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.

Top comments (76)

Patrik Kiss • Dec 15 '19 • Edited

To he honest, I prefer the second version in this case. It is much more appealing and readable for me.

joon • Dec 15 '19

Thank you for responding and pitching in on the subject Patrik :)

At first, I was legitimately surprised that anyone thought so.
But after some thought and putting myself in someone's shoes who have never seen the code before, I was able to agree to some extent.

Perhaps the reason why I find using styled-components so appealing is because I can see the structure straight away since I know what's going on in each and every component.

Could you be so kind as to expand on the subject? I'm curious as to why you prefer the second version.

Shashwat Mehta • Dec 16 '19 • Edited

Because you're the only one who can picture it.
When you have a second developer, you'd both need to learn each other's naming processes.
The second code on the other hand, is pretty standard. Everyone knows what divs and spans and hrs are for. You use them, then style them appropriately.

Another thing is, most of the time when reading the code, you're trying to find functional components, not structural ones. The wrappers and dividers should remain in the backdrop. But the first code completely overwhelms me. I have no clue which of those 500 components actually does some work.

I also prefer to use html5 tags for the big page-level structures. Other than that, every component should be comparatively much simpler to need so much hierarchy.

joon • Dec 17 '19 • Edited

Because you're the only one who can picture it. When you have a second developer, you'd both need to learn each other's naming processes.
I couldn't agree more. This was definitely not something that I took into account when writing that code shippet.

I have no clue which of those 500 components actually does some work.
Completely agree as well.

I also prefer to use html5 tags for the big page-level structures
I googled html5 tags, and I'm not going to lie - did not even know that these were a thing(I only heard of the figure and header tag pretty much)
Will definitely study and attempt to implement to my code.

Thank you very much for the constructive and real-life applicable feedback Shashwat!

Daniel Scholtus • Dec 15 '19 • Edited

I believe both are bad examples.
There's too much hierarchy on a single file.
Also, structuring "pages" like this makes animations very hard to apply and your apps become last century.
I'm working on React Native, experimenting with the idea of placing components in scenes instead of "screens" and having each know based on the current state when to animate in, out, when to move and where. And I'm loving it. Apps become much more lively and interactive with less hassle of dealing with so many containers into containers into containers...

joon • Dec 15 '19

Thank you immensely for the feedback :)

I've honestly never used or created animations before in my life and it wasn't an aspect I was considering when I began cssing.

I greatly appreciate it!

Eric Bishard • Dec 15 '19

I think to hate css Ava not study for for flexbox shows a lack of willingness to learn the things that make you a true front end dev. Sorry but true frontend devs don't hate CSS. You are something else. Not front-end at least I wouldn't hire someone with this attitude as a front end dev.

I'm not trying to be rude. But it's necessary that if you are even going to go down the styled components route to have an expert level of CSS and also sass. There are reasons to use each in different projects. I hope you change your mind overtime and see hire much this view limits your capabilities

Maja Miarecki • Dec 16 '19

I'm a software engineer with 19 years of experience, last 8 years in JavaScript, last 5 years react. And I hate CSS. I prefer to write logic, take care of performance. But CSS is a pain.

I also prefer to use CSS-IN-JS solution.

And I think it has nothing to do if someone IS or IS NOT a frontend dev. We don't have to love all parts of technology stack as long as we know what for we use them and use best practices on daily bases.

joon • Dec 16 '19 • Edited

I truly appreciate the kind and understanding words.

Thanks a lot Maja :)

And I hate CSS. I prefer to write logic, take care of performance. But CSS is a pain.
I believe we might have a lot in common since I relate to this in a literally molecular level. Every fiber of my body responds to that sentence.

And I think it has nothing to do if someone IS or IS NOT a frontend dev. We don't have to love all parts of technology stack as long as we know what for we use them and use best practices on daily bases.
You've nudged my perspective on how to approach this issue, I was on the verge of forcing myself to learn CSS from all the comments. Again, thank you immensely for the kind and understanding words.

joon • Dec 15 '19 • Edited

Thank you for the feedback!

true frontend devs don't hate CSS
I'm not going to lie - the statement does sting, but I vastly agree.

The post was about how I try to cope with 'hating CSS' but I forgot to add that I also have comparatively rubbish so-called 'space-perception', meaning that I have difficulty in noticing subtle changes around a document. This was the main reason why I pretty much 'gave up' on CSS early on - studying CSS did not show half the results as other front-end devs.

You are something else
I also agree with this as well. I see myself as a backend dev at heart. Nice catch! :)

Sai Deep Konduri • Dec 15 '19

Sorry, i pass on your readable code because it's not

Harry Scheuerle • Dec 15 '19

The real issue is the naming. "Div", "Wrapper", "Main", even numbering them. Nothing about this code is thoughtfully semantic. The latter example's real issue is the way classes are used and the syntax highlighting for that is the eye sore.

joon • Dec 15 '19 • Edited

Thank you for the feedback Harry!

"Div", "Wrapper", "Main", even numbering them
I completely agree. This was my first attempt at CSSing and for some reason, my brain thought it as a great idea, and somehow I convinced myself enough to believe it - to the point that I wrote a devto post about my experience!

Nothing about this code is thoughtfully semantic
The statement does hurt, but completely understandable now that I understand my flaws. Thank you for pointing this out. I needed this :)

Jared • Dec 16 '19

Your attitude is incredible. We all can learn from something. Part of the reason to post here on Dev.to is to learn! Well done!

joon • Dec 16 '19

Your attitude is incredible.
Thank you for the compliment!

I'm secretly swallowing my tears and trying really hard to keep a straight face.
JK :)

I love any form of criticism because it means that the person cares enough to criticize, also it means that someone believes there is room for improvement and took the time to punch it into their keyboard - I'm grateful for that fact alone. In the long run, everyone chipped in and saved me countless hours of refactoring.

Jared • Dec 16 '19

Good to hear. You will go far. I look forward to your follow-up post! On a side note, CSS is a wonderful tool at your disposal. Learning it will only make you more valuable as a Dev 👍🏼

joon • Dec 15 '19

Thank you for the feedback Sai!

After reading the comments above. I agree with you completely!

Oliver • Dec 15 '19

So I love styled components, but I find the second one so much more readable, the first has too many components. If all you need is some padding or minimal styling use the inline style prop or css, and then for more complex UI components use a styled component. But a million "mainDiv" components feels unnecessary. It's different to have like a Card component or TextInput as a styled component

joon • Dec 15 '19 • Edited

If all you need is some padding or minimal styling use the inline style prop or css
I totally agree. That would be the optimal approach, but I found myself having an awful time when I used margins or padding in any part of my CSS.

But a million "mainDiv" components feels unnecessary
Also something I completely agree with.

Thank you very much for the constructive feedback. I will definitely attempt to apply these to the project ASAP.

Bikas Vaibhav • Dec 15 '19

I was never really sold on idea of styled component, but your example helped me to understand that it's absolutely worthless.

Too much of cognitive load and far less improvements.

Jared • Dec 15 '19

I wouldn't use this example as a good use case for styled components. SC are great.

joon • Dec 15 '19

Thank you for clarifying Jared :)
I also believe that SC is amazing yet I used it wrong in so many ways.

Jared • Dec 16 '19

No worries. We all have 👍🏼

joon • Dec 15 '19

I sincerely apologize that you feel this way.

I strongly believe that Styled Components are amazing - just that I set a very bad example.

I recommend reading through the comments - I'll post a follow-up post in the future after refactoring my project to smithereens. I hope that you feel differently after reading said-post. :)

Thank you for the feedback!

Louis Low • Aug 12 '20

I never write CSS for any UI development. I use Vue.js or Krugurt.js with Yogurt.

I can create beautiful web component in a just few minutes with API callbacks, for example:

<card-post>
  <y class="m-4 p-2 bg-white rounded-lg shadow">
    <y class="{ props.titlesize } font-semibold text-charcoal-100">
      { props.title }
    </y>
    <y class="{ props.descsize } depth-snug truncate">
      { props.description }
    </y>
  </y>
</card-post>

And then mount the web component:

<card-post
  title="..."
  description="..."
  titlesize="text-lg"
  descsize="text-sm">
</card-post>

Absolutely zero CSS.

joon • Aug 13 '20

Had a quick scroll through the Yogurt link,
I honestly had difficulty in believing that you never had to write CSS,
until I saw the documentation myself.

Very interesting concept / paradigm.

Currently I'm contently using classnames with Sass. And also found out that scss can be quite enjoyable.
Might give yogurt a go though in the future.
Thanks you for the comment Loouis!

Louis Low • Aug 13 '20 • Edited

My portfolio website is also built with 100% no CSS. All 100% crafted with Yogurt. As for Yogurt, the next version 1.0.9 release is coming soon. Check that out at the Utility Map. Enjoy then.

Seanmclem • Dec 16 '19

I used to hate css until I took some time to learn it. SCSS helped. Just pouring "hate" on things you don't understand or haven't learned yet -is going to be a problematic standpoint to take on things in life

joon • Dec 17 '19

Thank you for the feedback Seanmclem!

Just pouring "hate" on things you don't understand or haven't learned yet -is going to be a problematic standpoint
I completely agree. However, I do think I have a legitimate reason for 'hating' CSS, which is pointed out in this comment, TLDR; I find it difficult to notice subtle changes in documents, so I miss a lot of things.

I do try to be optimistic and try my best on most things, it's just that I try to focus on what I'm good at and as a result, I ended up (sort of) ignoring CSS - until I began full-stacking.
Yet I agree that I should take some more time to learn it since I do believe prioritizing on the project's needs should be put before what I find efficient to study.

Seanmclem • Dec 17 '19 • Edited

My suggestion would still be to instead focus even more on css, and anything else that makes you anxious or scared. I was in the same position about a year and a half ago. I could not figure out css and I "hated" it and avoided it. I kept trying and it started to click. Now I'm pretty good at it. Have you tried SCSS? Its nesting feels just like the DOM. If you can figure out the Dom you can get css. You have problems with subtle style changes? Then start with broad ones and refine over time. Everything in programming starts from a similar position. If you can learn anything - you can learn css. Or you can't learn anything. Can you?

joon • Dec 17 '19

If you can learn anything - you can learn css. Or you can't learn anything. Can you?
I completely agree with this statement and I do believe that learning CSS was not the issue, but my approach to life which is to study things that I can learn efficiently/effectively(High output compared to input). CSS was a field that directly contradicted with this/my mindset.

But I will definitely try out SCSS and tailwind(as others have suggested) and try to structure my project in the most optimal sense possible.

You have problems with subtle style changes? Then start with broad ones and refine over time.
Also an approach I hadn't really considered.

Thank you for the suggestion Sean :)

Seanmclem • Dec 17 '19

Trying a css framework before you understand css might make things more difficult. Maybe not. Everybody is different. SCSS isn't a framework, just a slightly improved way of writing it.

Orlando Brown • Dec 16 '19 • Edited

You guys are too nice, it's like your all scared to call a spade a spade. When something is shit simply say it's shit. Then proceed to explain how it can be improved.

So first and foremost, it's shit and your not a front-end developer.

If this is something your passionate about, then take the time to embrace and love the nuance of it all.

However because of how your brain works regarding space, instead of trying to visualise it in your head, sketch it out on paper first, note the width, height, padding and margins (good time to study the Box Model as it will help you understand how padding and margins will effect your space)

And take it slowly from there. Infact also look at how other sites handle CSS, preferably standard stuff then slowly build up to using SCSS, then this will enable you to appreciate CSS in JS and how it can be a blessing and a curse if not done with some planning before hand.

Now if your natural abilities are in back end development, then there is nothing wrong in sticking with that field, there is so much in that arena that is amazing to learn.

Just don't be shit at it. Be amazing!

Tan Ahmed • Dec 16 '19

I have to agree here. You're not a front-end developer.
You're a javascript developer.
Front-end includes the entire front-end, call yourself a JS or backend, or fullstack developer it's more appropriate, and quite insulting to real front-end guys.

joon • Dec 17 '19

I have to agree here. You're not a front-end developer. You're a javascript developer.
Yes, especially the javascript dev part. I completely agree. I prefer logic and if I was to define myself I would also define myself as a js dev than a front-end dev.

and quite insulting to real front-end guys.
I apologize if calling myself front-end offended you in any way whatsoever - I had not considered that it could be felt like an insult. I do try to cope with CSS, but I'm afraid that it's just so much more difficult than any other form of web development(I prefer constructing a whole NoSQL database over writing CSS for a single page)

Again, I apologize if the post was insulting. But I am trying to become one of you guys :)
Hopefully, my next post will not feel as much of an insult as this one.

Thank you for your feedback Ahmed!

joon • Dec 16 '19

So first and foremost, it's shit and your not a front-end developer.
I genuinely chuckled when I read this because I couldn't agree more(in some sense) :)

sketch it out on paper first, note the width, height, padding and margins
I greatly appreciate this feedback, I know I'm going to have a hard time doing it, but I will definitely try. Thanks a lot!

Just don't be shit at it. Be amazing!
I couldn't agree more. I really don't want to be 'shit' :)

It sounded harsh at first, but your feedback was definitely on-the-point and direct. I like that in feedbacks. Thank you genuinely for helping me on my road to 'not being shit' :)

Kayla • Dec 16 '19

How long have you been 'front ending'? CSS is your biggest friend is you want scalable, semantic code. This example actually made me think the inverse of what you were trying to argue, but thank you for helping me out it into words - this code might be great for a single freelance developer in limited cases, but so semantically messy and bloated that any team member would just label this as spaghetti and wouldn't even bother refactoring it.

I would suggest investing in reading up on pug / scss (mixins + variables in your build) with your react (or vanilla, or vue, or whatever.js) - have it output your SCSS or LESS into CSS for you (use prettier at runtime if you need to, with most compilers), then you can dig in later.

Also worth checking out: BEM, prettier, and other CSS naming / cleaning tools.

joon • Dec 16 '19

Thank you for the feedback Kayla!

so semantically messy and bloated
I couldn't agree more :)

SCSS or LESS into CSS for you
I never considered using SCSS and LESS because although I heard that they are great, it just felt like more CSS. But I kind of get the impression that styled-components do pretty much the same thing, is there any particular reason why you recomment SCSS or LESS?

BEM, prettier, and other CSS naming / cleaning tools.
Never heard of BEM before, will definitely try it out if it helps writing CSS.
Thanks a lot!

Olivier Rousseau • Dec 15 '19 • Edited

I have a different opinion:
Knowing that element tags are elements and className attributes are css class names, I find it much easier to create a cognitive separation and less of hassle to know which is what.

I'm sure that styled components wrappers can be good in some different examples (like if you know by the tip of your head every bootstrap components) but I think this is more about people who like XML versus people who like HTML structure (there is a nuance)

joon • Dec 15 '19

Thank you for pitching in with an opinion Olivier!

Knowing that element tags are elements and className attributes are css class names, I find it much easier to create a cognitive separation and less of hassle to know which is what.
Personally, I respectfully disagree. I do understand the reasons for this opinion and I also half-expect this to be the norm - it's just I think I'm wired differently in some sense. I tried using class names and separate style sheets but found it much more difficult to work with. But I do realize that my structure is flawed in so many different ways(as people have kindly pointed out in the comments), I am going to fix this for the better and try a different approach.

this is more about people who like XML versus people who like HTML structure
I hadn't thought about it this way. Thank you for widening my perspective on the matter! :)

Jorge Cifuentes • Dec 15 '19

Honestly - the first one looks counterintuitive and hard to manage

joon • Dec 15 '19

Thank you for the feedback!

I completely agree now :)

joon • Dec 15 '19 • Edited

Thank you immensely for the recommendation(csszengarden)

I expect my hate for css to be too powerful for me to survive more than an hour looking through the site, yet I do believe that the experience will help in more ways than one.

I will attempt to get the most out of it :)
(As soon as I get off my 9to6)

Ivan Pozderac • Dec 15 '19

I have vast and long CSS experience and I do not hate it but still I prefer styled components much more than other CSS solutions.

I also tend to separate component styling in separate file and just import it in the file where it is used.

I had chance to see components with styles defined in the same file and it looked like unreadable mess in cases where there were too many components with big list of declarations.

Also big plus for me is altering component styling on the fly depending on passed properties, no more toggling classes or using cx and defining cases!

joon • Dec 15 '19

Thank you for the constructive feedback Ivan!

I also tend to separate component styling in separate file and just import it in the file where it is used.
This is something that I attempted to do at first, but ended up sort-of ignoring(probably because of laziness, which is something I believe one should never do since it all returns as technical debt).

I had chance to see components with styles defined in the same file and it looked like unreadable mess in cases where there were too many components with big list of declarations.
I completely agree with this. I had begun to feel this while coding, but I think I ignored it for some reason.

Also big plus for me is altering component styling on the fly depending on passed properties, no more toggling classes or using cx and defining cases!
Also something I completely agree with. I began using this 12 hours ago before I went to bed :)

I wish I could give more likes. I vastly appreciate your feedback.

Mikko Rantalainen • Dec 17 '19

In my experience, Zeplin is pretty poor as far as it comes to CSS. Modern UIs should be designed relative to font size the user has selected for his or her browser and as a result, your front end should be sized using raw em and rem everywhere. Zeplin doesn't support that as far as I know.

Try to create semantic markup first and use CSS (and maybe JS) to tweak the UI if really needed. Once you understand CSS well (and hopefully don't need to support MSIE or older Safari releases) it seems pretty clear that the V in MVC is CSS in web development.

Yeah, CSS is pretty huge spec. And the compability between older browsers hasn't been that good. But in the end, CSS is the best we have for any environment.

joon • Dec 17 '19

Modern UIs should be designed relative to font size the user has selected for his or her browser
Definitely, something that I had not accounted for when I began CSSing. Thank you for the advice.

Zeplin doesn't support that as far as I know.
Very true, I've just been using the font-size in pixels generated via Zeplin.

it seems pretty clear that the V in MVC is CSS in web development
Very insightful. I put some thought to the notion and I agree completely.

But in the end, CSS is the best we have for any environment
Sad but true... a great big nemesis that I have been forced to conquer :)

I immensely appreciate your feedback Mikko. It widened my perspective related to CSS and also supplied real-life applicable project design advice. Thank you very much! :)

View full discussion (80 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more

DEV Community

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

Why styled-components?

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

Top comments (76)

Read next

Getting started with TiniJS framework

Capturing the essence of Mumbai, one Vada Pav at a time.

Day 5 of #100DaysOFCode

BlurryImageLoader: A JavaScript Library for Blurry Image Loading Effects ✨