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!