DEV Community

Cover image for BEM com nesting nativo V2 - ainda mais poderoso đŸ”„
Camilo Micheletto
Camilo Micheletto

Posted on

7 3 4 4 3

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);
  }
}

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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"] {}
}
Enter fullscreen mode Exit fullscreen mode
  • :where([class^="card"]) - Captura o prefixo (block) do elemento
  • &[class*="--grey"] - Captura o sufixo (element / modifier) do elemento

meme do xablau

XABLAU

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:

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❀ or a friendly comment on this post if you found it helpful!

Okay