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! Sem bala de prata, mas com chibatada!!!

1. CSS
pra gente grande

2. Shankar Cabus
www.shankarcabus.com.br

3. Shankar Cabus
de Teive
www.shankarcabus.com.br

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

5. JusBrasil

6. JusBrasil

7. css

8. CSS
pra gente pequena
Sobrinho

11. HTML
JAVASCRIPT
CSS

12. HTML
informação e estrutura
JAVASCRIPT
CSS

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

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

18. CSS
embeleza e
facilita o uso

20. CSS é simples

21. CSS é simples
de entender!

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

25. TUNEL
DO
TEMPO

26. TUNEL
DO
TEMPO

27. 2014

28. 65000000 a.c.
DINOSSÁUROS

29. 17-02-1987

30. 17-02-1987
Shankarzinho

31. 17-02-1987
Shankarzinho Isinha

32. 1988

33. 1989

34. 1989
Tim Berners-Lee

35. 1989
Tim Berners-Lee
Web

36. 1990
Tim Berners-Lee

37. 1990
HTML
Tim Berners-Lee

38. 1991
HTML 1.0

39. 1994

40. 1994
Seleção Brasileira

41. 1994
Seleção Brasileira
Tetra!!!

42. 1994
HTML 2.0
imagens

43. 1994
Håkon Lie

44. 1994
Håkon Lie
CSS

45. 1995
HTML 3.0
tabelas

46. 1995
HTML 3.0
tabelas
IE 1

47. 1996
CSS 1.0

48. 1996
CSS 1.0
IE 3

49. 1997
HTML 3.5

50. 1997
HTML 3.5
IE 4

51. 1999
HTML 4.0

52. 1999
HTML 4.0
IE 5

53. 2001
IE 6

54. 2004
Firefox

55. 2004
Firefox
IE 6

56. 2008
css 2.0

57. 2008
css 2.0
Chrome

58. 2010
html 5

59. 2011
CSS 3.0

60. 2011
CSS 3.0
IE 6

61. 2014

62. linguagem
retardada,
armengada
e desorganizada

63. DIFÍCIL DE
MANTER E ESCALAR

64. Todo CSS começa
bem mas você
nunca sabe como
vai terminar acabar

65. COMEÇAR E
CONTINUAR
BEM

66. CSS
organizado
Legível
Componentizado

67. COMO???

68. calma…

69. calma…

70. broken window

71. disciplina

72. Chibata

73. Chibata

74. Lei da Chibata

75. bala de prata

76. bala de prata
SMACSS
OOCSS
CSS Guidelines
BEM DRY CSS
Trello
GitHub
Medium
CodePen
SUIT CSS

77. SUIT CSS x
bala de prata
SMACSS
OOCSS
CSS Guidelines
BEM DRY CSS
Trello
GitHub
Medium
CodePen

78. <div id=“contato”>!
! <input id="nome" type=“text”>!
<input id="email" type=“text">!
<textarea id=“mensagem"></textarea>!
<button>Enviar</button>!
</div>
Nome
Email
Mensagem
Enviar

79. 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;!
}

80. OK
<div id=“warning”>!
<h1>Cuidado com os nomes</h1>!
<p>…</p>!
<button>OK</button>!
</div>
Cuidado com os nomes
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam ut sagittis diam. Ut tincidunt
iaculis eleifend. Donec sed scelerisque erat?

81. #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?

82. 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?

83. #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;!
}

84. .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;!
}

85. <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>

86. .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;!
}

90. Definindo
Padrões
e regras
Dona Norma

91. .foo, .bar!
{!
padding:15px;!
margin:0px 0px 15px;!
box-shadow:0px 1px 2px #CCC;!
background: #DDDDDD;!
}

92. .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;!
}

93. use
reset

94. nunca use
!important

95. nunca use
#id {…}

96. não use
element {…}

97. cuidado com
classes utilitárias

98. .clear-float { clear: both; }

99. .clear-float { clear: both; }
.is-hide { display: none; }

100. .clear-float { clear: both; }
.is-hide { display: none; }
.float-left { float: left; }!
.mt-20 { margin-top: 20px; }

101. .clear-float { clear: both; }
.is-hide { display: none; }
.float-left { float: left; }!
.mt-20 { margin-top: 20px; }
<div class=“float-left">
<div style=“float: left”>

102. Preprocessor
Pedindo
Ajuda

103. .bar {!
color: #bada55;!
background: #f00;!
border: #bada55;!
}

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

105. Modularize

106. // 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";

107. Use
espaço
e identação

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

109. .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;!
}

110. .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;!
}

111. .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;!
}

112. .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;!
}

113. <div class=“foo inner-foo box box-highlight“>

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

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

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

117. Comente

118. /**!
* 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.!
*/

119. /**!
* 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);!
}

120. Tia Jamile
Dando um
nome pro
seu filho

122. .componentName

123. .componentName
.guardaRoupa

124. .componentName
.guardaRoupa
.componentName-member

125. .componentName
.guardaRoupa
.componentName-member
.guardaRoupa-gaveta

126. .componentName
.guardaRoupa
.componentName-member
.guardaRoupa-gaveta
.guardaRoupa-gaveta-puxador

127. .componentName
.guardaRoupa
.componentName-member
.guardaRoupa-gaveta
.guardaRoupa-gaveta-puxador
.componentName-member--modifier

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

130. .baby {!
width: 20px;!
height: 150px;!
background: white;!
}

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

132. .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;!
}

133. .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;!
}

134. <div class=“baby”>!
<div class=“baby-head”>!
<div class=“baby-head-eyes baby-head-eyes--blue”>!
</div>!
</div>

137. .button {!
! padding: 10px 20px;!
! border-radius: 3px;!
! background: #757575;!
! color: #fff;!
! font-size: 13px;!
}

138. .button {!
! padding: 10px 20px;!
! border-radius: 3px;!
! background: #757575;!
! color: #fff;!
! font-size: 13px;!
}

139. .button {!
! padding: 10px 20px;!
! border-radius: 3px;!
! background: #757575;!
! color: #fff;!
! font-size: 13px;!
}
.button--big {!
! padding: 15px 25px;!
! font-size: 15px;!
}

140. .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;!
}

141. .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;!
}

142. button--big
button--small
button
button--blue
button--green
button--yellow
button--orange
button--red

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

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

148. .dropdown {!
! padding-right: 50px;!
! &:after {!
! ! content: " ";!
! }!
}
^

149. .button {!
! padding: 10px 20px;!
! border-radius: 3px;!
! background: #757575;!
! color: #fff;!
! font-size: 13px;!
}
.dropdown {!
! padding-right: 50px;!
! &:after {!
! ! content: " ";!
! }!
}
^

150. .button, .dropdown {!
! padding: 10px 20px;!
! border-radius: 3px;!
! background: #757575;!
! color: #fff;!
! font-size: 13px;!
}
.dropdown {!
! padding-right: 50px;!
! &:after {!
! ! content: " ";!
! }!
}
^

151. Manutenível

152. Manutenível
Escalável

153. Manutenível
Escalável
Organizado

154. Escalável
Organizado
Legível
Manutenível

155. Manutenível
Escalável
Organizado
Legível
Reaproveitável

156. Manutenível
Escalável
Organizado
Legível
Padronizado
Modularizado
Reaproveitável

157. Manutenível
Escalável
Organizado
Legível
Padronizado
Modularizado
Espaçado
Identado
Comentado
Reaproveitável

158. Manutenível
Escalável
Organizado
Legível
Padronizado
Modularizado
Espaçado
Identado
Comentado
Reaproveitável
Componentizado

159. Não quebre
janela

160. Disciplina

162. Chibaaaaaaaaata!!

163. Obrigado!
shankarcabus.com.br

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