(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 (77)
To he honest, I prefer the second version in this case. It is much more appealing and readable for me.
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.
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.
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 structuresI 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!
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...
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!
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
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.
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.
Thank you for the feedback!
true frontend devs don't hate CSSI'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 elseI also agree with this as well. I see myself as a backend dev at heart. Nice catch! :)
Sorry, i pass on your readable code because it's not
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.
Thank you for the feedback Harry!
"Div", "Wrapper", "Main", even numbering themI 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 semanticThe statement does hurt, but completely understandable now that I understand my flaws. Thank you for pointing this out. I needed this :)
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!
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.
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 👍🏼
Thank you for the feedback Sai!
After reading the comments above. I agree with you completely!
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
If all you need is some padding or minimal styling use the inline style prop or cssI 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 unnecessaryAlso something I completely agree with.
Thank you very much for the constructive feedback. I will definitely attempt to apply these to the project ASAP.
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.
I wouldn't use this example as a good use case for styled components. SC are great.
Thank you for clarifying Jared :)
I also believe that SC is amazing yet I used it wrong in so many ways.
No worries. We all have 👍🏼
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!
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!
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.
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!
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 marginsI 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' :)
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.
Thank you for the feedback Kayla!
so semantically messy and bloatedI couldn't agree more :)
SCSS or LESS into CSS for youI 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!
I never write CSS for any UI development. I use
Vue.jsorKrugurt.jswith Yogurt.I can create beautiful web component in a just few minutes with API callbacks, for example:
And then mount the web component:
Absolutely zero CSS.
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!
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.
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
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 standpointI 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.
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?
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 :)
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.
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