Hiya! I'm a fullstack developer, with experience with PHP, JavaScript and Go. I'm also an Android enthusiast and I like pretty much everything related to tech.
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?
Exactly my opinion as well. Instead of writing display: flex in every styled component, why not write the Tailwind class flex and use plain css classes?! Utility css classes are amazing.
I'm not sure I understand. I wanted to point out the power of CSS classes that do one thing and only one thing. For instance, the text-center class that aligns your text to the center.
It's so powerful because you don't need anything else, no JS, no styled components, just boring CSS. Bonus: almost anyone that reads that class will assume that it just aligns the text to the center.
Tailwind and styled component have the same issues, as any other solution. With Tailwind the same developer that repeat display:flex everywhere will repeat the flex class everywhere.
A technology-education specialist and software developer with extensive experience leading both teams and projects and over a decade of teaching students and training staff.
You cans till use classes when using styled components.
You can create more layers of abstraction. For example create a FlexBox styled component which is a div that comes built in with flex. It can also receive props that will tell it how to align and justify (for example).
Then, when creating a new div you can actually create it from styled(FlexBox)
A technology-education specialist and software developer with extensive experience leading both teams and projects and over a decade of teaching students and training staff.
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.
Hmm strange, I don't lose any of those except for linting (which imo seems somewhat negligible with component driven development where all styles are localized to individual components and a well structured/maintained theme). The only time I lose the other features is when I'm missing backticks or semi-colons.
image on the left is what i see usually when someone mentions styled components, wall of one colored text. On the right is what i'm used and expect when working with styles, auto-complete, syntax error highlights, etc.
edit: image upload failed, fallback image example of what i mean imgur.com/a/skNhRw0
Ah I see now. Thanks for sharing...I'm not sure what editor you use but VS code does have an extension that addresses this. I can understand how the lack of these features makes SC less desirable.
Also I'm glad you brought up linting because I looked at the docs again and you can add a stylelint
Thanks, good to know that there are extensions that fix all my gripes. I've not tried styled components so I've only seen them in posts like these which show them as a block of yellow text. Not sure why most introductory posts showcase them like that.
Typically the kind of answer you hear from backend devs (no offense, really, just exposing a difference of mindset).
Of course you can do a lot with Tailwind. But you still stay inside the limits of a framework. I've heard designers saying things like "I want to do that, but it'll be tricky to do with Tailwind, so I won't". And that's sad. You can tweak Tailwind. But if you have to do dozens of tweaks and fight with the classes, in the end, just write CSS, it'll be faster and you HTML will be way cleaner.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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?
Exactly my opinion as well. Instead of writing
display: flexin every styled component, why not write the Tailwind classflexand use plain css classes?! Utility css classes are amazing.Tailwind is just styled components implemented with CSS classes instead of JS.
Back in the day we didn't have Tailwind and emulated that behavior with JS, now I'd say this workaround isn't needed anymore.
I'm not sure I understand. I wanted to point out the power of CSS classes that do one thing and only one thing. For instance, the
text-centerclass that aligns your text to the center.It's so powerful because you don't need anything else, no JS, no styled components, just boring CSS. Bonus: almost anyone that reads that class will assume that it just aligns the text to the center.
Tailwind and styled component have the same issues, as any other solution. With Tailwind the same developer that repeat
display:flexeverywhere will repeat theflexclass everywhere.You cans till use classes when using styled components.
You can create more layers of abstraction. For example create a FlexBox styled component which is a div that comes built in with flex. It can also receive props that will tell it how to align and justify (for example).
Then, when creating a new div you can actually create it from styled(FlexBox)
Also, creating consistence design you can have a Text component that receives a boolean prop named "center".
So if you see you know it is aligned to the center.
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.
My biggest gripe with these components is:
you lose intelesense, linting, autocomplete, colour preview, drop-shadow UIs.
All colour segregation which improves readability (css key value parts, layered values).
Hmm strange, I don't lose any of those except for linting (which imo seems somewhat negligible with component driven development where all styles are localized to individual components and a well structured/maintained theme). The only time I lose the other features is when I'm missing backticks or semi-colons.
image on the left is what i see usually when someone mentions styled components, wall of one colored text. On the right is what i'm used and expect when working with styles, auto-complete, syntax error highlights, etc.
edit: image upload failed, fallback image example of what i mean imgur.com/a/skNhRw0
Ah I see now. Thanks for sharing...I'm not sure what editor you use but VS code does have an extension that addresses this. I can understand how the lack of these features makes SC less desirable.
Also I'm glad you brought up linting because I looked at the docs again and you can add a stylelint
Thanks, good to know that there are extensions that fix all my gripes. I've not tried styled components so I've only seen them in posts like these which show them as a block of yellow text. Not sure why most introductory posts showcase them like that.
Typically the kind of answer you hear from backend devs (no offense, really, just exposing a difference of mindset).
Of course you can do a lot with Tailwind. But you still stay inside the limits of a framework. I've heard designers saying things like "I want to do that, but it'll be tricky to do with Tailwind, so I won't". And that's sad. You can tweak Tailwind. But if you have to do dozens of tweaks and fight with the classes, in the end, just write CSS, it'll be faster and you HTML will be way cleaner.