I decided to bring the articles from my blog here to dev.to and following the order, the first article I wrote was about styled-components, so here...
For further actions, you may consider blocking this person and/or reporting abuse
I don't see why people like Styled Components that much. For me the syntax is confusing, it feels repetitive to write CSS when I'm defining the component and I honestly see no advantage over using Tailwind, for example.
This might be due to my background on JS/frontend development being quite small compared to my PHP/backend development experience, but so far, I rather stick with Tailwind, feels more natural to me.
What I find most confusing is the whole backtick thingy to write CSS. How can this weird syntax be clearer than using class names? Doesn't it lead to repeated CSS definitions being spread over components?
Styled-components was built with javascript in mind by using the ES6 feature template literals (the backtick thingy) which is becoming more commonly used among front-end devs. I personally enjoy styled-components because template literals allow more dynamic usecases based on props but the biggest benefit for me is readability and organization. My gripe with tail-wind is that a bunch of classNames quickly makes a component harder to read whereas styled-components doesn't and allows you re-name simple html elements like '
' to '' so a component actually becomes more readable. Co-locating styled components with the React component makes it easier to locate styles too.
and yes, there can be instances of repeated CSS definitions but that's mostly dependent on how you architect your styled-components as they are both composable and extensible.
I really agree with your reply! In the beginning I also committed a lot of repetitions with styled-components, but over time I organized better and reduced it.
Thank you for the words!
Can't believe I'm just now seeing this! I would love to know how your organization has changed. Everyone's approach is so interesting.
I use tailwind along with styled components or emotion by using twin.macro package and with that I can write tailwind classes in the backticks
Hey Praveen that's super intersting but I'm weary of potential performance cost. Have you found this to be the case? If not what are some other potential downsides?
After comparing a lot of different styling libraries I ended up choosing styled-components for my website too, for the same reasons that you mention in your post.
Ironically, the one issue I had with it was it would sometimes mess up the generated class names in the production build. 🙃
Wow! I never went through this! Did you only use styled-components or something else along with?
No other styling libraries, but I did use it with some other tools that might also do some weird stuff for production builds.
It’s been several months since I ran into the issue, so I assume they’ve fixed it by now. 😄
This is very likely! :P
Especially with typescript you can create fast, reliable applications. But I think Sass and other approaches still have a place in web development.
But I would definitely use styled-components if I want to do it fast and easy.
Thanks for the article
That's it! there is room for all, but if you wanna go fast and easy.. \o
You are welcome! :)
It is better to separate css into a file instead of mixing with JSX.
In my opinion this whole css/sass/bem/modules/styled-components discussion is a matter of preference and requirements.
Depending on the project and developer in charge the necessity of using one approach over another may differ.
Agree with all you mention, this is best approach to style. The very thought of someone still using something else terrifies me.
This is great! I'm more convinced now to learn Styled Components.
That is nice! I'm sure you won't regret it!
but aren't styled components are like running autoprefixer and postcss in browser
For me i prefer to use CSS modules over styled component it put me in the groove of writing CSS the old way