Documentando seu CSS
-
Upload
guilherme-moura -
Category
Internet
-
view
75 -
download
0
Transcript of Documentando seu CSS
![Page 1: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/1.jpg)
Documentando seu CSS
![Page 2: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/2.jpg)
sobre mim
![Page 3: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/3.jpg)
Guilherme Moura Nascimento
![Page 4: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/4.jpg)
Front-end Developer
![Page 5: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/5.jpg)
mineiro
campineiro
paulistano
![Page 6: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/6.jpg)
jsenv.com
![Page 7: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/7.jpg)
<3
![Page 8: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/8.jpg)
a verdade nua e crua
Documentação
![Page 9: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/9.jpg)
uma etapa
![Page 10: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/10.jpg)
que todos conhecem
![Page 11: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/11.jpg)
sabem que é importante
![Page 12: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/12.jpg)
poucos fazem
![Page 13: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/13.jpg)
![Page 14: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/14.jpg)
por que ?
![Page 15: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/15.jpg)
“falta tempo”
![Page 16: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/16.jpg)
“não sou bom com textos”
![Page 17: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/17.jpg)
“simplesmente não gosto”
![Page 18: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/18.jpg)
“o código deve ser”AUTO EXPLICATIVO
![Page 19: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/19.jpg)
“não documento mas gosto de códigos documentados”
porém...
![Page 20: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/20.jpg)
“utopia”
![Page 21: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/21.jpg)
vários … vários … vários ...
benefícios
![Page 22: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/22.jpg)
processo de adaptaçãomenos doloroso
![Page 23: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/23.jpg)
manutençãorápida
![Page 24: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/24.jpg)
reduzir código duplicadoorganização
![Page 25: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/25.jpg)
Padronizaçãotransparência
![Page 26: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/26.jpg)
analogiaimagine 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...
![Page 27: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/27.jpg)
#partiu #documentar #meu #css
Let’s rock
![Page 28: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/28.jpg)
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
![Page 29: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/29.jpg)
duas maneiras
![Page 30: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/30.jpg)
para você mesmosingle player
![Page 31: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/31.jpg)
documentação apenas no código
![Page 32: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/32.jpg)
documentação apenas no código
![Page 33: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/33.jpg)
documentação apenas no código
http://nicolasgallagher.com/micro-clearfix-hack/
![Page 34: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/34.jpg)
de dev para todosmultiplayer
![Page 35: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/35.jpg)
Style guide
![Page 36: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/36.jpg)
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.
![Page 37: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/37.jpg)
http://goo.gl/eaexSJ
http://goo.gl/VjQ4d2
http://goo.gl/lmIdV8
exemplos de style guide
http://goo.gl/1xOj3U
![Page 38: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/38.jpg)
como fazerGeradores de Style guide
![Page 39: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/39.jpg)
● metodologia de documentação
● suporte a pré-processadores
KSS · Knyle Style Sheetshttp://warpspire.com/kss/
![Page 40: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/40.jpg)
● YAML and Markdown
● suporte a pré-processadores
● bonito e simples
Hologramhttp://trulia.github.io/hologram/
![Page 41: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/41.jpg)
vantagensvárias … várias … várias
![Page 42: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/42.jpg)
previne conflitos de estilo
reduz código duplicado
prototipagem
![Page 43: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/43.jpg)
LeBlanc’s law: Later equals neverby Code clean - a handbook of agile software
craftsmanship
![Page 44: Documentando seu CSS](https://reader034.fdocumentos.com/reader034/viewer/2022042507/55cdd4a7bb61eb663a8b467b/html5/thumbnails/44.jpg)
➔ @ogmoura
➔ facebook.com/gmoura.dev
➔ gmoura.github.io
valeu falou!