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!

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
9. CSS embeleza e facilita o uso
10. CSS é simples de entender! mas difícil de usar e manter!
11. TUNEL DO TEMPO
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
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;! }
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>
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