Organizando o 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/

7. None

8. Mas, e a documentação?

9. None

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
14. None

15. Antes pelo excesso do que pela falta

16. None

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 { }
41. None

42. Valeu! Eaí.. O que acham? @raphaelfabeni http://raphaelfabeni.com.br