CSS Modular - Parte I - Como Organizar e Estruturar código CSS com módulos

por Jackson Neri da Camara | Atualização
CSS Modular

Como você estrutura seu código determina se você pode fazer alterações com segurança no futuro sem efeitos colaterais indesejados. Isso começa com uma compreensão do CSS modular, que possui uma coleção de princípios para escrever código com desempenho e manutenção escalável.

A ideia de escrever código modular não é nova na ciência da computação, mas os desenvolvedores só começaram a aplicá-lo ao CSS nos últimos anos. Como os sites e aplicativos da Web modernos ficaram maiores e mais complexos, foi necessário encontrar maneiras de gerenciar a crescente complexidade das folhas de estilo.

Á medida que as folhas de estilo crescem com o código CSS acoplado ao contexto, cria-se os problemas compostos. Estes problemas são conhecidos pelo alto grau de acoplamento entre códigos. Uma simples exclusão de um código antigo torna-se insegura, porque é difícil mensurar até onde aquele código está acoplado com outro. Além do mais, código acoplados são difíceis de entender, até mesmo em projetos pequenos.

Para aplicar a modularização ao código CSS, precisamos encapsular o código CSS em folhas de estilos. De modo que o código de uma folha de estilo não possa interferir em outra folha de estilo. O encapsulamento é o agrupamento de funções e dados relacionados para compor um objeto. É usado para ocultar o estado ou valores de um objeto para que partes externas não possam operá-lo.

Não é possível prever o que suas páginas podem precisar no futuro, mas com módulos reutilizáveis, você deixa a porta aberta para misturar e combinar novas possibilidades com uma aparência familiar e consistente.

Gratuito

ebook css modular

CSS Modular

Aprenda a organizar e estruturar seu código CSS através de módulos.

Metodologias Modulares CSS

Existem várias metodologias que visam reduzir os problemas na estruturação do código CSS, que organizam a cooperação entre programadores e mantem grandes bases de código CSS. Algumas dessas metodologias são: OOCSS, SMACSS, SUITCSS, Atomic e BEM. Não vou falar sobre cada metodologia, pois cada uma é digna para ter o seu próprio artigo. Porém, resolvi citá-las para que você possa fazer sua própria escolha. Sem mais delongas, vamos direto a minha metodologia favorita.

Metodologia BEM

BEM é a sigla para Bloco, Elemento e Modificador que é uma metodologia que permite criar uma arquitetura para seu projeto baseada em blocos independentes para desenvolvimento web. A abordagem em blocos independentes divide a interface do usuário em vários componentes pequenos para montar uma estrutura maior. Esta abordagem torna Interfaces complexas em interfaces simples, possibilitando reutilização de código existente sem copiar e colar.

Módulo é um bloco

Quando falamos de CSS modular podemos chamar um módulo de componente, objeto ou bloco. Na verdade, esta confusão ocorre por causa das diferentes abordagens existentes, mas todos são a mesma coisa. Na metodologia de BEM é chamado de bloco, então vamos chama-lo assim.

BEM - Blocos

Um bloco possui sua própria lógica e funcionalidade independente, não deve ser dependente do contexto. A metodologia BEM prioriza blocos independentes com ênfase no uso de ‘classes’ no lugar de IDs, por serem reutilizáveis. Essas abordagens facilitam o processo de desenvolvimento e suporte do projeto.

A parte mais difícil de escrever CSS modular é quando precisamos escolher nomes apropriados aos módulos. Você precisa dar ao módulo um nome que seja significativo, o contexto a qual você vai usá-lo não deve interferir no nome. Você também deve evitar nomes que simplesmente descrevam a aparência visual. Chamar o bloco de “caixa cinza com imagem” parece mais versátil. Porém, se mais tarde você decidir mudar a cor do plano de fundo para azul claro, esse nome não seria mais aplicável e você teria que renomeá-lo e atualizá-lo em todos os locais em que ele aparece no HTML. Alguns exemplos de nomes de blocos incluem menssagem, media, dropdown, menu, painel, alerta, seção recolhível, login formulário , pesquisa formulário, cadastro formulário.

O nome do bloco não deve ser sobre seu estado ou aparência, por exemplo: desabilitado, vermelho, grande. Os blocos não devem influenciar sua própria geometria externa (margem, posição), devem deixar que o bloco pai faça esse gerenciamento. Nomes compostos dos blocos devem ser separados por hífen.

Exemplo de nome para blocos

Nomenclatura Exemplo de nome
nome-bloco pesquisa-formulario

CSS pesquisa-formulario.css


.pesquisa-formulario{…}

HTML arquivo.html


<div class=“pesquisa-formulario”>…</div>

Podemos criar blocos pais (blocos maiores) como header, sidebar, content-area (section, article) e footer como mostrado na figura 1. Dentro desses blocos pais podemos colocar os blocos filhos (blocos menores), isto é chamado de aninhamento de blocos. Na figura 2 temos este exemplo, os blocos menu, auth, search e logo são blocos filhos do bloco pai head.

Figura 1 - Metodologia BEM blocos pais”
Metodologia BEM blocos pais
Figura 2 - Metodologia BEM blocos aninhados
Metodologia BEM blocos aninhados

BEM Elementos

Elementos são as partes constituintes de um bloco que não podem ser usados fora dele, funcionam como peças internas do bloco. Na figura 3 temos os elementos input e button que são itens do bloco search-form.

Figura 3 - Metodologia BEM Elementos
Metodologia BEM elementos

Na figura 4 temos um menu de navegação, os itens que ele contém não fazem sentido fora do contexto do menu. Você não define um bloco para um item de menu. Você cria um bloco para o próprio menu e os itens de menu são elementos filho.

Figura 4 - Metodologia BEM elementos de bloco
Metodologia BEM elementos de Bloco

Os elementos devem ser descritos em classes CSS, seu nome deve descrever sua finalidade, por exemplo o que o elemento é: item, texto, input. Não deve descrever seu estado, por exemplo como ele se parece: desabilitado, vermelho ou grande.

Um elemento deve ser nomeado primeiramente com o nome do bloco a qual pertence, seguido de dois underscores (__) com o nome do elemento. Elementos com nomes compostos devem ser separados por traço.

Exemplo de nome para elementos

Nomenclatura Exemplo de nome
nome-bloco__nome-elemento menu__item

Exemplo código para menu

CSS menu.css


.menu{...}
.menu__item{...}

HTML arquivo.html


<div class=“menu>
    <div class=“menu__item”>Tab 1</div>
    <div class=“menu__item”>Tab 2</div>
    <div class=“menu__item”>Tab 3</div>
    <div class=“menu__item”>Tab 4</div>
</div>

Em resumo um elemento faz parte de um bloco, não pode ser usado fora do bloco a qual pertence. Um elemento é sempre parte de um bloco, não de outro elemento.

Telegram

Telegram

Canal Telegram: Programação Raiz

Participe do nosso canal no Telegram para receber conteúdos gratuitos toda semana.

BEM Modificadores

Consistência é boa, mas às vezes podemos precisar que o bloco pareça diferente em determinadas circunstâncias. Por exemplo, se você precisar exibir um botão excluir, talvez deva ser vermelho em vez de cinza. Você faz isso definindo modificadores.

Para criar um modificador é necessário definir uma nova classe. O nome do modificador deve descrever sua aparência (tamanho, tema), estado (desabilitado, focado) ou comportamento (direção).

A definição da classe deve começar com o nome do bloco seguido de dois traços com o nome do modificador mais dois traços com o valor do modificador. Se for um modificador de elemento deve ser inserido o nome do elemento logo após o bloco.

Exemplo nomenclatura modificador de bloco:

Nomenclatura Exemplo de nome
nome-bloco—nome-modificador—valor-modificador botao--tamanho--grande
menu--tema--pilula
dropdown--direcao--topo

Exemplo nomenclatura modificador de elemento:

Nomenclatura Exemplo de nome
nome-bloco—nome-modificador--valor-modificador menu__item—tema--pilula

Os e modificadores não devem redefinir o módulo inteiro devem apenas substituir ou complementar as partes que eles mudam. Geralmente, os modificadores dos blocos/elementos alteram as propriedades: background-color, font-weight, borders, opacity e etc.

Para usar um modificador, adicione a classe principal e a classe modificadora no elemento HTML que representa o bloco ou elemento. Isso aplica o estilo padrão do módulo e permite que o modificador substitua seletivamente as propriedades CSS necessária.

Exemplo do código CSS para modificadores de bloco:

See the Pen BEM - Modificadores - Exemplo Botão by jackson (@@jacksoneri) on CodePen.

Sempre mantenha todo o código de um bloco no mesmo lugar. Em seguida, sua folha de estilo consistirá em modificadores um após o outro.

Convenção de nomes BEM alternativo estilo dois traços

A metodologia de BEM fornece alguns formatos de nomes para evitar as colisões de nome. A abordagem apresentada até agora é o estilo dois traços que segue as seguintes regras:

  • Os nomes são escritos em letras latinas minúsculas. Palavras dentro dos nomes de entidades BEM são separadas por um hífen (-).
  • O nome do elemento é separado do nome do bloco por um sublinhado duplo (__).
  • Os modificadores booleanos são separados do nome do bloco ou elemento por um hífen duplo (--).
  • O valor do modificador é separado de seu nome por um hífen duplo (--).

Alguns podem pensar que os nomes das classes ficam muito grandes. Na Metodologia BEM, os nomes das classes devem ser específicos, claros, fáceis de ler e principalmente descritivos.

Conclusão

A ideia de criar uma interface de usuário a partir de blocos padronizados, fáceis de entender, independentes do contexto e que se comportam de maneira previsível é um ótimo conceito.O principal objetivo dessa metodologia é fazer com que qualquer desenvolvedor possa ter total autonomia para alterar qualquer parte do código. Seja um projeto que já conheça ou um projeto que acabou de entrar.

Aconselho fortemente que você use alguma metodologia modular em seu projeto. Particularmente, eu prefiro a metodologia BEM por ter boa documentação e ser amplamente utilizada pelos programadores. Espero que esse artigo ajude você nos seus próximos projetos e que você tenha gostado. Em breve lançarei a continuação deste artigo.

Estou escrevendo um ebook sobre este assunto, e por enquanto esta sendo distribuído gratuitamente por estar na fase de criação. O ebook esta disponível logo abaixo, só colocar seu e-mail que enviarei um link para você fazer o download gratuitamente. Caso queira entrar em contato, me procure nas redes sociais ou passe um email para jacksonjld@gmail.com. Um forte abraço. Até mais!!!

Gratuito

ebook Lógica de Programação e Algoritmos com C#

Lógica de Programação e Algoritmos com C#

Aprenda a dominar as principais habilidades que todo programador deve saber.

Jackson Camara

Programador Fullstack com 7 anos de experiência no desenvolvimento de sistemas web e aplicativos. Bacharel em Ciência da Computação especialista em Angular, .net Core C#, Web API, PostgreSQL e AWS. Entusiasta em microsserviços, DDD e meta-heurística.

Esperando texto