45. Styled Components
CSS is a big part for Frontend development. There are many tools for us to use when creating the user interface. Styled component is a library that allows us to use CSS inside ES6 files. We could have the capabilities of CSS together with the power of ES6. It uses tagged template literals in ES6 so that JS variables and functions could be implemented in the CSS, for example, dynamic properties.
For the advantages and disadvantages of styled components, it provides us a unique class names and removes dead CSS automatically. Also, we could write css on the js file (within the same file with the components) and dynamic code is possible. However, there are also drawbacks. The unique class names may cause cache problems. Also, we will have to add another layer to the web app and may cause extra runtime. Also, it requires more js knowledge while implementing and mix css and js code all in the same file that violate the principle of separation of concern.
So, should we use styled components? If we have to repeat the css in many small components with slightly different changes or we need more flexibility to put into the components, then styled components may be a good choice for us to use. Overall, as long as it can fit in our project and doesn't add too much complexity with performance or bug-prone issues, we can make use of it to improve the web development.