Rewrite to RSCSS

BEM 💩 👎

<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-8-tablet"></div>
</div>

RSCSS 👀 👍

<div class="mdc-grid">
  <div class="cell -span-6 -span-8-tablet"></div>
</div>

http://rscss.io

[kfranqueiro]

As @Garbee explained, this was a conscious design decision by the material-components-web team. While BEM classnames are admittedly more verbose, they greatly reduce the chance of conflict when used together with other third-party libraries as well as your own styles, and also promote lower specificity selectors in general.

In contrast, using the RSCSS example above, it’d be very easy for multiple libraries or your own code to coincidentally define styles for the same selector (e.g., .cell) and end up in conflict with each other. It also seems to advocate nesting selectors to a higher degree, which has the potential to cause additional difficulties when the need arises to override styles.

Avoiding conflicts and difficulties with other code is crucial for a library like MDC Web, which is designed to be usable regardless of what other JS or CSS frameworks you may also be using. We appreciate the suggestion, but in this particular case, we have strong reasons for having chosen BEM.

[Garbee]

RSCSS due to having non-namespaced classes internally can lead to collisions with external code that could be pulled in. BEM was a specific design choice for the API since it namespaces everything provided into isolated components that have the least chance for external collisions.

If you’d like to use an RSCSS setup in your app, you have Sass available to write your own API layer.