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