We started with the documentation of the same styled-component, which completely rules out the use of CSS in the current programming: "nowadays we are building rich and interactive applications, and CSS is simply not designed for this use case".I don´t agree.
CSS has evolved to be able to perfectly build modern user interfaces, thanks to new features such as pseudo-classes, pseudo-elements, CSS variables, computed values, grid, and flex, among others.
After studying people's reasons for using style components, I was able to compile a list of common responses to decide to use them. I call them myths.
1) Myth #1. It solves the global namespacing and style conflicts:
In my opinion, this is a myth because the defenders of the style components speak as if the CSS community had not offered solutions to these problems, such as the CSS modules, Shadow DOM and several naming conventions. The only "advantage" of styled-components is that they take away the responsibility of naming humans, passing into the hands of the machine. But the machine can also be wrong sometimes, although it does less than the human.
2) Myth #2. The use of stylish components makes you think more about semantics:
The same premise is incorrect. Style and semantics are different problems and require different solutions. Semantics is about using the correct labels to build the marking. Do you know what HTML tags will represent these components? No, you don´t know that.
3) Myth #3. It facilitates the extension of styles:
4) Myth #4. It facilitates the conditional style of the components:
5) Myth #5. It allows a better organization of the code:
I know some people who say that they like styled-components because it allows having styles and JS in the same file. I understand that this may seem attractive to you, but grouping the style and marking in a single file is a horrible solution. Not only does it make the version control difficult to track, it also makes the displacement in any component not a simple button.
6) Myth #6: better performance requires a smaller package.
It is true that several of the problems described in this article (and others that I could not mention) may be corrected in the long term, either by the community, changes in React or the same styled-components library. But is this worth it? CSS is already widely compatible, works perfectly and has a massive community around it. I do not want so much that you stop using styled-components, but that you do it for good reasons, like its excellent multiplatform support. Don´t use it for bad reasons.
For my part, unless you are developing for native React, we recommend using Shadow DOM v1 (51% of global support), or use the BEM nomenclature for when you design something in CSS. If you are developing for React Web, we recommend you consider using babel-plugin-react-css-modules. But if you are developing for native React, it is preferable to use styled-components.