Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Organizando o CSS!

Organizando o CSS!

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

C4d7da8ef43f08bdbf8cc23fd822c7f9?s=128

Raphael Fabeni

August 09, 2014
Tweet

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