Skip to main content
adicionou 452 caracteres ao conteúdo
Fonte Link
Kazzkiq
  • 12mil
  • 10
  • 53
  • 83

Um dos design patterns mais utilizados atualmente para organização da parte deno CSS em projetos é o chamado BEM.

BEM, acrônimo de "Block, Element, Modifier", nada mais é do que usar nomenclaturas padronizadas de forma a ajudar um desenvolvedor a identificar a função de uma classe CSS só de bater o olho no seu nome. Ela utiliza o padrão: .bloco__elemento--modificador.

Um bom exemplo de uso prático seria o código abaixo:

<div class="contador">
    <button class="contador__botao contador__botao--subtrair"> - </button>
    <input class="contador__campo" type="number">
    <button class="contador__botao contador__botao--somar"> + </button>
</div>

Onde as classes do exemplo acima representariam:

  • .contador: classe geral do bloco-pai do que será estilizado;
  • .contador__input: classe referente à todos os inputs pertencentes ao bloco-pai.
  • .contador__botão: classe referente à todos os botões pertencentes à este bloco-pai;
  • .contador__botao--subtrair/somar: modificador do botão (continua sendo um botão, mas possuindo um subtipo, neste caso, "somar" ou "subtrair".

Onde ao bater o olho, qualquer conhecedor to padrão conseguiria identificar exatamente as funções de cada classe sem mesmo ver seu conteúdo.

Entre as vantagens de se usar o BEM como padrão estão:Entre as vantagens de se usar o BEM como padrão estão:

  • Padronização de nomenclatura;
  • Fácil identificação das funções das classes antes mesmo de ver o código;
  • Melhor manutenção e escalabilidade em projetos grandes (por causa da padronização);
  • Prevenção de conflito entre propriedades e classes CSS.

Entre as desvantagens, temos por principal:Entre as desvantagens, temos por principal:

  • Nomenclatura esteticamente "feia" (classes com nomes grandes);
  • "Engessamento" de classes (ao invés de uma classe .btn para todos os buttons, teríamos .escopoX__btn, .escopoY__btn, etc.

BEM, assim como outros padrões em ascendência no mercado tem seus pontos fortes e fracos, e assim como qualquer padrão no mundo da TI, deve ser avaliado e usado de acordo sua utilidade no projeto.

Um dos design patterns mais utilizados atualmente para organização da parte de CSS em projetos é o chamado BEM.

BEM, acrônimo de "Block, Element, Modifier", nada mais é do que usar nomenclaturas padronizadas de forma a ajudar um desenvolvedor a identificar a função de uma classe CSS só de bater o olho no seu nome. Ela utiliza o padrão: .bloco__elemento--modificador.

Um bom exemplo de uso prático seria o código abaixo:

<div class="contador">
    <button class="contador__botao contador__botao--subtrair"> - </button>
    <input class="contador__campo" type="number">
    <button class="contador__botao contador__botao--somar"> + </button>
</div>

Onde ao bater o olho, qualquer conhecedor to padrão conseguiria identificar exatamente as funções de cada classe sem mesmo ver seu conteúdo.

Entre as vantagens de se usar o BEM como padrão estão:

  • Padronização de nomenclatura;
  • Fácil identificação das funções das classes antes mesmo de ver o código;
  • Melhor manutenção e escalabilidade em projetos grandes (por causa da padronização);
  • Prevenção de conflito entre propriedades e classes CSS.

Entre as desvantagens, temos por principal:

  • Nomenclatura esteticamente "feia" (classes com nomes grandes);
  • "Engessamento" de classes (ao invés de uma classe .btn para todos os buttons, teríamos .escopoX__btn, .escopoY__btn, etc.

BEM, assim como outros padrões em ascendência no mercado tem seus pontos fortes e fracos, e assim como qualquer padrão no mundo da TI, deve ser avaliado e usado de acordo sua utilidade no projeto.

Um dos design patterns mais utilizados atualmente no CSS é o chamado BEM.

BEM, acrônimo de "Block, Element, Modifier", nada mais é do que usar nomenclaturas padronizadas de forma a ajudar um desenvolvedor a identificar a função de uma classe CSS só de bater o olho no seu nome. Ela utiliza o padrão: .bloco__elemento--modificador.

Um bom exemplo de uso prático seria o código abaixo:

<div class="contador">
    <button class="contador__botao contador__botao--subtrair"> - </button>
    <input class="contador__campo" type="number">
    <button class="contador__botao contador__botao--somar"> + </button>
</div>

Onde as classes do exemplo acima representariam:

  • .contador: classe geral do bloco-pai do que será estilizado;
  • .contador__input: classe referente à todos os inputs pertencentes ao bloco-pai.
  • .contador__botão: classe referente à todos os botões pertencentes à este bloco-pai;
  • .contador__botao--subtrair/somar: modificador do botão (continua sendo um botão, mas possuindo um subtipo, neste caso, "somar" ou "subtrair".

Onde ao bater o olho, qualquer conhecedor to padrão conseguiria identificar exatamente as funções de cada classe sem mesmo ver seu conteúdo.

Entre as vantagens de se usar o BEM como padrão estão:

  • Padronização de nomenclatura;
  • Fácil identificação das funções das classes antes mesmo de ver o código;
  • Melhor manutenção e escalabilidade em projetos grandes (por causa da padronização);
  • Prevenção de conflito entre propriedades e classes CSS.

Entre as desvantagens, temos por principal:

  • Nomenclatura esteticamente "feia" (classes com nomes grandes);
  • "Engessamento" de classes (ao invés de uma classe .btn para todos os buttons, teríamos .escopoX__btn, .escopoY__btn, etc.

BEM, assim como outros padrões em ascendência no mercado tem seus pontos fortes e fracos, e assim como qualquer padrão no mundo da TI, deve ser avaliado e usado de acordo sua utilidade no projeto.

Fonte Link
Kazzkiq
  • 12mil
  • 10
  • 53
  • 83

Um dos design patterns mais utilizados atualmente para organização da parte de CSS em projetos é o chamado BEM.

BEM, acrônimo de "Block, Element, Modifier", nada mais é do que usar nomenclaturas padronizadas de forma a ajudar um desenvolvedor a identificar a função de uma classe CSS só de bater o olho no seu nome. Ela utiliza o padrão: .bloco__elemento--modificador.

Um bom exemplo de uso prático seria o código abaixo:

<div class="contador">
    <button class="contador__botao contador__botao--subtrair"> - </button>
    <input class="contador__campo" type="number">
    <button class="contador__botao contador__botao--somar"> + </button>
</div>

Onde ao bater o olho, qualquer conhecedor to padrão conseguiria identificar exatamente as funções de cada classe sem mesmo ver seu conteúdo.

Entre as vantagens de se usar o BEM como padrão estão:

  • Padronização de nomenclatura;
  • Fácil identificação das funções das classes antes mesmo de ver o código;
  • Melhor manutenção e escalabilidade em projetos grandes (por causa da padronização);
  • Prevenção de conflito entre propriedades e classes CSS.

Entre as desvantagens, temos por principal:

  • Nomenclatura esteticamente "feia" (classes com nomes grandes);
  • "Engessamento" de classes (ao invés de uma classe .btn para todos os buttons, teríamos .escopoX__btn, .escopoY__btn, etc.

BEM, assim como outros padrões em ascendência no mercado tem seus pontos fortes e fracos, e assim como qualquer padrão no mundo da TI, deve ser avaliado e usado de acordo sua utilidade no projeto.