I must say, styled components are kind of a newbie trap.
They sound cool, they look cool when you are writing your first code with them, so, you think, why not use them?
In these moments you don't think (unless you already have experience) about whether they are performant, easily maintainable or any of that other boring stuff.
And, by my experience, they aren't any of those:
they introduce an performance tax, and if your project ever grows to a point where performance starts to matter, there's not much to be done about it.
they are not compatible with Typescript, which is a huge deal breaker IMO
they are not lintable and not really checkable at compile-time at all. So support checking, autoprefixing and all other postcss features are automatically out of question
And frankly, the library (and the concept itself) are kinda old, so there were additions to css that do same kinds of things easier.
If you just need to represent component states - write a few classes. BEM or css-modules - frankly, does not really matter.
It's more clean - you separate different states into different classes, instead of opting for what is basically if expressions in one huge amorphous style.
If you really need to style something according to props, and there are more than, say, 3 states - use CSS-variables (if your supported browsers allow you to). It's simple, native and performant.
I must say, styled components are kind of a newbie trap.
Very correct! Not long ago, I would install it when creating a new React project. Over time, I depended on it less and less, till the point where I no longer used it for anything. I think this coincided with when I started using Typescript/Tailwind
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 must say, styled components are kind of a newbie trap.
They sound cool, they look cool when you are writing your first code with them, so, you think, why not use them?
In these moments you don't think (unless you already have experience) about whether they are performant, easily maintainable or any of that other boring stuff.
And, by my experience, they aren't any of those:
And frankly, the library (and the concept itself) are kinda old, so there were additions to css that do same kinds of things easier.
If you just need to represent component states - write a few classes. BEM or css-modules - frankly, does not really matter.
It's more clean - you separate different states into different classes, instead of opting for what is basically if expressions in one huge amorphous style.
If you really need to style something according to props, and there are more than, say, 3 states - use CSS-variables (if your supported browsers allow you to). It's simple, native and performant.
Thank you for the insights 🙌
Very correct! Not long ago, I would install it when creating a new React project. Over time, I depended on it less and less, till the point where I no longer used it for anything. I think this coincided with when I started using Typescript/Tailwind