I personally enjoy using CSS-in-JS when working in React. If we take a moment to think about it, CSS-in-JS is the next natural step after JSX. We started using React because we wanted HTML that was as "smart" as Javascript. Now, we want CSS that is as smart as Javascript too. The fact that our CSS can REACT (get it?) to the state of the application instead of having classes swapped in and swapped out conditionally just seems to make more sense to me. Of course, CSS-in-JS doesn't mean you don't need to learn CSS. My CSS-in-JS looks very much like standard CSS except that it's far more concise and dynamic since one class can REACT (amirite?) to the state of the app instead of having several alternating classes that get swapped out based on the classes that an element gets decorated with. Also, encapsulating your styles inside a Component follows the "everything is a component, man" motto of modern web development. Finally, the real issue with CSS-in-JS is performance. How much do we lose in performance by relying on inline styling when compared to static and optimized CSS files? How much do we gain in control over our CSS by having it be as "smart" as Javascript?
I personally enjoy using CSS-in-JS when working in React. If we take a moment to think about it, CSS-in-JS is the next natural step after JSX. We started using React because we wanted HTML that was as "smart" as Javascript. Now, we want CSS that is as smart as Javascript too. The fact that our CSS can REACT (get it?) to the state of the application instead of having classes swapped in and swapped out conditionally just seems to make more sense to me. Of course, CSS-in-JS doesn't mean you don't need to learn CSS. My CSS-in-JS looks very much like standard CSS except that it's far more concise and dynamic since one class can REACT (amirite?) to the state of the app instead of having several alternating classes that get swapped out based on the classes that an element gets decorated with. Also, encapsulating your styles inside a Component follows the "everything is a component, man" motto of modern web development. Finally, the real issue with CSS-in-JS is performance. How much do we lose in performance by relying on inline styling when compared to static and optimized CSS files? How much do we gain in control over our CSS by having it be as "smart" as Javascript?
You got my vote :D