documentando seu css
TRANSCRIPT
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çãomenos doloroso
manutençãorápida
reduzir código duplicadoorganização
Padronizaçãotransparência
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...
#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áticas● atualizada constantemente ● referências● bonita
duas maneiras
para você mesmosingle 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 todosmultiplayer
Style guide
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.
http://goo.gl/eaexSJ
http://goo.gl/VjQ4d2
http://goo.gl/lmIdV8
exemplos de style guide
http://goo.gl/1xOj3U
como fazerGeradores de Style guide
● metodologia de documentação
● suporte a pré-processadores
KSS · Knyle Style Sheetshttp://warpspire.com/kss/
● YAML and Markdown
● suporte a pré-processadores
● bonito e simples
Hologramhttp://trulia.github.io/hologram/
vantagensvárias … várias … várias
previne conflitos de estilo
reduz código duplicado
prototipagem
LeBlanc’s law: Later equals neverby Code clean - a handbook of agile software
craftsmanship
➔ @ogmoura
➔ facebook.com/gmoura.dev
➔ gmoura.github.io
valeu falou!