CSS pra Gente Grande - CSS escalável, organizado, legível e reaproveitável

Dc87153c75336a2482935e051b118d01?s=47 Shankar Cabus
September 25, 2014

CSS pra Gente Grande - CSS escalável, organizado, legível e reaproveitável

Sabemos que atualmente não é mais o sobrinho do tio da mãe do periquito azul que faz o CSS. E com projetos cada vez maiores e colaborativos, manter e escalar seu CSS é uma missão cada dia mais difícil. Mas não impossível! Aprenda com a experiência de quem já sofreu e tenha disciplina pra aprender e aplicar as melhores práticas pra organizar, reaproveitar e deixar seu CSS legível!

Dc87153c75336a2482935e051b118d01?s=128

Shankar Cabus

September 25, 2014
Tweet

Transcript

  1. CSS pra gente grande

  2. www.shankarcabus.com.br Shankar Cabus de Teive e Argollo

  3. JusBrasil

  4. css

  5. CSS pra gente pequena Sobrinho

  6. HTML JAVASCRIPT CSS informação e estrutura ação e comportamento estilo

    e formatação
  7. None
  8. None
  9. CSS embeleza e facilita o uso

  10. CSS é simples de entender! mas difícil de usar e

    manter!
  11. TUNEL DO TEMPO

  12. 2014

  13. 1989 Tim Berners-Lee Web

  14. 1990 HTML Tim Berners-Lee

  15. 1991 HTML 1.0

  16. 1994 HTML 2.0 imagens

  17. 1994 Håkon Lie CSS

  18. 1995 HTML 3.0 tabelas IE 1

  19. 1996 CSS 1.0 IE 3

  20. 1997 HTML 3.5 IE 4

  21. 1999 HTML 4.0 IE 5

  22. 2001 IE 6

  23. 2004 Firefox IE 6

  24. 2008 css 2.0 Chrome

  25. 2010 html 5

  26. 2011 CSS 3.0 IE 6

  27. 2014

  28. linguagem retardada, armengada e desorganizada

  29. DIFÍCIL DE MANTER E ESCALAR

  30. Todo CSS começa bem mas você nunca sabe como vai

    terminar acabar
  31. COMEÇAR E CONTINUAR BEM

  32. organizado Legível Componentizado CSS

  33. COMO???

  34. calma…

  35. broken window

  36. disciplina

  37. bala de prata SMACSS OOCSS BEM DRY CSS CSS Guidelines

    GitHub CodePen Medium Trello SUIT CSS x
  38. Nome Email Mensagem Enviar <div id=“contato”>! ! <input id="nome" type=“text”>!

    <input id="email" type=“text">! <textarea id=“mensagem"></textarea>! <button>Enviar</button>! </div>
  39. Nome Email Mensagem Enviar #contact {! width: 500px;! padding: 10px;!

    background: #ccc;! border: 1px solid #999;! border-radius: 5px;! }! #contact input,! #contact textarea {! ! width: 100%;! ! border: 1px solid #999;! }! #contact button {! ! float: right;! ! padding: 5px;! ! border-radius: 5px;! ! background: green;! }
  40. OK Cuidado com os nomes Lorem ipsum dolor sit amet,

    consectetur adipiscing elit. Etiam ut sagittis diam. Ut tincidunt iaculis eleifend. Donec sed scelerisque erat? <div id=“warning”>! <h1>Cuidado com os nomes</h1>! <p>…</p>! <button>OK</button>! </div>
  41. #warning {! width: 400px;! padding: 10px;! background: #ccc;! border: 1px

    solid #999;! border-radius: 5px;! }! #warning h1 {! ! font-size: 14px;! ! font-weight: bold;! }! #warning button {! ! float: right;! ! padding: 5px;! ! border-radius: 5px;! ! background: blue;! } OK Cuidado com os nomes Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut sagittis diam. Ut tincidunt iaculis eleifend. Donec sed scelerisque erat?
  42. Nome Email Mensagem Enviar OK Cuidado com os nomes Lorem

    ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut sagittis diam. Ut tincidunt iaculis eleifend. Donec sed scelerisque erat?
  43. #contact {! width: 500px;! padding: 10px;! background: #ccc;! border: 1px

    solid #999;! border-radius: 5px;! }! #contact input, ! #contact textarea {! ! width: 100%;! ! border: 1px solid #999;! }! #contact button {! ! float: right;! ! padding: 5px;! ! border-radius: 5px;! ! background: green;! } #warning {! width: 400px;! padding: 10px;! background: #ccc;! border: 1px solid #999;! border-radius: 5px;! }! #warning h1 {! ! font-size: 14px;! ! font-weight: bold;! }! #warning button {! ! float: right;! ! padding: 5px;! ! border-radius: 5px;! ! background: blue;! }
  44. .box {! padding: 10px;! background: #ccc;! border: 1px solid #999;!

    border-radius: 5px;! }! ! .button {! float: right;! padding: 5px;! border-radius: 5px;! } #warning {! width: 400px;! }! #warning h1 {! font-size: 14px;! font-weight: bold;! }! #warning button {! background: blue;! }! ! #contact {! width: 500px;! }! #contact input, ! #contact textarea {! width: 100%;! border: 1px solid #999;! }! #contact button {! background: green;! }
  45. <div id="contact" class=“box”>! ! <input id="nome" type=“text”>! <input id="email" type=“text">!

    <textarea id=“mensagem"></textarea>! <button class="button">Enviar</button>! </div> <div id="warning" class=“box”>! <h1>Cuidado com os nomes</h1>! <p>…</p>! <button class="button">OK</button>! </div>
  46. .box {! padding: 10px;! background: #ccc;! border: 1px solid #999;!

    border-radius: 5px;! }! ! .button {! float: right;! padding: 5px;! border-radius: 5px;! } #warning {! width: 400px;! }! #warning h1 {! font-size: 14px;! font-weight: bold;! }! #warning button {! background: blue;! }! ! #contact {! width: 500px;! }! #contact input, ! #contact textarea {! width: 100%;! border: 1px solid #999;! }! #contact button {! background: green;! }
  47. None
  48. Definindo Padrões e regras Dona Norma

  49. .foo, .bar! {! padding:15px;! margin:0px 0px 15px;! box-shadow:0px 1px 2px

    #CCC;! background: #DDDDDD;! } .foo, ! .bar {! padding: 15px;! margin-bottom: 15px;! box-shadow: 0 1px 2px #ccc;! background: #ddd;! }
  50. use reset

  51. nunca use !important

  52. nunca use #id {…}

  53. não use element {…}

  54. cuidado com classes utilitárias

  55. .clear-float { clear: both; } <div class=“float-left"> <div style=“float: left”>

    .float-left { float: left; }! .mt-20 { margin-top: 20px; } .is-hide { display: none; }
  56. Preprocessor Pedindo Ajuda

  57. .bar {! color: #bada55;! background: #f00;! border: #bada55;! } @my-green:

    #bada55;! @my-red: #f00;! ! .bar {! color: @my-green;! background: @my-red;! border: @my-green;! }
  58. Modularize

  59. // General Dependencies! @import "mixins";! @import "variables";! ! // Base!

    @import "reset";! @import "layout";! ! // Components! @import "typography";! @import "forms";! @import "toolbox";! @import "buttons";! @import "modals";! @import "messages";! @import “badges";! ! // Areas! @import "header";! @import "footer";
  60. Use espaço e identação

  61. .foo {! width: 20px;! height: 150px;! } ! .foo .inner-foo

    {! width: 10px;! height: 10px;! } ! .bar {! width: 5px;! height: 5px;! border-radius: 50%;! } ! .bar .foo {! background: blue;! } .foo {! width: 20px;! height: 150px;! }! ! .foo .inner-foo {! width: 10px;! height: 10px;! }! ! ! .bar {! width: 5px;! height: 5px;! border-radius: 50%;! }! ! .bar .foo {! background: blue;! }
  62. .foo {! width: 20px;! height: 150px;! } ! .foo .inner-foo

    {! width: 10px;! height: 10px;! } ! .bar {! width: 5px;! height: 5px;! border-radius: 50%;! } ! .bar .foo {! background: blue;! } .foo {! width: 20px;! height: 150px;! }! ! .foo .inner-foo {! width: 10px;! height: 10px;! }! ! ! .bar {! width: 5px;! height: 5px;! border-radius: 50%;! }! ! .bar .foo {! background: blue;! }
  63. .foo {! width: 20px;! height: 150px;! } ! .foo .inner-foo

    {! width: 10px;! height: 10px;! } ! .bar {! width: 5px;! height: 5px;! border-radius: 50%;! } ! .bar .foo {! background: blue;! } .foo {! width: 20px;! height: 150px;! }! ! .foo .inner-foo {! width: 10px;! height: 10px;! }! ! ! .bar {! width: 5px;! height: 5px;! border-radius: 50%;! }! ! .bar .foo {! background: blue;! }
  64. <div class=“foo inner-foo box box-highlight“> <div class=“foo inner-foo box box-highlight“>

    <div class=“[ foo inner-foo ] [ box box-highlight ]“>
  65. <div class=“foo inner-foo box box-highlight“> <div class=“foo inner-foo box box-highlight“>

    <div class=“[ foo inner-foo ] [ box box-highlight ]“>
  66. <div class=“foo inner-foo box box-highlight“> <div class=“foo inner-foo box box-highlight“>

    <div class=“[ foo inner-foo ] [ box box-highlight ]“>
  67. Comente

  68. /**! * The site’s main page-head can have two different

    states:! *! * 1) Regular page-head with no backgrounds or extra treatments; it just! * contains the logo and nav.! * 2) A masthead that has a fluid-height (becoming fixed after a certain point)! * which has a large background image, and some supporting text.! *! * The regular page-head is incredibly simple, but the masthead version has some! * slightly intermingled dependency with the wrapper that lives inside it.! */
  69. /**! * 1. Default icon size is 16px.! * 2.

    Squash down the retina sprite to display ! * at the correct size.! */! ! .sprite {! width: 16px; /* [@1x] */! height: 16px; /* [@1x] */! background-image: url(/img/sprites/main.png);! }
  70. Dando um nome pro seu filho Tia Jamile

  71. .componentName .componentName-member .componentName-member--modifier .guardaRoupa .guardaRoupa-gaveta .guardaRoupa-gaveta--aberta .guardaRoupa-gaveta-puxador

  72. .baby {! width: 20px;! height: 150px;! background: white;! } .baby-head

    {! ! width: 10px;! ! height: 10px;! } .baby-head-eyes {! ! width: 5px;! ! height: 5px;! ! border-radius: 50%;! background: brown;! } .baby-head-eyes--blue {! ! ! background: blue;! }
  73. <div class=“baby”>! <div class=“baby-head”>! <div class=“baby-head-eyes baby-head-eyes--blue”>! </div>! </div>

  74. None
  75. .button {! ! padding: 10px 20px;! ! border-radius: 3px;! !

    background: #757575;! ! color: #fff;! ! font-size: 13px;! } .button--big {! ! padding: 15px 25px;! ! font-size: 15px;! } .button--small {! ! padding: 5px 10px;! ! font-size: 11px;! } .button--blue {! ! background: #008fed;! }! .button--green {! ! background: #79b439;! }! .button--yellow {! ! background: #ffb400;! }! .button--orange {! ! background: #fe8b00;! }! .button--red {! ! background: #ff5604;! }
  76. button--big button--small button--blue button--green button--yellow button--orange button--red button

  77. class=“button button--big button--blue“

  78. .button, .dropdown {! ! padding: 10px 20px;! ! border-radius: 3px;!

    ! background: #757575;! ! color: #fff;! ! font-size: 13px;! } .dropdown {! ! padding-right: 50px;! ! &:after {! ! ! content: " ";! ! }! } ^ .button {! ! padding: 10px 20px;! ! border-radius: 3px;! ! background: #757575;! ! color: #fff;! ! font-size: 13px;! }
  79. Escalável Reaproveitável Organizado Legível Manutenível Modularizado Padronizado Espaçado Identado Comentado

    Componentizado
  80. Não quebre janela

  81. Disciplina

  82. Obrigado! shankarcabus.com.br

  83. _github.com/shankarcabus/scalable-css-reading-list