Documentando seu CSS

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

➔ [email protected]

➔ @ogmoura

➔ facebook.com/gmoura.dev

➔ gmoura.github.io

valeu falou!