Why I don't use Styled Components

With regard to https://twitter.com/_philpl/status/848042319467229184 I’d like to explain in more than 140 chars why I don’t use Styled Components.

Setup

Currently, I work in a project for a large company with hard restrictions both on the hardware as well as the software. I cannot use my own computer, and on the computer I have to work on, I don’t have administrative rights. The IDE installed is IntelliJ (at least a decent IDE), and no other IDE can or will be installed in addition (even though VS Code would just require unpacking a zip and whitelisting the plugins url).

That means I am stuck with what is available for IntelliJ and the command line. This heavily influences my reasoning, however it’s not the single cause.

I experimented with Styled Components on a medium complex component. Unfortunately, I didn’t save the code, so this is written up from memory.

Syntax checking

In one case, I made a syntax error, which got unnoticed for a while, because of the missing syntax checking. I think it was a superfluous quotation mark at the end of a line. However, since it was in a property that got vendor-prefixed, the first line was fine, the -webkit prefixed line worked. In this case, only Firefox was affected, since it used the unprefixed property.

This is a hard to find bug, and the fact that it worked fine in one browser delayed its discovery even further. That was the first argument towards the decision against Styled Components.

Syntax highlighting

Had there been syntax highlighting, when typing the superfluous quotation mark I could have noticed, there is no matching quotation mark.

Code completion

I wanted to set the cursor on a disabled button to that forbidden icon. You know what I mean, but you don’t know its name from heart either, do you? Writing CSS in JavaScript, it’s just a string without meaning. No code completion meant I had to head over to MDN to see it’s called not-allowed.

Having to look up property names and possible values or even class names used in the markup makes development much slower.

That was the strongest reason to drop Styled Components. I am much more efficient working in an IDE with proper code completion, so I switched back to CSS (Less).

Linting

Having a linter is nice, but running it in a separate window instead of in the window I’m coding in means the feedback is delayed. You save the code in the IDE, you head over to see the results in the browser, but forgot to look in the linter window…

React-Styleguidist

We make a styleguide for the components we create. The tool of our choice is React Styleguidist. However, by wrapping the component via styled(comp) the properties don’t show up anymore in the generated documentation.

Summary

In summary, the missing tooling support makes me much slower, and leads to hard to find (of late to find) bugs. There is tooling support for some Editors which brings syntax highlighting and linting. However, without code completion I think I still wouldn’t use it, even if the current tools were available in IntelliJ.

Advantages of Styled Components I miss with CSS

The possibility of Styled Components to change styles at runtime based on the current properties is something I miss when using CSS separately. I solved it in the traditional way with modifier classes. This works for us, since I don’t have to set special values passed in at runtime via the ThemeProvider.

[imadbz]

@gweax buddy you should find a better place to work! cos, most of the issues you raised are already solved for VScode as an example. For integrating with other libraries, well, this is opensource JS, fork the projects, find a good solution and share the goodness with rest of us! (ae: Pull Request you solution). This is what makes this community great in the first place and this is how styled-components or any other of the hundred of libraries you use in your project have been built.

[TazmanianD]

I came across this while checking out styled components and thought I’d add a note specifically about IntelliJ IDEA/WebStorm as the original author mentioned that. It appears there’s a plugin that supports styled components and gets you all the goodness you’re missing above with code completion and syntax checking: https://plugins.jetbrains.com/plugin/9997-styled-components.