In my latest react project, I decided to take on styled-components for my app's appearance. Man was I in for a ride because I didn't foresee the tumultuous journey up ahead. I started with great ambition but that quickly turned to greif once I realized how much I didn't know my CSS. But I didn't let that deter me from completing the task at hand. In fact, I took this for an opportunity to strengthen my styling muscle and to gain more experience.
Besides looking up endless tutorials and numerous google searches, I come to the realization that playing around with the code was the best way to conquer this beast. One thing I noticed, that seemed awkward, was the way the styling was applied. With normal CSS ruling, you would attach your properties to a class (.), an id (#), or any query selector along with any specificity of your choosing. This is not the case with styled-components. Due to the fact that styled-components is a styling tool that is component based, as you write your CSS rules you're literally creating your components simultaneously through interpolation. Absolutely mind-blowing right?!...Yeah, I know. If I had to sum it all up, this would be the love child of Javascript and CSS lol.
While doing this particular project, which is a retail website mimic, I've learned that this tool caters to many of developer's concerns. Just to name a few:
- loading only required styles for the page
- using unique classes
- nesting
- auto prefixing and tons more.
As if this isn't enough to get your juices flowing, 100% creative control...are you down on bending knee yet?..cause here's your gal. I can admit that it can be a bit cumbersome to export and import each styled component you create but we all know that's the name of the react game. History in America has taught us exporting and importing drives the economy and developers drive (create) webpages. Just to reiterate this library has the functionality of both Javascript and CSS. So, passing styles through variables and props is a very capable, and to my recent discovery; encouraged thing. Such as applying a global style; which is another instrument in this toolbox. The other libraries and styling tool kits will have you cram so many classes in your components till your code is resembling freshman orientation.."What classes am I in?" If that's not the case then you're probably packing those inline-styles in your document's tags and head. Now you're wondering why your code reminds you of Lil Wayne and most recent day rappers with ridiculous face tats', Yikes! Ask yourself "Have I been able to do that with my prior projects?" and I think I could guess your answer. Honestly, there is a learning curve just starting out with this software; especially when you come into advanced features like using the clamp method for sizing items on the page based off of the size of the screen using view width length unit. Whew, that was a mouthful...of...tasty styled-components. But I say all of this to say, styled-components is the way..."So use the force Luke".
courtesy of Moni Quayle from Pixabay for photography
Top comments (0)