Nowdays with the high popularity of React library, many third party libraries have become helpful and common to use. Granted there's so many of them us as devs have the task to filter and pick our best fit to needs.
My 'All Times Favorite' prize goes to Styled-Components. Why?
styled-compoennts allows to write clean CSS in a seperate file while passing props as usual. Therefore the component main file is clean and easier to read.
There's other benefits to it as well:
-
No classnames - so you're not scared to change a rule in CSS
-
No classnames duplicates - since there are no classnames
-
SC injects CSS only to the rendered comp - so less code is loaded
-
Has support for themes - which is awesome
-
Able to use in conjuction with other UI libs such as MUI, Ant etc
-
Easy and intuitive - unlike Tailwind IMO
What does the code actually look like ?
Component
Styled CSS
So, after creating the styled components in the seperate file we can easily import and use them as regular React components.
The focal point of this is to write a components for a single goal and keep it as simple as possible. Moving CSS in a seperate file is a huge burden of my shoulders.
I could go for a regular .css file, but that way wouldn't be able to pass down props or use advanced techniques such as themes.
So there you have it. How I write React components. Thank you for your time.
Share this article with your fellow comrades if you find it helpful.