(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...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
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.
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.
Modern UIs should be designed relative to font size the user has selected for his or her browserDefinitely, 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 developmentVery insightful. I put some thought to the notion and I agree completely.
But in the end, CSS is the best we have for any environmentSad 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! :)
Whew! Where do I begin!?
I've read a lot of comments on this, both positive and negative. The problem here is NOT your inability to write CSS (you still write CSS with Styled Components), it's that you want to see the structure (and styling) of the page once you look at the file.
But like everyone has pointed out, you're going about this in a wrong way. I'll like to suggest a much better way to deal with your CSS hate, Utility-first CSS. Checkout tailwind css
The benefit of this is that, you immediately get a sense of the style of your page without opening the CSS file. You can use this with SC (I'm doing exactly this right now).
It'll take you just a few hours to get used to this I promise.
you want to see the structure (and styling) of the page once you look at the fileWow, I never realized it myself, but I think that this was the (real) reason why I structured my styled-components so un-semantically. Nice catch!
Checkout tailwind cssI have seen several posts regarding tailwind CSS but never imagined I'd be needing it.... alas maybe the time is ripe...
you immediately get a sense of the style of your page without opening the CSS file. You can use this with SCOK, if it does exactly what you say here, I'm instantly hooked. I will definitely try it out. Thanks so much for the recommendation.
Wow, I did not expect another novel, constructive and directly-helpful comment that didn't just widen my perspective regarding the matter - but actual advice that I'm considering using.
Thank you beyond words, I greatly appreciate the recommendation.
You're welcome Joon. Glad I could help
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! :)
Honestly - the first one looks counterintuitive and hard to manage
Thank you for the feedback!
I completely agree now :)
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)
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.
The exact same spot in which I find myself. Backend Dev at heart being put into a Full Stack role. We'll find our way though, I just believe in putting in the work.
By the way, hearing alot about Tailwind recently. Is there a React implementation and is it better than Material-ui?
I saw your discussion post on Dev regarding Tailwind Techonda :)
I'm glad that this post is helping a fellow developer consider other tech stacks.
The exact same spot in which I find myself. Backend Dev at heart being put into a Full Stack role.Thank you for pointing this out. It is a great relief that people like me are (probably) not the majority, yet exist out there :)
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. :)
There are allot of new css-in-js libraries each with there own syntacts, that for instance make certain things, like animations, structuring react apos and theming (especially for light-dark mode) easier.Without knowing css really well you won't be able to pick up the new better ones. Great css-in-js souloutions that I at least know: emotionjs, theme-ui (from the creators of gatsbyjs - my fav), glamorous, and of course styled components.
Thank you for the feedback kheaganeckley!
emotionjs, theme-ui (from the creators of gatsbyjs - my fav), glamorous, and of course styled components.I will definitely look into these and consider whether they can be a better substitute for styled-components. Kudos for chipping in :)
Thank you for the feedback Dan!
you are bringing back html/css mess that we have left behind.I completely agree with you. This is a mess :)
MainDiv2Wrapper is not a component. Article or Comment or Badge etc are components.Actually I think my concept of naming conventions of component was not up to par. The examples you gave me are of great help and I believe I will be using similar naming conventions when I fix the code.
Thank you for taking the time to point this out. I greatly appreciate it :)
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.I feel your pain. I agree with most of the feedback below but I can't believe no one has recommended you take a look at TailwindCSS yet. It has helped me immensely as I've transitioned from backend to frontend. It is a somewhat different approach to CSS but it's a really nice experience once you dive in. It lends well to rapid prototyping but has the flexibility to mesh with any type of design system or style guide.
I see what your problem is. Its not the CSS. I don't like either version. I suggest you read a topic of Atomic Design.
bradfrost.com/blog/post/atomic-web...
Brad Frost is my goto guy when it comes to CSS architectures.
If you start thinking in terms he is explaining, you can then start writing your components that way and it will be way more readable.
Also: semantics, MainDiv2 doesn't mean anything. Give your components readable names. It takes time to structure your components mentally but in the long run it pays off.
Happy coding!
Thank you for the feedback Sanjin!
I suggest you read a topic of Atomic Design.I have read a post about it and thought about using it as a design structure for the entirety of a React project. But it never occurred to me to use it just for the CSS.
semantics, MainDiv2 doesn't mean anything. Give your components readable names.I completely agree and have nothing to say on the matter but shame on me :) Will definitely fix this.
I greatly appreciate your comment, applying atomic design on CSS(styled components) was not a method I had considered before, but I think you might have struck gold - I am seriously considering studying atomic design and rewriting most of the project. Thank you dearly for your suggestion.
Happy coding to you too! :)
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.
I wanted to chime in just to say you're taking feedback like a champ! Glad to see people that are brave enough to share a snippet and then be open minded to what others have to say about it. Cheers!
Greatly appreciated :)
I really want to show how my css has changed through the help of the community, but totally swamped at work atm.
Thanks for the chime in!
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.
I prefer the second one too.
Thank you for the feedback Snookems!
Now that I see the fault in my first styled-component attempt, I prefer it too :)
This fails to include the hordes of styled components that you have to include in your component's file that radically lower readability, especially with hooks.
Thank you for the feedback Jeremy :)
that radically lower readability, especially with hooks.I had noticed that my styles were beginning to get out of hand, yet I think I chose to ignore the fact.
Good catch! It is definitely something I should not have ignored.
Oh boy, I don't like the look of this. You should try Tailwind CSS.
Thank you for the feedback Jen!
You should try Tailwind CSS.Will definitely do so, I saw a few comments recommending Tailwind as well
Well, the styled-components make the component tree complex.
BTW I am CSS champion, hire me here lol:
upwork.com/fl/hfarazm
fiverr.com/wordpressseodev
But I like CSS! 😆