Organizando o CSS!

Talk apresentada no primeiro meetup CSS SP, sobre organização e documentação de CSS!

Transcript

1. Organizando a casa o CSS @raphaelfabeni
2. @raphaelfabeni http://raphaelfabeni.com.br
3. http://www.a2comunicacao.com.br
4. http://bit.ly/raphael-tableless
5. Então CSS é fácil?
6. http://www.raphaelfabeni.com.br/pikachu-css3/
8. Mas, e a documentação?
10. Ou melhor... Você entende seu código depois de um tempo sem mexer nele?
11. CSS3 Pré processadores Documentação e Padrões Animações Novas Features Responsivo CSS3 x JS Organização e Modularização Frameworks Boas Práticas Perfomance Compatibilidade
12. CSS3 Pré processadores Documentação e Padrões Animações Novas Features Responsivo CSS3 x JS Organização e Modularização Frameworks Boas Práticas Perfomance Compatibilidade
13. “Quando você tem muitos padrões, você não tem nenhum padrão!” Jaydson
15. Antes pelo excesso do que pela falta
17. Mais adequado para você ou seu time
18. Não é sempre você que vai manter aquele código
19. Outras pessoas vão ter que botar a mão na massa
20. Você terá que mexer em código de outras pessoas
21. A2 idiomatic HTML CSS PHP JS
22. HTML CSS PHP JS
23. http://bit.ly/idiomatic-css
24. http://bit.ly/comentarios-css
25. http://bit.ly/comentarios-css
26. Botão • padrão • variações  cores  tamanhos  ...
27. .btn { ... }
28. .btn { ... } .btn-primary { ... }
29. .btn { ... } .btn-primary { ... } .btn-success { ... } .btn-danger { ... }
30. .btn { ... } .btn-primary { ... } .btn-success { ... } .btn-danger { ... } .btn-small { ... } .btn-big { ... }
31. .btn { } .btn:hover, .btn:focus { } .btn-primary { } .btn-primary:hover, .btn-primary:focus { } .btn-success { } .btn-success:hover, .btn-success:focus { } .btn-danger { } .btn-danger:hover, .btn-danger:focus { } .btn-small { } .btn-big { }
32. .btn { } .no-boxshadow .btn { } .btn:hover, .btn:focus { } .btn-primary { } .no-boxshadow .btn-primary { } .btn-primary:hover, .btn-primary:focus { } .btn-success { } .no-boxshadow .btn-success { } .btn-success:hover, .btn-success:focus { } .btn-danger { } .no-boxshadow .btn-danger { } .btn-danger:hover, .btn-danger:focus { } .btn-small { } .btn-big { }
33. Divida seu código em partes
34. Documente seu código, mesmo que pareça bobeira
35. Cores Tamanho • default • primary • success • danger • hover • focus • no-boxshadow • small • big Botão • padrão
36. /* ========================================================================== Buttons ========================================================================== */ /* ========================================================================== Default ========================================================================== */ .btn { }
37. /* ========================================================================== Buttons ========================================================================== */ /* * Default button * Tags: <a>, <button>, <input> */ /* ========================================================================== Default ========================================================================== */ .btn { } .btn:hover, .btn:focus { } /* No box-shadow style - old browsers */ .no-boxshadow .btn { }
38. /* ========================================================================== Default ========================================================================== */ .btn { } .btn:hover, .btn:focus { } /* No box-shadow style - old browsers */ .no-boxshadow .btn { } /* ========================================================================== Colors ========================================================================== */ /* Primary ========================================================================== */ /* * Used for primary actions * Lorem ipsum dolor sit amet, consectetur. */ .btn-primary { } .btn-primary:hover, .btn-primary:focus { } /* No box-shadow style - old browsers */ .no-boxshadow .btn-primary { }
39. /* Success ========================================================================== */ /* * Lorem ipsum dolor sit amet. * Lorem ipsum dolor sit amet, consectetur. */ .btn-success { } .btn-success:hover, .btn-success:focus { } /* No box-shadow style - old browsers */ .no-boxshadow .btn-success { } /* Danger ========================================================================== */ /* * Lorem ipsum dolor sit amet. * Lorem ipsum dolor sit amet, consectetur. */ .btn-danger { } .btn-danger:hover, .btn-danger:focus { } /* No box-shadow style - old browsers */ .no-boxshadow .btn-danger { }
40. /* ========================================================================== Sizes ========================================================================== */ /* Small ========================================================================== */ .btn-small { } /* Big ========================================================================== */ .btn-big { }
42. Valeu! Eaí.. O que acham? @raphaelfabeni http://raphaelfabeni.com.br