What is the real difference between Styled-Components, Styled-JSS, and Stylable?
Since a little over a year, I have been reading about how to use stylesheets with React and a few months back, my list almost just had the below options:
- Conventional CSS imports
- Styles as JavaScript objects
- CSS modules with webpack
- React CSS Modules
- Babel Plugin React CSS Modules
- Styled Components
- Styled JSX
There may have been other approaches to solve the problem that I may have come across, but you get the picture.
I never managed to achieve scoped CSS in any of my implementations as I had a few unanswered questions about consuming UI libraries with their pre-generated CSS along with my dynamically generated styles, that I could not get an answer for, even after extensive research. Besides, I still like to write CSS in a separate file (preferably through Less.js as the pre-processor).
Recently, I resumed my research to only find more alternatives like JSS (specifically Styled-JSS, emotion and Stylable, which makes me even more confused by turning my unsolved question even more difficult.
Anyway, what I am really not able to understand is for what exactly is the difference between Styled-Components, Styled-JSS, and Stylable. I can see that Styled-JSS does not use ES6 tagged templates while the other two do, but apart from that, they just look like different implementations of the same thing and if that IS the case, it would be a very difficult decision to choose one of them for my future projects.
Any pointer would be highly appreciated.