BEM com nesting nativo V2 - ainda mais poderoso 🔥

Recentemente o WhatIsLove Dev escreveu um artigo muito massa explicando como escrever modificadores BEM de forma muito parecida com a que fazemos no Sass usando apenas CSS pur. Abaixo, exemplo extraído do seu próprio site.

.tag-list__tag {
  --background-color: var(--color-red-200);

  padding-block: 2px;
  padding-inline: 6px;
  background-color: hsl(var(--background-color) / 30%);

  &[class*='--html'] {
    --background-color: var(--color-green-100);
  }

  &[class*='--github'] {
    --background-color: var(--color-gray-100);
  }

  &[class*='--ts'] {
    --background-color: var(--color-blue-200);
  }
}

Pra aplicar o modificador basta declarar a classe base e a classe modificadora no mesmo elemento, típico:

<aside class="aside box">
  <span class="aside__border aside__border--top">
    <!-- omitido -->
  </span>
</aside>

Ai eu pensei:

Pô, massa, mas seria ainda mais legal se eu escrevesse só a classe modificada né? Afinal o prefixo da classe modifier é a classe base (block).

Pois bem.

Sufixo e prefixo

A ideia é simples: o sufixo vai se referir sempre à classe base, o prefixo aos seus modificadores. O attribute selector dá suporte à busca no início e no fim da string, logo basta fazer nesting do sufixo dentro do prefixo.

Dado uma classe .card que possuí os modificadores .card--brand e .card--grey.

:where([class^="card"]) {
  &[class*="--grey"] {}
  &[class*="--brand"] {}
}

• :where([class^="card"]) - Captura o prefixo (block) do elemento
• &[class*="--grey"] - Captura o sufixo (element / modifier) do elemento

Pontos negativos da técnica

• O seletor de atributo é um seletor caro pra performance pois além de realizar a busca na árvore de elementos ele ainda faz uma comparação de substring
• Além da colisão de nomes de classe, teremos colisão de sufixos também, ou seja, o dobro de cuidado na nomenclatura.

Enfim, codepen pra vocês brincarem: