Como tornar seu código facilmente acessível com guias de estilo vivo

Guias de estilo do passado costumam ser vistos como documentos orientados para o design, focados no uso de marca e cor. Mas com o advento de codebases insanamente grandes para sites como o Facebook ou a vasta gama de produtos do Google, os guias de estilo evoluíram desde então.

Atualmente, os guias de estilos vivos contêm sempre documentação atualizada sobre a base de código atual e seus casos de uso. Com esses documentos, podemos escrever códigos muito mais passíveis de manutenção e reutilizáveis, ao mesmo tempo em que vemos instantaneamente como nossa base de códigos é otimizada.

O que há em um guia de estilo de vida?

Guias de estilo de vida são semelhantes às contrapartes mais antigas; eles contêm informações de logotipo e marca, uso de cores, bem como um esquema geral de uso de código. A seção de estrutura de tópicos de código é onde você pode encontrar facilmente código duplicado ou semelhante e combiná-lo para otimizar sua base de código ou visualizar componentes já em uso. A maioria dos guias exibe uma abordagem de estilo "log" em que cada instância de código é documentada ou apenas o código intencionalmente modular é documentado.

Esses guias não apenas se concentram em HTML e CSS, mas também em outras linguagens que podem ser modularizadas para desempenho como JavaScript e PHP. Alguns exemplos sólidos de guias de estilo de vida podem ser encontrados em Github , Mozilla e MailChimp . Como você pode ver nesses exemplos, é comum ter uma página ou um subsite para exibir casos de uso lado a lado com o código de cada componente. Isso torna mais fácil ir e pegá-los quando você precisa deles, e para designers ou desenvolvedores desconhecidos para ver como os componentes funcionam de forma interativa.

Começando seu próprio guia de estilo de vida

Começar a sua própria documentação de guia de estilo de vida a partir do zero pode parecer assustador, especialmente para projetos maiores. Mas normalmente há um retorno sobre o investimento de tempo necessário para fazê-lo. Projetos maiores se beneficiam imensamente de uma documentação viva de estilos de site e estrutura de código. Projetos menores têm um retorno menos perceptível, mas às vezes valioso, em seu investimento de tempo. Em qualquer um dos casos, se você estiver trabalhando em um projeto que pode algum dia ser entregue a outro designer ou desenvolvedor, isso fará com que eles vejam essa documentação.

Comece com a fundação

Os componentes que você usa com frequência são os melhores casos de uso para um guia de estilo de vida, os botões vêm à mente imediatamente. Uma pequena lista de coisas que você pode querer considerar documentar são opções de layout (possivelmente delineando um sistema de grade), tipografia, uso de cores, botões e estilos de link, estilo de formulário, notificações ou alertas e estilo de lista. Apenas sobre qualquer coisa que possa se beneficiar de ser reutilizável pode ser adicionado essencialmente. Ao delinear, lembre-se de manter as coisas flexíveis. Nunca estilize um alerta ou botão específico para uma página ou caso de uso, a menos que seja absolutamente necessário. Em vez disso, adicione classes modificadoras para construir a base básica para coisas como cor, tipografia ou alterações estéticas. Dessa forma, você sempre pode contar com a classe .button para designar uma largura, uma altura e um tamanho de texto consistentes, permitindo que as classes de modificadores alterem as coisas específicas de cada caso de uso.

Os objetivos do código sustentável

O objetivo do código de manutenção é tornar as coisas reutilizáveis ​​e preparadas para o futuro. Componentes como barras de notificação, botões, cabeçalhos e rodapés são ótimos exemplos de código reutilizável - coisas que você pode usar várias vezes em todo o site ou na mesma página. Se você está quebrando código antigo ou já escrito para torná-lo mais sustentável após o fato, é realmente muito simples. Comece tirando o CSS do básico. Você deve ficar com uma classe de componentes que define itens estruturais, como altura, largura e posição. Enquanto classes modificadoras adicionais podem ser usadas para alterar coisas estéticas como cor ou tipografia. Além disso, se o seu projeto estiver usando um ID ou classe de corpo para cada página, você poderá estilizar casos de uso exclusivos em cada página dessa maneira. Certifique-se de não recorrer a esta prática muito embora, como pode facilmente adicionar peso ao seu guia de estilo.

o Princípio BEIJO é um princípio de design bem adequado para o processo de desenvolvimento modular também. Escrever código simples e de fácil manutenção geralmente é mais fácil, mantendo seus componentes simples. Quando se trata de simplicidade, se for possível tornar as coisas mais eficientes e / ou usar menos código enquanto obtém o mesmo resultado, nossos componentes devem ser escritos para isso. Os objetivos finais de uma estrutura de código sustentável é ter algo reutilizável, pequeno e muito mais eficiente do que uma contraparte não sustentável.

Convenções de nomenclatura em CSS

Quando se trata de trabalhar com uma estrutura de código sustentável, as convenções de nomenclatura se tornam muito importantes. Escrever classes CSS descritivas irá percorrer um longo caminho para garantir que manter sua base de código será uma tarefa fácil. Há sim sem limite em comprimentos de classe CSS, então use isso para sua vantagem. Certifique-se de manter uma convenção de nomenclatura clara, já que misturar traços vs sublinhados ou caso de camelo contra todos os nomes de letras minúsculas pode facilmente tornar-se confuso. Em geral, é uma ótima ideia tornar suas classes de componentes muito descritivas, ao mesmo tempo em que reduz as classes de modificadores. Abaixo está um exemplo de um botão, uma regra de caso de uso exclusiva e classes modificadoras.

  / * Esta é uma classe de componentes, deve conter apenas regras estruturais básicas * /. Button {display: block; largura: 250px; height: 48px; line-height: 48px;} / * Este caso de uso exclusivo descreve um botão usado na página inicial * /. homepage-cta-button {display: blockmargin: 0 auto 50px; largura: 180px; altura: 60px; line-height: 60px;} / * Abaixo estão as classes modificadoras, que são adicionadas além do componente classe para adicionar cor ou outras alterações estéticas * /. red {background: # C54F48} .rounded {border-radius: 5px;} 

Soluções Automatizadas

Os geradores de guia de estilo automatizados começaram a aparecer para a esquerda e para a direita para ajudar no envio de guias de estilo. Protótipo de estilo é um gerador SASS construído por Ram Richard e Mason Wendell de Equipe SASS . É uma das melhores opções no momento, com geradores similares como Holograma , Kalei , StyleDocco e KSS também provando útil.

Automated vs hand-crafted

Como sempre, há vantagens e desvantagens em usar qualquer um dos métodos aqui. As soluções automatizadas são rápidas e podem ser usadas após o fato, mas às vezes também são rigorosas. Guias de estilo artesanais deixam você conhecendo os detalhes de tudo, mas levam mais tempo. Pessoalmente, a abordagem feita à mão é a melhor para mim na maioria dos casos, pois é a mais flexível em termos de trabalho com outros desenvolvedores. Mas certamente vale a pena testar algumas das soluções automatizadas, apenas para ter uma ideia de como elas funcionam e o que elas dizem sobre o seu código.

Revendo seu código

Websites nunca terminam. Modificamos as coisas, fazemos a transição para novos estilos e tendências e, no final, podemos acabar com um monte de código de revisões anteriores. É importante ter um momento e olhar para o "fim" de cada revisão para garantir que as coisas estejam o mais limpas possível. Neste ponto, eu também gosto de jogar cada componente (e classes modificadoras) em um Codepen para testar o suporte ao navegador e fazer anotações de acordo. Isso pode economizar muito tempo se você estiver criando uma página com restrições de suporte. Ao revisar, também certifique-se de ficar de olho nos componentes que podem entrar em conflito uns com os outros de formas estranhas ou causar problemas no modelo de caixa.

Conclusão

Em conclusão, guias de estilo devem resultar em código que é muito manipulativo e flexível, mas ainda assim fácil de manter e ler. Considerando quanto tempo devemos investir para alcançar tal resultado, os guias de estilos vivos têm um efeito muito mais quantificável em projetos maiores do que os menores. Projetos complexos ou grandes se beneficiam tanto de todos os aumentos de otimização e desempenho que valem a pena o tempo gasto para alcançar esses resultados. Criando um guia de estilo de vida para um pequeno site ou projeto pode não ser digno do investimento de tempo embora.

Em conclusão, todos nós devemos nos esforçar para escrever um código limpo e sustentável que se concentre na prova do futuro. Os guias de estilo de vida tendem a encorajar esse fluxo de trabalho e auxiliar a tornar os desenvolvedores e os espectadores muito mais felizes.

Imagem em destaque / miniatura, imagem de programação via Shutterstock.