The syntax looks terrible and getting started is too difficult.

I think it is really subjective. I see nothing off with the syntax, in fact I like it.

Didn't experience any trouble getting started with it. If you use Webpack and css-loader, all you got to do is add a parameter modules to enable css-modules. I've seen far difficult setups with other front-end tools, this one is nowhere near those. CSS Modules really shine with a Webpack setup, and especially when your UI is modular.

Why shouldn't one create sub CSS files using plain old methods and include them in modules?

You don't get a local scoping for your CSS classes if you go this way. You would need to rely on (for instance) BEM naming to namespace your classnames. It is not automatic and you'd need to be very careful with the naming. On the other hand, the classnames CSS modules generates are automatic and guaranteed to be unique, even if classnames in your source files aren't.

And how about using SASS or LESS for more separation and reutilization of your stylesheets? Noadays you have a lot of utilities like grunt, brunch or gulp to make automatic task and convert the concrete type of the file to plain css :)

I'm glad some people can use those things, but to be honest, I'd highly recommend Tachyons (or Basscss). Instead of huge CSS files to write and maintain, you'll have a few KB of CSS, of which you won't have to write more to produce new pages and designs on your site. Utility classes make designing in the browser and iterating in general super easy. You should check it out 😀