In these times, CSS has lost a lot of popularity. The community believes that CSS is an obsolete and unnecessary tool, and that is why they are increasingly betting on JavaScript and its frameworks. And that is a mistake. In this article I hope to explain what are the common misconceptions (myths) about CSS and JavaScript, and what solutions there are in CSS for those problems.

I clarify that with "CSS in JavaScript" I refer mainly to the styled-component library, because this is the current trend of React developers for style components.

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.

Now styled-components are fashionable in the React community, but I do not like this trend because it is surrounded by many misconceptions. Let's leave one thing clear: the style components are just a top-level abstraction on CSS. All it does is analyze its CSS defined in JavaScript and create JSX elements assigned to CSS.

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:

In the V1 of styled-components you can extend styles using the construct styled (StyledComponent); while V2 introduced the extended method to extend existing styles. I admit that this is great, but CSS has not been left behind in the race. You can also do this in CSS, either by using the CSS module composition or the SASS @extens inheritance combination. It's just as simple as or easier than doing it in JavaScript.

4) Myth #4. It facilitates the conditional style of the components:

As part of the React community, it is for us a very intuitive and logical idea to design components according to their accessories. After all, the behavior of the components is modeled using the accessories. Creating a style sheet conditionally using JavaScript gives you a lot of power over your code. However, the style is much harder to interpret than its CSS equivalent, which is lighter and shorter.

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.

Nowadays a styled-components file cannot be extracted in a static CSS file. It is also not possible to cache CSS and JavaScript separately. All the style components are wrapped in an additional and totally unnecessary HoC, which worsens the performance and expense of internet rental. We recommend that you don´t start animating components using dynamic style values versus keyframes.

Conclusion

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.