[ML] Should introduce CSS prefixes to their selectors

[snide]

ML contains a lot of generic naming .disabled, .status and naked selectors div, label, span in its styling layer. To avoid breaking Kibana this was somewhat negated with an #ml-app top level scope. Until the individual selectors are prefixed ML itself though will always remain vulnerable to imported dependencies or outside plugins that likely share the same generic naming (and hence break ML).

Currently all EUI and Kibana Sass uses a three-letter prefix for its naming per app to help avoid these kinds of conflicts. ML will need to introduce something similar to their code (whatever that may be).

By 7.0 the design team will introduce linting into Kibana's Sass files similar to the rules in EUI. It will check for some manner of prefixing and name-spacing.

At a later date (when the frontend is fully react) auto-prefixing through CSS modules will be a less brittle solution for namespace conflicts.

[elasticmachine]

Pinging @elastic/kibana-design

[elasticmachine]

Pinging @elastic/ml-ui