Advantages of using styled components

Styled components is a popular css management solution used in many React web applications.

Here are some thoughts on why it is so great in my opinion:

Photo by Sarah Brown on Unsplash

1. Automatic critical css. Styled components keep track of what you render on your web page, inject it and does not include unused css. With combination of code splitting with webpack or any other bundler user won’t load any css that is not required.
2. No unique class names. Every class name is generated to be automatically unique.
3. Easy removal of unused or redundant css. As css is tied directly to the component you can easily see what css is used and what is not.
4. Dynamic styling. You can use variables or theming to easily achieve this goal.
5. Automatic vendor prefixing. You don’t need to worry about vendor specific rules. Styled components takes care of that for you.