Styled Components vs CSS / SASS / CSS-In-JSX

Code is read much more often than it is written

– Guido Van Rossum, Creator of Python.

Source: https://www.python.org/dev/peps/pep-0008/

It is of utmost importance that we make our code as readable and semantic as possible, so that the next person who comes and reads it is able to quickly understand what the intention was, what the logic is, and how to alter it to meet the new business requirements.

Inline Styles

It is generally accepted that inline styles are not the best idea, because they make the code so much less readable.

Imagine if we were on a page that contained several such components. It would be very hard to make sense of it.

Now that really doesn’t look nice, does it?

Raw CSS / SASS

Of course, we could abstract our styles to an external stylesheet, but that is also not an ideal solution.

The problem with using raw CSS or SASS in your JSX is that if it is not namespaced with great manual care, another developer could easily overwrite your styles by accident without being aware of the cascading effects they’ve caused.

CSS Modules — CSS-In-JSX

CSS modules solve this in part by namespacing the style, but the main problem is that they make the code much less readable.