DEV Community 👩‍💻👨‍💻

joon
joon

Posted on

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

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

styled-component ex
This is a page I'm working on(yes some naming conventions have not been kept but I'll fix that in the future)

The next screenshot is one without styled-components(and also a project that was terrible in terms of DX(Developer eXperience))
NopeNopeNope

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 (79)

Collapse
weeb profile image
Patrik Kiss • Edited on

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

Collapse
fly profile image
joon Author

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.

Collapse
shashwatblack profile image
Shashwat Mehta • Edited on

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.

Thread Thread
fly profile image
joon Author • Edited on

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!

Collapse
maddes profile image
Daniel Scholtus • Edited on

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

Collapse
fly profile image
joon Author

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!

Collapse
httpjunkie profile image
Eric Bishard

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

Collapse
mayacode profile image
Maja Miarecki

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.

Collapse
fly profile image
joon Author • Edited on

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.

Collapse
fly profile image
joon Author • Edited on

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! :)

Collapse
codermikky profile image
Sai Deep Konduri

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

Collapse
hscheuerle profile image
Harry Scheuerle

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.

Collapse
fly profile image
joon Author • Edited on

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 :)

Thread Thread
codenutt profile image
Jared

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!

Thread Thread
fly profile image
joon Author

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.

Thread Thread
codenutt profile image
Jared

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 👍🏼

Collapse
fly profile image
joon Author

Thank you for the feedback Sai!

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

Collapse
bikasvaibhav profile image
Bikas Vaibhav

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.

Collapse
codenutt profile image
Jared

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

Collapse
fly profile image
joon Author

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

Thread Thread
codenutt profile image
Jared

No worries. We all have 👍🏼

Collapse
fly profile image
joon Author

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!

Collapse
mxoliver profile image
Oliver

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

Collapse
fly profile image
joon Author • Edited on

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.

Collapse
zeachco profile image
Olivier Rousseau

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 is 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)

Collapse
fly profile image
joon Author

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! :)

Collapse
kbrackson profile image
Kayla

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.

Collapse
fly profile image
joon Author

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!

Collapse
okbrown profile image
Orlando Brown • Edited on

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!

Collapse
tanahmed profile image
Tan Ahmed

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.

Collapse
fly profile image
joon Author

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!

Collapse
fly profile image
joon Author

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' :)

Collapse
louislow profile image
Louis Low

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.

Collapse
fly profile image
joon Author

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!

Collapse
louislow profile image
Louis Low • Edited on

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.

Collapse
seanmclem profile image
Seanmclem

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

Collapse
fly profile image
joon Author

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.

Collapse
seanmclem profile image
Seanmclem • Edited on

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?

Thread Thread
fly profile image
joon Author

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 :)

Thread Thread
seanmclem profile image
Seanmclem

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.

Collapse
jorgecf profile image
Jorge Cifuentes

Honestly - the first one looks counterintuitive and hard to manage

Collapse
fly profile image
joon Author

Thank you for the feedback!

I completely agree now :)

fly profile image
joon Author • Edited on

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)

Collapse
pozda profile image
Ivan Pozderac

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!

Collapse
fly profile image
joon Author

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.

Collapse
mtrantalainen profile image
Mikko Rantalainen

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.

Collapse
fly profile image
joon Author

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! :)

Collapse
frontendtony profile image
Anthony Oyathelemhi

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.

Collapse
fly profile image
joon Author • Edited on

you want to see the structure (and styling) of the page once you look at the file
Wow, 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 css
I 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 SC
OK, 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.

Collapse
frontendtony profile image
Anthony Oyathelemhi

You're welcome Joon. Glad I could help

Collapse
bamboriz profile image
Boris B.

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?

Collapse
fly profile image
joon Author • Edited on

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 :)

Collapse
fly profile image
joon Author • Edited on

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. :)

Collapse
fly profile image
joon Author

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 :)

Collapse
scottkidder profile image
Scott Kidder • Edited on

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.

Collapse
ssaric profile image
Sanjin Šarić • Edited on

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!

Collapse
fly profile image
joon Author

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! :)

Collapse
harsh_singh profile image
Harsh

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.

Collapse
fly profile image
joon Author

Thank you for the feed back syook!

cos they add random names to element as classname
Yes, 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.

Collapse
kheaganeckley profile image
kheaganeckley • Edited on

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.

Collapse
fly profile image
joon Author

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 :)

Collapse
fly profile image
joon Author

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.

Collapse
sevgit profile image
Sebastián Ventura

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!

Collapse
fly profile image
joon Author

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!

Collapse
kmwill23 profile image
Kevin

Hey, please take the time to learn to love CSS instead of finding ways to avoid it.

Collapse
fly profile image
joon Author

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.

Collapse
snookems profile image
Snookems

I prefer the second one too.

Collapse
fly profile image
joon Author

Thank you for the feedback Snookems!

Now that I see the fault in my first styled-component attempt, I prefer it too :)

Collapse
eemebarbe profile image
Jeremy Barbe 🧢

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.

Collapse
fly profile image
joon Author

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.

Collapse
okkdev profile image
Jen Stehlik

Oh boy, I don't like the look of this. You should try Tailwind CSS.

Collapse
fly profile image
joon Author

Thank you for the feedback Jen!

You should try Tailwind CSS.
Will definitely do so, I saw a few comments recommending Tailwind as well

Collapse
farazi482 profile image
Info Comment hidden by post author - thread only accessible via permalink
Hafiz Faraz Mukhtar

BTW I am CSS champion, hire me here lol:

upwork.com/fl/hfarazm
fiverr.com/wordpressseodev

Some comments have been hidden by the post's author - find out more

🔠 Find your favorite font

 
You can change your default font in Settings.