Styled-components: Friend or foe?

Versión en español

I recently started using Styled-Components for a project and I found it incredibly brilliant at times, and the strangest thing in the world at other times.

In this article I am going to weigh my experience using this React library to try to answer a question: is it worth using or do its disadvantages not outweigh the advantages?

Cons

• This library only works for React, if you want to change the framework you will have to rewrite your styles.
• Entry barrier: You have to learn to use it. It can be confusing at first and composing complex styles can raise doubts.
• It is more difficult to read: By not directly having the types of labels that are each element, it is more complicated to keep track of what you are using, so using semantic HTML becomes more laborious.
• Editors naturally do not have autocompletion for Syled-Components.
• Static CSS is much faster.
• CSS and SASS are easier to use.
• When we want to share styles for several tags, things get a little complicated. Although there are ways to do it, [among others] this one (https://stackoverflow.com/questions/49618997/idiomatic-way-to-share-styles-in-styled-components):
• Adding styles to library elements is not that simple.
• It is more difficult to see in the development tools what each component is and it is more tedious to debug.

Pros

• Although it does not have autocompletion naturally, you can install an extension so that you do have it, at least for visual studio code.
• To improve the readability of the code, you can indicate that said tag is a style by adding "styled" or "styles" to the end of the name, and you can also use descriptive names. For example, to add styles to an input, you can call it InputStyled, or for a div that acts as a container, WrapperStyled.
• Media queries work exactly the same as in normal CSS. However, I recommend this article with good practices.
• Fix CSS specificity issues. Also, class names do not conflict, Styled-Components create unique class names.
• Styled-Components make it easy to use color themes.
• It is VERY easy to create dynamic styles and create reusable components.
• You can use SASS syntax without having to have SASS installed.

Conclusions
When I started using it I confess that it was difficult for me to understand what this was all about, and I still think that the syntax seems very strange to me. Also, I'm someone who places a lot of importance on creating semantic HTML, so sometimes it's very annoying to keep track of the tags you're using and make sure the structure makes sense.

However, I think if you have a platform that uses a lot of reusable components and may need to create conditional styles, this library is SUPER useful. On many occasions, it has happened to me that I have to modify styles depending on certain circumstances, and with Styled Components it is usually something super simple and intuitive once you have already learned how to use it.

To summarize, for short and not very complex projects, I think using it is a bit overkill. However, for more complex platforms and with reusable components, it can help you save a lot of complexity and time.