Como organizar os códigos-fonte

Um código-fonte bem organizado torna não só o trabalho do desenvolvedor mais claro e fluido, mas também favorece a escalabilidade da aplicação, bem como atualizações e manutenções futuras.

Como organizar os códigos-fonte

Desenvolvedores web experientes podem se deparar constantemente com o problema da falta de organização e clareza do seu código-fonte. No início isso não era problema, principalmente em virtude do tamanho e da complexidade dos projetos, que eram reduzidos. Hoje, no entanto, uma estrutura incorreta pode causar vários problemas, como a dificuldade de realizar manutenções no código da aplicação.

Outro ponto que justifica a necessidade de organizar o código-fonte é quando uma equipe atua em um projeto. Mesmo usando o GitHub para gerenciar as alterações, muitas pessoas codificando tendem a aumentar o risco de desorganização, prejudicando, além da manutenção, a escalabilidade da aplicação.

Neste texto, vamos falar sobre algumas metodologias usadas no CSS, de modo a promover a melhor organização do seu código-fonte. Continue lendo!

OOCSS

O OOCSS é uma metodologia focada em uma abordagem de orientação a objetos. Portanto, a ideia é fazer a separação entre contêiner, conteúdo, visual e estrutura. Quando o desenvolvedor se depara com um grande projeto, é quase inevitável ter que repetir estruturas em CSS na hora de descrever a posição e a largura dos componentes, por exemplo.

BEM

O método BEM (Block, Element and Modifier) é bastante útil na hora de reutilizar código CSS. O objetivo é criar componentes e padronizar a nomeação das classes, de modo a agilizar o desenvolvimento, promovendo escalabilidade e facilidade de manutenção no futuro.

Bloco

Um bloco deve ser independente e único no código. Além disso, precisa ser construído antes dos demais elementos, sendo que dentro dele é possível inserir outros blocos, por exemplo. Imagine uma parte do layout de uma página web composta pela área de login, pesquisa, menu e logo. Cada um desses que foram citados podem ser blocos independentes inseridos em um bloco maior, que podemos chamar de head.

Considere, neste exemplo, um bloco desse head chamado logo. Com a utilização do método BEM, “logo” pode ser inserido em outras áreas de “head”, sem interferir nas demais funcionalidades. Portanto, a ideia é atribuir não uma característica de estilo ao bloco, mas sim a sua semântica.

Em outras palavras, na hora de dar nome à classe, deve-se dizer se é um Form, Navbar ou Menu, por exemplo, em vez de dizer a cor do texto. Essa mudança traz muito mais clareza não só ao desenvolvedor, mas também às pessoas que terão contato com esse código no futuro, fazendo atualizações ou manutenções.

Elemento

O elemento não só depende de um bloco, como de outros componentes para fazer sentido. Em relação à nomenclatura de classes o seu funcionamento é semelhante ao bloco, prezando mais pela sua semântica do que pelo estilo ou estado. Em uma barra de pesquisa, por exemplo, é possível ter dois elementos, que podem ser chamados input e button, que existem dentro de um bloco que podemos nomear de Form.

Modificador

O modificador tem uma característica menos semântica e mais voltada para o que o bloco ou o elemento fazem. Costuma ser adotado quando elementos e blocos diferem justamente nas suas definições de estilo e estado. Imagine um menu que aparece tanto no cabeçalho como no rodapé de uma página. Nesse caso, será criado um modificador para realizar mudanças no cabeçalho e no rodapé, usando descrições como:

  • focused ou disable, apontando característica de estado;
  • color-red, descrevendo a aparência do bloco ou elemento;
  • directions_left-top e change-to-right, apontando um comportamento.

SMACSS

O SMACSS (Scalable and Modular Architecture for CSS) é uma das metodologias mais populares em organização de código. Desenvolvido pela Yahoo!, é composto pelas categorias Base, Layout, Module, State e Theme. Acompanhe cada um deles nas subseções a seguir.

Base

Imagine uma tag de parágrafo no HTML configurada no CSS para apresentar a cor azul. Quando isso ocorre, temos a seleção por elemento, que é justamente o foco da categoria Base no SMACSS, dispensando, portanto, o uso de classes e IDs. A proposta é criar uma página web padronizada, sendo que, ao invés de usar somente a tag de parágrafo, por exemplo, podem ser incluídas na sintaxe:

  • hierarquias de títulos (h1, h2, h3 e assim por diante);
  • formulários;
  • tabelas;
  • legendas;
  • artigos;
  • rodapés;
  • imagens, entre outros.

Layout

Os cabeçalhos e rodapés de uma página, por serem estruturas fixas, podem ser organizados pela categoria de Layout do SMACSS. Frameworks CSS como o Bootstrap e o Pure utilizam o layout para poupar tempo dos desenvolvedores web, visto que eles entregam estruturas prontas de uma página web.

Module e State

Ao contrário do layout que lida com as estruturas fixas de um website, o Module do SMACSS é responsável pela parte reutilizável do código, ou os componentes. Os botões, menus de navegação e alertas são os melhores exemplos disso, sendo algo crucial para assegurar a escalabilidade e a facilidade de realizar manutenções no código.

Sobre o State (estado), algumas opções são .is-active, .is-selected e .is-visible. Percebe-se o uso do prefixo .is-, necessário para distinguir um estado específico em relação às outras classes.

Theme

A categoria Theme, por sua vez, tem bastante relevância na hora de personalizar a experiência dos usuários em um website. O código-fonte de uma loja virtual, por exemplo, pode precisar do Theme para ficar mais organizado, dado que se trata de uma aplicação de maior porte.

ITCSS

O ITCSS (Inverted Triangle CSS) tem a proposta de organizar o código-fonte por meio de camadas. Para simbolizar um triângulo invertido, essa segmentação é feita na seguinte ordem, considerando sete seletores:

  1. Settings: corresponde às configurações básicas, como cores, fontes e variáveis globais do CSS;
  2. Tools: representam os estilos e o layout do website;
  3. Generic: aqui são usadas as propriedades mais genéricas do CSS;
  4. Elements: aqui não se usa classe ou id, somente a seleção por elemento, de forma semelhante à categoria Base do SMACSS;
  5. Objects: diferente da camada anterior, aqui é permitida a seleção por classe;
  6. Components: aqui já é possível trabalhar com uma grande gama de elementos de interface;
  7. Trumps: a camada mais específica de todas, sendo que um exemplo bastante conhecido é a classe .hidden em conjunto com a instrução !important.

Organizar o código-fonte, como vimos ao longo do texto, é crucial em projetos web de grande porte. Dessa forma, o desenvolvedor não se perde na hora de codificar, tendo clareza de todas as partes, de modo a facilitar a manutenção por terceiros e permitir a sua escalabilidade.

Agora que você sabe a importância de organizar o código-fonte dos seus websites, não saia do blog sem antes fazer parte do nosso banco de talentos!

Compartilhe
facebook
linkedin
twitter
mail
Rafael Pinheiro
Copyediting

Thiago Murça

Gostou deste conteúdo?

Envie-o para seu e-mail para ler e reler sempre que quiser.

Posts Relacionados

Os melhores conteúdos para sua carreira freelancer, direto na sua caixa de entrada

Inscreva-se para receber no e-mail conteúdos exclusivos e em primeira mão.