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.
Top comments (2)
What do you mean by, "you can use SASS syntax without having to have SASS installed"?
I'm not a fan of styled components - I think they don't add much except an extra layer of complexity nobody needs, and they're not very portable, so pretty much what you said in your "cons" section.
EDIT: by the way, embedded code blocks here will do syntax highlighting for you so you don't need to embed images of text. That would make it accessible to people using screen readers.
React in general isn't great for semantic HTML though. Also styled-components is kinda old... There are much better/newer css in js libraries that continued down the same path and made it much better. Take a look at PandaCSS for example, especially their slots API is amazing for creating component libraries panda-css.com/docs/concepts/slot-r... but they also offer simpler ways of writing styles and all with great auto complete and exceptionally well optimized.