Independente da área de atuação, é muito importante a organização. E na área web, mais especificamente no setor de design, a criação do guia de estilo é muito importante. Infelizmente, mesmo com os benefícios, muitos não começam ou cumprem essa etapa.

Vamos nos colocar no cenário em que temos um projeto web, independente do tamanho do mesmo. Existindo um guia de estilo, além de facilitar o trabalho posterior do designer, já deixa um padrão pronto para o desenvolvedor front-end.

Partiremos de dois pontos de vista, simples.

• Primeiro caso: O designer entrega 30 telas para o desenvolvedor front-end. O mesmo tem que olhar todas as telas, achar padrões, descobrir todas as cores, tamanhos e avaliar o que é específico ou não.
• Segundo caso: O designer entrega 30 telas e 1 guia de estilo para o desenvolvedor front-end. O mesmo só precisa olhar as telas por questão de conferência e precisa apenas seguir o guia de estilo, com os padrões do projeto.

De início, você pode pensar que todo o trabalho e a responsabilidade vai ficar com o designer, e o desenvolvedor front-end não terá trabalho. Errado, ele terá menos trabalho desnecessário. Afinal, quando você vai no restaurante e vai pedir um prato, você diz: - Me vê o terceiro prato da lista de almoço executivo. (E o garçom tem que olhar o cardápio para ver qual é) ... Não !!!

Essa prática é necessária para que se tenha padrões na etapa de desenvolvimento. Agilizando o processo de atualização e manutenção do projeto. O designer terá o projeto centralizado, de fácil visualização e consulta. Assim, tendo menos trabalho na etapa de alterações e mudança completa do projeto, tendo padrões estabelecidos.

Para a etapa do desenvolvimento front-end, o trabalho desnecessário não existirá mais. O foco poderá ser dado para a criação dos padrões na área de desenvolvimento, que trará os mesmos benefícios citados acima com relação a área de design.

Exemplo prático

Vamos supor que o designer inseriu um padrão para o título de cada página no guia de estilo. Vou exemplificar com a etapa do front-end.

// Utilizando o pré-processador SASS, com a sintaxe SCSS
$base-font-family: Arial;
$font-size-large: 24px;
$font-size-regular: 18px;
$color-typography-primary: #1c1e36;

.title {
  color: $color-typography-primary;
  font-family: $base-font-family;
  font-size: $font-size-large;
  font-weight: 700;
}

.subtitle {
  color: $color-typography-primary;
  font-family: $base-font-family;
  font-size: $font-size-large;
}

.text {
  color: $color-typography-primary;
  font-family: $base-font-family;
  font-size: $font-size-regular;
}

Um exemplo bem simples, mas é para demonstrar que um guia de estilo bem estruturado, influência nos padrões criados na etapa de desenvolvimento. Não é preciso saber o que acontece no código acima e a princípio não vou entrar nesse assunto. Apenas compare com o código abaixo:

.title {
  color: #1c1e36;
  font-size: 24px;
}

.widget-title {
  color: #1f213a;
  font-size: 23px;
}

.text {
  color: #1c1e35;
  font-size: 18px;
}

Calma!! Peço desculpas. Os pontos principais, não ficaram claros.

A diferença mais notável é que antes usava variáveis, para centralizar o código e a manutenção ser mais prática. E o uso das mesmas vem do planejamento do desenvolvedor, as regras de negócio do projeto e o guia de estilo.

O ponto que quis mostrar, é que mesmo centralizando o código, se não tem um guia de estilo, não faz efeito. As cores acima, tem um tom bem próximo um do outro. Será necessário ser criado uma variável para cada, então por isso na definição do guia de estilo, algumas coisas tem que ter uma avaliação se são viáveis. Como é o caso da fonte, onde se tem a diferença de 1 pixel. Isso vendo em pequena escala, parece ser uma coisa que se contorna facilmente, mas em grande escala, pode ser um grande problema. Principalmente, se não há muita comunicação entre a equipe de design e front-end.

Teremos mais casos na sequência de artigos, que irão ilustrar melhor. Um caso em que se torna indispensável o uso de um guia de estilo é em um projeto que trabalha com mais de 1 tema. Mesmo para mim, sendo sempre indispensável.

O maior problema já é resolvido na etapa de design. Com o designer criando padrões, não veremos layout como base em números 12.233 ou 201.17, por exemplo. Você pode chegar para o desenvovledor, falar para desconsiderar e que pode arredondar. Acredite, pode dar problema. #pixelPerfect

Vamos pensar em um projeto com boxes idênticos visualmente, mas com medidas diferentes e você não tem contato com o designer. Com o tempo de desenvolvimento curto e o layout já foi aprovado. Levanta a mão quem já pegou um projeto assim? \o/

Conclusão

Essa foi uma pequena introdução para alertar sobre um dos problemas que dificultam o processo de um projeto web. Padrões salvam vidas. :) ...

Pode parecer que é algo óbvio, mas vejo em muitos lugares que essa etapa não tem o seu valor reconhecido. E tenho uma opinião radical, de que se começa errado, termina da mesma forma. Afinal, refazer é mais fácil que fazer? Isso sim, tem uma resposta óbvia.

Nos próximos artigos sobre o assunto, será mais trabalhado os detalhes sobre a importância e como compor um guia de estilo.