Moving from CSS to JavaScript styles

[kdemoya]

As we want to use Material UI for the visual part and they already did this architecture change, we may want drop SASS and consider it.

This is already the potential future of React itself, as seen here React Future - Inline Styles and here React: CSS in JS

It's kind of novel and/or weird at first sight, but maybe we can make something out of this.

Thoughts?

[jsainthilaire]

I think this could be a great experience, if we don't get hit in a performance level,then why not to try?.
At the end we are using react to encapsulate our components, they are just web components, if can encapsulate style at the time as the behavior sounds like a perfect combination.

[jenriquejr]

what would a component directory structure for this?

.
└─ SomeComponent/
   ├─ style.js
   └─ index.jsx

I think we originally discussed something similar but for scss files

[kdemoya]

@jenriquejr The base idea here is to have fully autonomous components, packing the JS style inside the component. Current trend is to add the style object at the end of the file.

[jenriquejr]

@kdemoya after reading the threads you pointed at the beginning of this issue, there are still some concerns from my point of view - these are mainly about performance and css rules we can not apply directly by adding inline styles with JS.

We would be bringing to our hands a new set of elements to consider at the moment of applying styles that are handled in a simple way on css (I am talking about element states or pseudo classes and media queries), instead of writing simple rules we would need to handle events to update inline styles in some cases and listening to media-query changes in other cases. Things like this might end-up affecting the performance of our components.

Those are my main concerns at this moment, I know there are still more uncovered problems we might be facing.

[kdemoya]

@jenriquejr I believe we are seeing the rising of an important trend here and we could potentially benefit of getting to the roots of it on time.

That being said, the limitations you mention are very real, but covered by Radium for now and I'm pretty sure native support will follow in the future (considering the current docs for The future of React). We all know well how to handle scalable CSS, so we won't be learning much new out of it, at least not in contrast.

Yes, there will be more uncovered issues for sure, as with any new paradigm shift, thinking of it we didn't bundled JS and HTML together back in the days, what about server-rendering JS? So my point is, we can stay attached to our good old friend CSS and learn one or two new tricks, or we can give this paradigm a try and learn a bunch of new things along the way.

As Kanye West said:

We're living the future so
the present is our past.

[jenriquejr]

Being new experiences what we are looking for... Let's give it a try and see what comes out of it.
👍

[kdemoya]

@jsainthilaire @jenriquejr Let's try and make something cool out of this, I'll take care of #15.