Este documento discute a importância da documentação de CSS e fornece diretrizes para sua criação, incluindo requisitos, métodos e ferramentas. É recomendado criar um guia de estilo online que contenha todos os componentes, módulos, tipografia e grades em seções organizadas, para facilitar a manutenção e a padronização do código.

1. Documentando seu CSS

2. sobre mim

3. Guilherme Moura Nascimento

4. Front-end Developer

5. mineiro
campineiro
paulistano

6. jsenv.com

7. <3

8. a verdade nua e crua
Documentação

9. uma etapa

10. que todos conhecem

11. sabem que é importante

12. poucos fazem

14. por que ?

15. “falta tempo”

16. “não sou bom com textos”

17. “simplesmente não gosto”

18. “o código deve ser”
AUTO EXPLICATIVO

19. “não documento mas gosto de códigos
documentados”
porém...

20. “utopia”

21. vários … vários … vários ...
benefícios

22. processo de adaptação
menos doloroso

23. manutenção
rápida

24. reduzir código duplicado
organização

25. Padronização
transparência

26. 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...

27. #partiu #documentar #meu #css
Let’s rock

28. 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

29. duas maneiras

30. para você mesmo
single player

31. documentação apenas no código

32. documentação apenas no código

33. documentação apenas no código
http://nicolasgallagher.com/micro-clearfix-hack/

34. de dev para todos
multiplayer

35. Style guide

36. 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.

37. http://goo.gl/eaexSJ
http://goo.gl/VjQ4d2
http://goo.gl/lmIdV8
exemplos de style guide
http://goo.gl/1xOj3U

38. como fazer
Geradores de Style guide

39. ● metodologia de documentação
● suporte a pré-processadores
KSS · Knyle Style Sheets
http://warpspire.com/kss/

40. ● YAML and Markdown
● suporte a pré-processadores
● bonito e simples
Hologram
http://trulia.github.io/hologram/

41. vantagens
várias … várias … várias

42. previne conflitos de estilo
reduz código duplicado
prototipagem

43. LeBlanc’s law: Later equals never
by Code clean - a handbook of agile software
craftsmanship

44. ➔ gmoura.nas@gmail.com
➔ @ogmoura
➔ facebook.com/gmoura.dev
➔ gmoura.github.io
valeu falou!