Refactor CSS naming (drop BEM?)

[eddybrando]

We're currently using BEM for our CSS naming. There are some issues I see with that.

BEM aims to simplify the use of a unified CSS language by following BEM's naming conventions, but we're using _ instead of -- (as defined in the official documentation) for modifiers, which goes against this purpose.

BEM is also a tool that aims for modularity in CSS naming and avoids ambiguity, but by using SCSS with scoped CSS in our Vue components, we already can create modular scoped unambiguous CSS definitions.

Without BEM, this

<template>
  <div class="foo-page">
    <div class="foo-page--card">
      <button
        class="foo-page--card--button"
        :class="{ 'foo-page--card--button_active': active }"
        >
        Bar
      </button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.foo-page {
  ...
  &--card {
    ...
    &--button {
      ...
      &_active {
        ... 
      }
    }
  }
}
</style>

could be achieved with this

<template>
  <div>
    <div class="card">
      <button
        class="button"
        :class="{ active }"
        >
        Bar
      </button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
  ...
}

.button {
  ...
  &.active {
    ...
  }
}
</style>

And it would be just as modular, scoped and unambiguous, but avoid unnecessary hard to maintain complexity.

[y4izus]

We already discussed this point here

Following your example and looking at the code, almost every component has styles under foo-page so, removing it from the 'could be achieved with this' example is not accurate.

I agree that scoped and BEM share the main goal related to the modularity avoiding ambiguity but I really think BEM give clarity to the component and I wouldn't like to remove it.

Anyways, I don't think we should prioritize this right now

[delapuente]

I don't know why two websites exist for BEM but the one reference by their creators, Yandex, is https://en.bem.info/. The naming convention we are following matches what is recommended there.

That said, notice that BEM is more than a naming convention and, although I agree that other isolation techniques, like scoped, diminishes its utility, it is also a predictable composition methodology.

[eddybrando]

We've agreed on using BEM. I'm closing this discussion, but it could of course be brought up in the future again.