Documentando seu CSS
sobre mim
Guilherme Moura Nascimento
Front-end Developer
mineiro
campineiro
paulistano
jsenv.com
<3
a verdade nua e crua
Documentação
uma etapa
que todos conhecem
sabem que é importante
poucos fazem
por que ?
“falta tempo”
“não sou bom com textos”
“simplesmente não gosto”
“o código deve ser”
AUTO EXPLICATIVO
“não documento mas gosto de códigos
documentados”
porém...
“utopia”
vários … vários … vários ...
benefícios
processo de adaptação
menos doloroso
manutenção
rápida
reduzir código duplicado
organização
Padronização
transparência
analogia
imagine sua linguagem de programação
favorita…
agora imagine ela com uma documentação
“mega zuada”...
provavelmen...
#partiu #documentar #meu #css
Let’s rock
requisitos de documentação
● ser de fácil acesso
● bem estruturada
● padronizada
● exemplos de uso
● guias de boas prática...
duas maneiras
para você mesmo
single player
documentação apenas no código
documentação apenas no código
documentação apenas no código
http://nicolasgallagher.com/micro-clearfix-hack/
de dev para todos
multiplayer
Style guide
definição
Style Guide é um documento disponível online
ou através de intranet. Esse documento
contém todos os componentes,...
http://goo.gl/eaexSJ
http://goo.gl/VjQ4d2
http://goo.gl/lmIdV8
exemplos de style guide
http://goo.gl/1xOj3U
como fazer
Geradores de Style guide
● metodologia de documentação
● suporte a pré-processadores
KSS · Knyle Style Sheets
http://warpspire.com/kss/
● YAML and Markdown
● suporte a pré-processadores
● bonito e simples
Hologram
http://trulia.github.io/hologram/
vantagens
várias … várias … várias
previne conflitos de estilo
reduz código duplicado
prototipagem
LeBlanc’s law: Later equals never
by Code clean - a handbook of agile software
craftsmanship
➔ gmoura.nas@gmail.com
➔ @ogmoura
➔ facebook.com/gmoura.dev
➔ gmoura.github.io
valeu falou!
Documentando seu CSS
Próximos SlideShares
Carregando em…5
×

Documentando seu CSS

325 visualizações

Publicada em

Motivos para documentar CSS e alguns geradores de Style Guide.

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
325
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Documentando seu CSS

  1. 1. Documentando seu CSS
  2. 2. sobre mim
  3. 3. Guilherme Moura Nascimento
  4. 4. Front-end Developer
  5. 5. mineiro campineiro paulistano
  6. 6. jsenv.com
  7. 7. <3
  8. 8. a verdade nua e crua Documentação
  9. 9. uma etapa
  10. 10. que todos conhecem
  11. 11. sabem que é importante
  12. 12. poucos fazem
  13. 13. por que ?
  14. 14. “falta tempo”
  15. 15. “não sou bom com textos”
  16. 16. “simplesmente não gosto”
  17. 17. “o código deve ser” AUTO EXPLICATIVO
  18. 18. “não documento mas gosto de códigos documentados” porém...
  19. 19. “utopia”
  20. 20. vários … vários … vários ... benefícios
  21. 21. processo de adaptação menos doloroso
  22. 22. manutenção rápida
  23. 23. reduzir código duplicado organização
  24. 24. Padronização transparência
  25. 25. analogia imagine sua linguagem de programação favorita… agora imagine ela com uma documentação “mega zuada”... provavelmente você não estaria programando nessa linguagem e muito menos a escolheria como sua favorita...
  26. 26. #partiu #documentar #meu #css Let’s rock
  27. 27. requisitos de documentação ● ser de fácil acesso ● bem estruturada ● padronizada ● exemplos de uso ● guias de boas práticas ● atualizada constantemente ● referências ● bonita
  28. 28. duas maneiras
  29. 29. para você mesmo single player
  30. 30. documentação apenas no código
  31. 31. documentação apenas no código
  32. 32. documentação apenas no código http://nicolasgallagher.com/micro-clearfix-hack/
  33. 33. de dev para todos multiplayer
  34. 34. Style guide
  35. 35. definição Style Guide é um documento disponível online ou através de intranet. Esse documento contém todos os componentes, módulos, tipografia e grids, manuais de boas práticas, todos dispostos em seções organizados em um único lugar.
  36. 36. http://goo.gl/eaexSJ http://goo.gl/VjQ4d2 http://goo.gl/lmIdV8 exemplos de style guide http://goo.gl/1xOj3U
  37. 37. como fazer Geradores de Style guide
  38. 38. ● metodologia de documentação ● suporte a pré-processadores KSS · Knyle Style Sheets http://warpspire.com/kss/
  39. 39. ● YAML and Markdown ● suporte a pré-processadores ● bonito e simples Hologram http://trulia.github.io/hologram/
  40. 40. vantagens várias … várias … várias
  41. 41. previne conflitos de estilo reduz código duplicado prototipagem
  42. 42. LeBlanc’s law: Later equals never by Code clean - a handbook of agile software craftsmanship
  43. 43. ➔ gmoura.nas@gmail.com ➔ @ogmoura ➔ facebook.com/gmoura.dev ➔ gmoura.github.io valeu falou!

×