Yes, I have always been like you, I've been styling my html elements in my React apps using classNames, because, that was the only available way in...
For further actions, you may consider blocking this person and/or reporting abuse
After using styled-components for a while, you'll be begging to use classNames again. Here's just a few limitations:
That's just a few. Sending in a simple string to the className is so much simpler and so much more powerful.
Thanks for sharing your thoughts Joshkarges
I think you all should reduce the toxicity in this comment section, he is a fan of styled components and he prefers it to BEM, he made his suggestion not a statement, I personally out grew styled components but that doesn't mean someone shouldn't write about how they feel about it positively
Toxicity does not exist, we only give our opinions, the problem is to have the maturity to evaluate them and take a decision, if you do not have it I guess you career as developer won't be long
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.
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
Thank you for the insights 🙌
If you're using something that supports CSS modules like Next JS I recommend trying out SCSS modules.
I am not exactly sure what you mean when you say you've been styling using classNames. Have you just been providing a raw object to classNames or have you tried CSS modules?
SC is old now people. It's just CSS-in-JS.
cssinjs.org
It's cool, I love it in some projects but can cause problems in others with homebrew static publishing solutions that give FOUC using it.
Also homeboy and others, please stop using "Stop using/doing" in these post titles. It's annoying!!!
Some would argue class names is back in a major way with Tailwind.
Alright noted. Thanks for sharing your thoughts on this.
I recommend adding syntax highlighting to your long code block.
Also I recommend being consistent with indenting the CSS styles and adding spaces at the start of your comments.
SC is awesome to me... normally so that my component doesn't get mixed up with big SC code I just put the style components in a separate file and then import them, it really makes it easier for me to use SC than other ways of doing the same. And a plus is that there are several ways to have a good performance (without sacrificing much functionality) for more complex scenarios.
Of course, if you are only going to style a very small and static app, pure css I think is the best
There's also:
Imprt {css} from 'styled-component'
Where you can assign to a variable a definite style.
If you style the same component in different ways you can do:
const example = styled(CustomButton)
background-color:blue;
Wow, thanks for sharing.
I will check that out also.
I think it's good to know the available styling options, I've used pure css, sass, styled-components and now I've decided to use css modules with sass and the classnames lib to facilitate conditional styles, and I'm really enjoying it, I believe there is no silver bullet, yes, there are tools that make the development much easier, finally, using one or the other depends a lot on the project and the dev's decision-making power.
I do not suggest styled components at all. The syntax is more complex and hinder the reuse of code. Moreover you're using javascript to style your components instead of using pure css or SASS
It's actually pure CSS but just covered with JavaScript to reference the elements to be styled.
For the syntax, I actually find it very easy to install and use quickly.
Concerning the reuse of code, I don't really get that part, if you don't mind may be you can explain.
Cos, I think it's very reusable, with the passing of props into the styles, just like I did in the example above, thereby reducing the number of CSS styles you write.
Also, styled-components optimizes your webpages by loading only the required number of styles you need per component
Hi David. I think Andrés means that with styled components you have all the styling code in the component, which is great to have that component as standalone, but means that you have to rewrite or copy the common styles that are more global or part of the theme when you are working on an app.
Also, the component file may end up being huge, with most of the content being style. Annoying to maintain.
Personally I'm trying a mix between Sass for common styles, and styled components for specific component styles. I won't recommend this yet because I'm still trying it out.
Oh! now I get it. I agree with you on this. Rewriting the styles can be timing consuming and huge components😖
Nice, I actually use my index.css file for common styling or copy the styles sometimes.
Yeah, after 6 years as fullstack dev I found SASS the best tool for frontend styling, taking into consideration syntax, size, performance and maintainability. In any way, it's a matter of preference, if you like styled components and works for you then go ahead
What about performance?
It's actually optimizes the loading of your webpages, by only loading the required css per page.
I didn't mean file sizes. I mean rendering time.
P.S. CSS modules also work with code splitting.
May either choose to do inline styling, import your CSS from an external style sheet, or even include it in your JavaScript file. Séparer Un Couple Avec Une Photo
Styled components really push the component driven ideology in react, ❤️ nice post
Thank you, glad you enjoyed it.
How is this approach differ from just using Vue?
How is this approach differ from just using Vue?
I use styled-components a lot in my dev projects. They are so handy for extending existing HTML tags 😊
Noob question, is it possible to use styled-components within Ant Design component library in react?