(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.
Oldest comments (76)
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!
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!
Honestly - the first one looks counterintuitive and hard to manage
Thank you for the feedback!
I completely agree now :)
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)
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 structureI hadn't thought about it this way. Thank you for widening my perspective on the matter! :)
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!
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!
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
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! :)
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.
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!
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.
Thank you for the feedback!
I honestly find it difficult to understand some concepts you used like 'undead hybrid' or the second paragraph - but I expect this to be because I am so unfamiliar with CSS in the first place.
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)
BTW I am CSS champion, hire me here lol:
upwork.com/fl/hfarazm
fiverr.com/wordpressseodev
Wow this is a very humbling experience - I will pin this and view this post again before I post anything now, and rethink before attempting to spread an idea.
I wish to thank every single member who gave any form of feedback, especially the comments that were specific enough for me to understand :)
I will try my best to take account of every bit of information and apply it to my project - and hopefully post a follow-up post as soon as I get some spare time.
And also I wish to apologize to any member who was offended by the sheer wrongness of this post. In hindsight, I believe the level of inaccuracy of the contents definitely had the elements to aggravate people since I used the expression
fight me in the comments. Just to clarify it was never meant in a literal sense, but in a friendly manner(I copied the expression from here - one of my most favourite React talks of all time)I truly learned so much from everyone's feedback. My love for this community quadrupled. :)
Hey, please take the time to learn to love CSS instead of finding ways to avoid it.
Thanks for the feedback Kevin :)
I agree that is the most simple solution to the dilemma I am facing. Sadly CSS really doesn't stick to me(trust me I've tried) and as a result, I'm attempting new methods.
well styled components are pretty good even i like them and i like css but i dont know much just basics of css as i am a react developer . As far as i know debugging the css and styles that are created with styled components is very difficult go to chrome and inspect a element u'll know what i mean cos they add random names to element as classname n all which is very hard to fix . otherwise styled components are good , styled components also makes ur app little slow cos it spends more time in scripting n all.
Thank you for the feed back syook!
cos they add random names to element as classnameYes, this is an issue that I also noticed while developing, but I am still steadfast when it comes to efficiency.
It is definitely a downside, but the pros out-weigh the cons in my opinion :)
styled components also makes ur app little slow cos it spends more time in scripting n all.I find difficulty in agreeing with this matter, please could you be a bit more specific on what aspect makes the app slow? I love making efficient apps and you got my attention on
little slow.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