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:
Top comments (0)