STYLEGUIDESPadronização de Código

SOBRE MIM

UI Designer / Front-end Dev @maclevison zeropixel.com.br

Mac Giovanni

O QUE SÃO OS GUIAS DE ESTILO?

Segundo a Wikipedia

"Um guia de estilo é um conjunto de normas para a escrita e desenho de documentos, tanto para uso geral ou para uma publicação, organização ou área específica."

Um guia de estilo estabelece padrões

para melhorar a comunicação.

PORQUE PADRONIZAR CÓDIGO?

Não transforme o seu código em um Frankenstein.

O Código pode parecer confuso quando as pessoas

usam diferentes convenções.

NÃO TRANSFORME O SEU CÓDIGO EM UM FRANKENSTEIN.

NÃO TRANSFORME O SEU CÓDIGO EM UM FRANKENSTEIN.

NÃO TRANSFORME O SEU CÓDIGO EM UM FRANKENSTEIN.

PORQUE PADRONIZAR CÓDIGO?

• Escrever códigos é o que fazemos todos os dias.

PORQUE PADRONIZAR CÓDIGO?

• Escrever códigos é o que fazemos todos os dias.

• Não vão passar apenas por uma única pessoa.

PORQUE PADRONIZAR CÓDIGO?

• Escrever códigos é o que fazemos todos os dias.

• Não vão passar apenas por uma única pessoa.

• É preciso manter um padrão de convenções

PORQUE PADRONIZAR CÓDIGO?

• Escrever códigos é o que fazemos todos os dias.

• Não vão passar apenas por uma única pessoa.

• É preciso manter um padrão de convenções

• Escrever código o mais declarativo possível.

PORQUE PADRONIZAR CÓDIGO?

• Escrever códigos é o que fazemos todos os dias.

• Não vão passar apenas por uma única pessoa.

• É preciso manter um padrão de convenções

• Escrever código o mais declarativo possível.

• Manter os padrões e semântica.

</>

Cada linha de código deve parecer ser escrita por uma única pessoa, não importa o número de contribuintes.

BENEFÍCIOS DOS GUIAS DE ESTILO

BENEFÍCIOS DOS GUIAS DE ESTILO

• Vocabulário compartilhado

• Vocabulário compartilhado

• Referência de código comum

BENEFÍCIOS DOS GUIAS DE ESTILO

• Vocabulário compartilhado

• Referência de código comum

• Mais fácil de testar e entender

BENEFÍCIOS DOS GUIAS DE ESTILO

• Vocabulário compartilhado

• Referência de código comum

• Mais fácil de testar e entender

• Melhor fluidez do fluxo de trabalho

BENEFÍCIOS DOS GUIAS DE ESTILO

QUEM DEVE USAR?

QUEM DEVE USAR?Todas as equipes e profissionais que prezam pela

qualidade de código.

Todas as equipes e profissionais que prezam pela qualidade de código.

:-)

QUEM DEVE USAR?

LEGAL, QUERO USAR

\o/

USE O EDITOR CONFIGPara definir e manter estilos de codificação

entre diferentes editores e IDEs

editorconfig.org

DEFAULT SETTINGS

SublimeText

GUIAS DE ESTILOReferências de

https://github.com/styleguide

http://css-tricks.com/sass-style-guide/

http://pedronauck.com/frontend-styleguide/

http://mdo.github.io/code-guide

http://Idiomatic.io

http://www.starbucks.com/static/reference/styleguide/

http://sass-guidelin.es/

http://sass-lang.com/styleguide/code/

GUIAS DE ESTILOReferências de

https://github.com/zenorocha/my-coding-style

http://contribute.jquery.org/style-guide/js/

http://javascript.crockford.com/code.html

https://github.com/rwldrn/idiomatic.js/

http://goo.gl/pvVtNz

http://goo.gl/wVQcSz

O PODEROSO MANTRA DOS GUIAS DE ESTILO

• Legibilidade faz diferença

• Legibilidade faz diferença

• Seja consistente

• Legibilidade faz diferença

• Seja consistente

• Objetos devem ter apenas uma responsabilidade

• Legibilidade faz diferença

• Seja consistente

• Objetos devem ter apenas uma responsabilidade

• Seja sempre DRY (Don't Repeat Yourself)

Flat é melhor que aninhado

Bonito é melhor que feio.

Legível para Humanos

CODE IS POETRY.

OBRIGADO!

UI Designer / Front-end Dev @maclevison

zeropixel.com.br

Mac Giovanni