Hey everyone! It's that time again to look at some cool CSS in JS with react. As this series has started rolling I've been trying to think a good w...
For further actions, you may consider blocking this person and/or reporting abuse
This may be a noob question (because I’m a React noob 😅) but why are styled components preferred over importing a CSS style sheet? I feel like that would keep our component files cleaner by not having so much extra code for the styles.
Hey Dylan,
Ultimately I think it comes down to what the application needs from how big it may be, how many developers are contributing, etc. However, if it's less or cleaner code we're worried about there are a number of things to consider down the road with CSS vs Styled Components.
If you're just importing one CSS stylesheet, then off the bat in our JS we technically have less code for our styling because all we have is our
import './style.css'line and the rest areclassName="some-class". Although, there may come a time where we might need to modify styles based on state or props in our react component which can lead us down to potentially adding logic to our components to adjust for this. In larger projects can lead to some messy components.I think what might be a better way to think about styled-components over CSS is that it aims to align itself better with Reacts component-based architecture with scoping styles but also giving you an API that is intended to work well with Reacts component API and patterns, ideally, resulting in a cleaner codebase for your components and your styling.
My first entry in the series may be more helpful for a "Why not use CSS?" question, as I go more into CSS vs CSS in JS for React!
Let's Take a Look at CSS in JS with React in 2019 - CSS & Inline Styling
Phil Tietjen ・ Sep 9 '19 ・ 5 min read
I hope it answers your question and thanks for asking it! :D
Yes that helps immensely! I’ve done one React project so far and it wasn’t huge so as you said depending on the project size I was able to safely use a stylesheet without issue. I can totally see how that can become a problem as projects become more complex though.
For regular CSS: You get rid of global styles.
Say you write a component somewhere that uses the className 'container'. Then you can't use it in any other component style sheet without getting a conflict.
With CSS modules that is not a problem. The selling point against CSS modules is that you get more power. It lets you conditionally apply styles and build styles based on props.
Hey Phil, really good article! Loved the personal touch to it. Can I suggest the next package? 🙂 It's called
goobergithub.com/cristianbote/goober. Yeah I know, I'm biased 🎉But my intention is to offer a lightweight solution to a pattern that gives you so much freedom in terms of styling. The web it's large, and one should be careful whenever it builds something, to make sure that whatever you are sending down the wire is small and powerful.
That's goober in a nutshell. A css-in-jss solution in less than 1KB.
Really curious what your thoughts are.
Cheers!
Hey Cristian,
Thanks a lot! I'm glad you enjoyed the article, I try to give the majority of my posts some personal touches.
I will definitely be checking out goober and consider it for the next post! :D
Brilliant job on the 339 github stars and after checking out the docs it looks awesome! (1KB + styled API sounds incredible).
Honestly, this is one of the things I was really hoping for doing this series was to find other solutions that may be newer, less popular, or hidden under the popular go-to solutions.
Thanks for the comment and the recommendation!
The only thing I don't like about styled-components is the huge nested issue when it comes to debugging. With regular CSS/SASS it's easier to pinpoint which class belongs to what component via styles.scss.
Hey Marlon,
I think with the right structure for either approach can minimize debugging issues. I think where styled-components gets an edge is that because it's scoped, Ideally, you would only need to be concerned with it residing in the component's directory.
I typically create a style.js file where I define and export all my styles for my component to import
/ Component
--/ index.js
--/ Component.js
--/ style.js
I hope you enjoyed the read!
Fantastic Read Phil! I love Styled-Components and this article definitely builds on that. This is a great run through for anyone that is interested in Styled-Components and I will be sending this to anyone who asks about it before they dig into the docs.
Hey CodyBrewer,
Thanks a lot! Really glad you enjoyed the read! :D
I also love Styled Components and had a great time writing about the things I like to use in their API.