We also use autoprefixer. It's the right tool for the job :)

I can't think of any, but adopting CSS Modules into your tool chain if you're already using webpack and React gets most of the way there.

I can't speak as to why, but I can say that I would never have used Sass if it weren't for the SCSS syntax. It greatly eased the transition of the 1000s of lines of CSS we had. Sass is so close to CSS that a new syntax, wildly different syntax, is a cognitive burden.

Check out the reply to another question

There's never a one right answer. It depends on your team, your constraints, and your tools. I personally love BEM.

I think @apply and :matches selector will be interesting.

A couple years we broke up our monolithic Sass framework into individual components backed of Bower. The design process for how we make those many components fit together easily, and maintain painless theming was fun!

Sass' SCSS syntax is largely a superset of CSS so the difference is whatever you want it to be. Variables? Mixins? Functions? Maps? Pick whichever feature makes your life easier.

There's no one right way. Do what works for you and your team. Most of my dat to day is still stand-alone compiled CSS and JSX files. On newer projects I like using CSS Modules to import my Sass into React. This is a great overview https://www.youtube.com/watch?v=aIyhhHTmsXE

Most of my day to day front-end work is React. Webpack, Chrome devtools, Google, and console.log are my most valuable tools :)