SlideShare a Scribd company logo
1 of 54
Download to read offline
STYLEGUIDES
Padronizaçã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 CONFIG
Para definir e manter estilos de codificação
entre diferentes editores e IDEs
editorconfig.org
DEFAULT
SETTINGS
SublimeText
GUIAS DE ESTILO
Referê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 ESTILO
Referê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

More Related Content

Similar to Stylesguide - Padronização de código

Machucando o código - Técnicas para escrever um código com uma maior legibil...
Machucando o código - Técnicas para escrever um código com uma maior legibil...Machucando o código - Técnicas para escrever um código com uma maior legibil...
Machucando o código - Técnicas para escrever um código com uma maior legibil...Vinícius Krolow
 
Clean Code: Por um mundo com códigos melhores - SETI 2017
Clean Code: Por um mundo com códigos melhores - SETI 2017Clean Code: Por um mundo com códigos melhores - SETI 2017
Clean Code: Por um mundo com códigos melhores - SETI 2017Thiago Barradas
 
Como criar uma cultura de qualidade de código
Como criar uma cultura de qualidade de código Como criar uma cultura de qualidade de código
Como criar uma cultura de qualidade de código João Lethier
 
Padrões Web & Code Standard
Padrões Web & Code StandardPadrões Web & Code Standard
Padrões Web & Code StandardToni Albuquerque
 
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end@cristianoweb
 
Styleguide para projetos web: o que muda no processo do projeto
Styleguide para projetos web: o que muda no processo do projetoStyleguide para projetos web: o que muda no processo do projeto
Styleguide para projetos web: o que muda no processo do projetoDaniel Ranzi Werle
 
Apresentação do Workshop BDD (Desenvolvimento Guiado por Comportamento) com V...
Apresentação do Workshop BDD (Desenvolvimento Guiado por Comportamento) com V...Apresentação do Workshop BDD (Desenvolvimento Guiado por Comportamento) com V...
Apresentação do Workshop BDD (Desenvolvimento Guiado por Comportamento) com V...Developer Academy
 
Vida longa ao legado
Vida longa ao legadoVida longa ao legado
Vida longa ao legadoEduardo Cesar
 
Palestra - Profissão: Desenvolvedor
Palestra - Profissão: DesenvolvedorPalestra - Profissão: Desenvolvedor
Palestra - Profissão: DesenvolvedorDaniel Brandão
 
A importância de DDD e o Domain Model na construção de APIs!
A importância de DDD e o Domain Model na construção de APIs!A importância de DDD e o Domain Model na construção de APIs!
A importância de DDD e o Domain Model na construção de APIs!Isaac de Souza
 
[Devs Cansados Evento 2020] Queria saber a qualidade do meu código: o que olho?
[Devs Cansados Evento 2020] Queria saber a qualidade do meu código: o que olho?[Devs Cansados Evento 2020] Queria saber a qualidade do meu código: o que olho?
[Devs Cansados Evento 2020] Queria saber a qualidade do meu código: o que olho?Weverton Timoteo
 

Similar to Stylesguide - Padronização de código (20)

Machucando o código - Técnicas para escrever um código com uma maior legibil...
Machucando o código - Técnicas para escrever um código com uma maior legibil...Machucando o código - Técnicas para escrever um código com uma maior legibil...
Machucando o código - Técnicas para escrever um código com uma maior legibil...
 
O que devo procurar em um code review
O que devo procurar em um code review O que devo procurar em um code review
O que devo procurar em um code review
 
Clean Code na prática
Clean Code na práticaClean Code na prática
Clean Code na prática
 
TDD com Clean Code: Chega de amadorismo!
TDD com Clean Code: Chega de amadorismo!TDD com Clean Code: Chega de amadorismo!
TDD com Clean Code: Chega de amadorismo!
 
Documentos de software
Documentos de softwareDocumentos de software
Documentos de software
 
Clean Code: Por um mundo com códigos melhores - SETI 2017
Clean Code: Por um mundo com códigos melhores - SETI 2017Clean Code: Por um mundo com códigos melhores - SETI 2017
Clean Code: Por um mundo com códigos melhores - SETI 2017
 
Como criar uma cultura de qualidade de código
Como criar uma cultura de qualidade de código Como criar uma cultura de qualidade de código
Como criar uma cultura de qualidade de código
 
Padrões Web & Code Standard
Padrões Web & Code StandardPadrões Web & Code Standard
Padrões Web & Code Standard
 
Potencializando a qualidade de código
Potencializando a qualidade de códigoPotencializando a qualidade de código
Potencializando a qualidade de código
 
Codigo limpo.pptx
Codigo limpo.pptxCodigo limpo.pptx
Codigo limpo.pptx
 
Bdd&tdd
Bdd&tddBdd&tdd
Bdd&tdd
 
jCompany X Geradores de Códigos
jCompany X Geradores de CódigosjCompany X Geradores de Códigos
jCompany X Geradores de Códigos
 
Code Review
Code ReviewCode Review
Code Review
 
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
 
Styleguide para projetos web: o que muda no processo do projeto
Styleguide para projetos web: o que muda no processo do projetoStyleguide para projetos web: o que muda no processo do projeto
Styleguide para projetos web: o que muda no processo do projeto
 
Apresentação do Workshop BDD (Desenvolvimento Guiado por Comportamento) com V...
Apresentação do Workshop BDD (Desenvolvimento Guiado por Comportamento) com V...Apresentação do Workshop BDD (Desenvolvimento Guiado por Comportamento) com V...
Apresentação do Workshop BDD (Desenvolvimento Guiado por Comportamento) com V...
 
Vida longa ao legado
Vida longa ao legadoVida longa ao legado
Vida longa ao legado
 
Palestra - Profissão: Desenvolvedor
Palestra - Profissão: DesenvolvedorPalestra - Profissão: Desenvolvedor
Palestra - Profissão: Desenvolvedor
 
A importância de DDD e o Domain Model na construção de APIs!
A importância de DDD e o Domain Model na construção de APIs!A importância de DDD e o Domain Model na construção de APIs!
A importância de DDD e o Domain Model na construção de APIs!
 
[Devs Cansados Evento 2020] Queria saber a qualidade do meu código: o que olho?
[Devs Cansados Evento 2020] Queria saber a qualidade do meu código: o que olho?[Devs Cansados Evento 2020] Queria saber a qualidade do meu código: o que olho?
[Devs Cansados Evento 2020] Queria saber a qualidade do meu código: o que olho?
 

Stylesguide - Padronização de código