Using tagged template literal named "css" for CSS strings in JavaScript is a de facto standard so there are few tools that can take advantage of it:

VSCode extension for Styled Components can provide syntax highlighting, auto-completion and linting for any tagged template literal named "css"
Prettier can format the CSS inside them and there's a VSCode extension for it (among other editors)

This documentation site is styled using BEMed Components.

Check it out on Github

https://github.com/epeli/react-bemed/tree/master/docs

You might want to just start inspecting this site too see how what kind of class names are being generated.

CSS autoprefixing is enabled automatically in production builds.

It can be used to change the base styles of the BEMed Components. For example I like to design my site with a flexbox-first style so I add

.bemed {
    display: flex;
    position: relative;
    flex-direction: column;
    box-sizing: border-box;
}

If you're familiar with React Native this is basically same as the View component.

It avoids adding extra weight to your bundle if you don't actually use it.

No. Dynamic CSS generation during rendering adds non-trivial complexity and makes build-time optimizations harder with Babel. If you need dynamic styles just use the style prop.

Should be. Maybe even blazing. I haven't made any benchmarks yet though.

But when comparing to similar tools like Styled Components or Emotion: BEMed Components has a lot simpler runtime because it does not support dynamic CSS generation or React Context based theming. Basically all BEMed Components does during runtime is generating the strings for the className props.

One could even say that BEMed Components is just a glorified version of the classnames module.

Stylis

https://stylis.js.org/

Definitely.