CSS: Computer Style Science

Entre o surgimento da primeira linguagem de programação e o CSS existem quase quatro décadas de diferença. Nesse tempo surgiram diversos conceitos, como a programação funcional, imperativa e orientada a objetos.

Nessa palestra mostro como podemos aplicar os principais paradigmas da ciência da computação e o como eles podem nos auxiliar na hora de escrevermos CSS.

Transcript

1. CSS COMPUTER STYLE SCIENCE fernahh.com.br . { }
2. @fernahh fernahh.com.br
3. ContaAzul contaazul.com
5. why?
6. Antes de tudo, essa não é mais uma palestra sobre SMACSS, BEM ou DRYCSS.
7. Motivação O CSS e seu ecossistema sempre foram distantes da computação.
8. linguagem
9. linguagem comunidade
10. linguagem comunidade design
11. a linguagem.
12. 1959 FLOW-MATIC Primeira linguagem de programação semelhante ao idioma inglês (build for humans).
13. Grace Murray Hopper
14. Grace Murray Hopper - Criou o primeiro compilador
15. Grace Murray Hopper - Criou o primeiro compilador - Desenvolveu a Flow-Matic
16. Grace Murray Hopper - Criou o primeiro compilador - Desenvolveu a Flow-Matic - Criou o termo “bug”
17. 1959 C Linguagem imperativa e procedural. Foi criada para o desenvolvimento do Unix. 1972
18. 1959 SmallTalk É considerada a primeira linguagem orientada objetos. Foi um marco para sua época. 1972 1980
19. 1959 ...CSS 1972 1980 1996
20. 1959 ...CSS 1972 1980 1996 ~ 4 décadas!
21. “Designing simple style sheets is easy. One needs only to know a little HTML and some basic desktop publishing terminology. E.g., to set the text color of 'H1' elements to blue, one can say: H1 { color: blue }; The example is a simple CSS rule”
22. “Designing simple style sheets is easy. One needs only to know a little HTML and some basic desktop publishing terminology. E.g., to set the text color of 'H1' elements to blue, one can say: H1 { color: blue }; The example is a simple CSS rule”
23. A simplicidade do CSS foi decisiva para o seu sucesso.
24. a comunidade.
25. Designers Em 2013, representavam ~16,8% dos profissionais que trabalhavam com web no Brasil.
26. Comunidade jovem ~76% dos profissionais tem menos de 30 anos, sendo que quase metade tem menos de 25 anos!
27. Experiência back-end Apenas ~23% tem back-end como atuação principal juntamente com front-end. http://tableless.com.br/resultados-do-survey-2015/
28. Fragmentação Além de já ser uma comunidade bastante específica, estamos nos dividindo entre “ui developers” e “javascript developers”.
29. o design.
30. O piloto. Graças a evolução do design que o CSS evoluiu. As features do CSS3 vieram de demandas do design.
31. linguagem comunidade design
32. linguagem comunidade design javascript
33. HTML
34. HTML CSS
35. HTML CSS JavaScript
36. JavaScript CSS HTML
37. O JavaScript se tornou o principal pilar da web. Além de comportamento, ele entrega conteúdo e (algumas vezes) é responsável pelo estilo de uma página web.
38. O mercado mudou. A web agora é uma ótima plataforma para aplicações complexas.
39. Documentos Grupo de páginas que seguem o mesmo padrão de comportamento e estilo.
40. /home
41. /home /products
42. /home /products /product/1
43. Aplicações Ao invés de várias páginas, geralmente é apenas uma com estados diferentes.
44. /signup
45. /signup /step/1
46. /signup /step/1 /step/2
47. A ciência. Aprender boas práticas e paradigmas nos ajudam a evitar cenários caóticos.
48. paradigmas != metodologias (BEM, SMACSS, DRYCSS, …)
49. Apesar de ser uma linguagem declarativa, CSS também pode atender a outros paradigmas computacionais.
50. Paradigma Imperativo Baseado em uma sequência de comandos que determinam como o computador vai executar uma tarefa.
51. Uma das principais características do paradigma imperativo é a sua relação com linguagens procedurais.
52. html { font-family: sans-serif; line-height: 1.15; } body { margin: 0; } article, aside, footer, header, section { display: block; } h1 { font-size: 2em; margin: 0.67em 0; }
53. html { font-family: sans-serif; line-height: 1.15; } body { margin: 0; } article, aside, footer, header, section { display: block; } h1 { font-size: 2em; margin: 0.67em 0; }
54. html { font-family: sans-serif; line-height: 1.15; } body { margin: 0; } article, aside, footer, header, section { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } normalize.css 461 linhas. (com comentários)
55. /* ========================== Section comment block ========================== */ /* Sub-section comment block ========================== */ /** * Short description using * Doxygen-style comment format * * The first sentence of the long * description starts here and * continues on this * line for a while finally concluding * here at the end of this paragraph. * */ /* Basic comment */ idiomatic-css https://github.com/necolas/idiomatic-css
56. Outra característica forte do paradigma imperativo é permitir que o desenvolvedor controle o fluxo de execução.
57. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
58. body { color: green; } Lorem ipsum dolor sit amet, consectetur adipisicing elit.
59. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Brand
60. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Brand header { color: white !important; }
61. Caos! CSS sempre foi conhecido por ser difícil de escalar e dar manutenção.
62. Além do caos e todos, vieram piadas que já perderam graça há mais de 5 anos…
63. Além do caos e todos, vieram piadas que já perderam graça há mais de 5 anos…
64. DRY Cada parte de um sistema deve ter uma representação única e livre de ambiguidades.
65. representação única.
66. .Header { background: #ffffff; } .Article { background: #ffffff; } .Footer { background: #ffffff; }
67. .Header { background: #ffffff; } .Article { background: #ffffff; } .Footer { background: #ffffff; }
68. .Header { background: #ffffff; } .Article { background: #ffffff; } .Footer { background: #ffffff; } .Header, .Article, .Footer { background: #ffffff; }
69. livre de ambiguidades.
70. .b { } botão?
71. botão? bold? .b { }
72. botão? bold? “uma bola” .b { }
73. Metodologias de escrita como SMACSS e BEM buscam resolver problemas com seletores ambíguos.
74. .Button { /*...*/ } .Button__Anchor_icon { /*...*/ } .Button--danger { /*...*/ } BEM Block. Element. Modifier.
75. .Button { /*...*/ } .Button__Anchor_icon { /*...*/ } .Button--danger { /*...*/ } BEM Block. Element. Modifier. bloco
76. .Button { /*...*/ } .Button__Anchor_icon { /*...*/ } .Button--danger { /*...*/ } BEM Block. Element. Modifier. elemento
77. .Button { /*...*/ } .Button__Anchor_icon { /*...*/ } .Button--danger { /*...*/ } BEM Block. Element. Modifier. modificador
78. .comment-box { /*...*/ } .comment-box.is-open { /*...*/ } .button-black { /*...*/ } SMACSS Scalable and Modular Architecture for CSS.
79. .comment-box { /*...*/ } .comment-box.is-open { /*...*/ } .button-black { /*...*/ } SMACSS Scalable and Modular Architecture for CSS. módulo
80. .comment-box { /*...*/ } .comment-box.is-open { /*...*/ } .button-black { /*...*/ } SMACSS Scalable and Modular Architecture for CSS. estado
81. .comment-box { /*...*/ } .comment-box.is-open { /*...*/ } .button-black { /*...*/ } SMACSS Scalable and Modular Architecture for CSS. tema
82. Metodologias tiveram um papel importante na evolução de como escrevemos CSS, mas elas são facilmente violáveis.
83. A era dos pré-processadores. Less, Sass e Stylus foram decisivos para a evolução da web e do CSS.
84. Variáveis. Exemplo no SCSS. $bgColor: #ffffff; .Header { background: $bgColor; } .Article { background: $bgColor; } .Footer { background: $bgColor; }
85. :root { --bgColor: #ffffff; } .Header { background: var(--bgColor); } .Article { background: var(--bgColor); } .Footer { background: var(--bgColor); } Custom Properties. “Variáveis” nativas do CSS.
86. .Notification--warning { font-size: 2em; font-weight: bold; } .Notification--danger { font-size: 2em; font-weight: bold; } .Notification--success { font-size: 2em; font-weight: bold; }
87. .Notification--warning { font-size: 2em; font-weight: bold; } .Notification--danger { font-size: 2em; font-weight: bold; } .Notification--success { font-size: 2em; font-weight: bold; }
88. @mixin notification { font-size: 2em; font-weight: bold; }; .Notification--warning { @extend notification(); } .Article { @extend notification(); } .Footer { @extend notification(); } Mixins. Exemplo no SCSS.
89. :root { --notification: { font-size: 2em; font-weight: bold; }; } .Notification--warning { @apply --notification; } .Article { @apply --notification; } .Footer { @apply --notification; } @apply rule. “Mixin” nativo do CSS.
90. :root { --notification: { font-size: 2em; font-weight: bold; }; } .Notification--warning { @apply --notification; } .Article { @apply --notification; } .Footer { @apply --notification; } @apply rule. “Mixin” nativo do CSS. custom property
91. Apesar de úteis, os pré-processadores possuem um problema que vários softwares tiveram: estrutura monolítica.
92. monolito
93. monolito microserviços
94. Além de problemas de escalabilidade, estruturas monolíticas exigem um grande conhecimento da base de código.
95. A era dos pós-processadores. Pós-processar o CSS nos permite contribuir com a evolução da comunidade.
96. PostCSS
97. PostCSS linter
98. PostCSS linter autoprefixer
99. PostCSS linter autoprefixer transpiler
100. PostCSS linter autoprefixer transpiler .{ }
101. PostCSS linter autoprefixer transpiler .{ }
102. PostCSS linter autoprefixer transpiler .{ }
103. PostCSS é a crista da onda. Possui mais de 200 plugins, é bem aceito pela comunidade e future proof!
104. A era pós CSS3. A evolução das specs CSS estão rápidas e próximas dos approaches.
105. Orientação a Objetos Possui classes que definem objetos de um sistema. Cada uma dessas especifica o comportamento e estados de seus objetos e o relacionamento com outros objetos.
106. OOCSS foi importante para a sua época. Porém, desde 2011 não há mais atualizações em sua especificação.
107. O paradigma de Orientação a Objetos não se limita a implementação sugerida pelo OOCSS.
108. S.O.L.I.D. Cada letra representa um princípio da Orientação a Objetos que nos ajuda a manter um código saudável.
109. Single Responsibility Principle: diz que todas nossas abstrações devem ter uma única responsabilidade.
110. .Button--disabled { display: flex; max-width: 320em; background: red; }
111. .Button--disabled { display: flex; max-width: 320em; background: red; } box-model
112. .Button--disabled { display: flex; max-width: 320em; background: red; } estilo
113. .Button { display: flex; max-width: 320em; } .Button--disabled { display: flex; max-width: 320em; background: red; } box-model
114. .Button { display: flex; max-width: 320em; } .Danger { background: red; } .Button--disabled { display: flex; max-width: 320em; background: red; } estilos
115. Open Closed Principle: quando você tem uma abstração, ao invés de modificá-la, permita que ela possa ser estendida ou usada para compor algo.
116. Se uma abstração não é sua, não modifique-a!
117. Muitos projetos ainda usam Bootstrap v2.x por conta das “personalizações” nos componentes do framework.
118. O @extend do Sass foi um grande vilão de projetos que estendem classes de frameworks CSS.
119. .btn { display: block; /*...*/ } .btn-login { @extend .btn; }
120. .btn { display: block; /*...*/ } .btn-login { @extend .btn; }
121. .btn { display: block; /*...*/ } .btn-login { @extend .btn; } .btn, .btn-login { display: block; /*...*/ }
122. .btn { display: block; /*...*/ } .btn-login { @extend .btn; } .header .btn { background: red; /*...*/ }
123. .btn { display: block; /*...*/ } .btn-login { @extend .btn; }; .header .btn { background: red; /*...*/ };
124. .btn { display: block; /*...*/ }; .btn-login { @extend .btn; } .header .btn { background: red; /*...*/ }
125. .btn { display: block; /*...*/ } .btn-login { @extend .btn; } .header .btn { background: red; /*...*/ } .btn, .btn-login { display: block; /*...*/ } .header .btn, .header .btn-login { background: red; /*...*/ }
126. Dica de ouro: se for usar @extend no Sass, evite usar classes, vá de placeholders.
127. Herança. Usada para reaproveitamento de código. A ideia é simples: objetos compartilharem propriedades.
128. :root { --notification: { font-size: 2em; font-weight: bold; }; } .Notification--warning { @apply --notification; } .Article { @apply --notification; } .Footer { @apply --notification; } herança com @apply rule.
129. É importante utilizar herança para melhorar a expressividade de seu código.
130. .Card::before { content: ''; /*...*/ }
131. .Card::before { content: ''; /*...*/ }
132. :root { --fold: { /*...*/ } } .Card::before { @apply --fold; }
133. :root { --fold: { /*...*/ } } .Card::before { @apply --fold; } Lorem ipsum dolor sit amet, consectetur adipisicing elit.
134. Lembre-se: custom properties funcionam da mesma forma que as outras, ou seja, são manipuladas pelo efeito cascata.
135. Programação Funcional É inspirado em funções matemáticas, ou seja, dado uma entrada você terá sempre a mesma saída. O paradigma funcional busca manter qualquer valor imutável.
136. Composição: Assim como você compõe pequenas funções, você pode compor pequenas classes.
137. “O melhor approach para escrever CSS é escrever o menos CSS possível.”
138. EXCLUIR
139. <button class="Button--danger"></button> EXCLUIR
140. <button class="Button--danger"></button> EXCLUIR
141. <button class="Button--danger"></button> <button class="bg-red white rounded"></button> EXCLUIR
142. O caso .size-flex.
143. Precisávamos de uma classe que colocasse 100% de largura em botões. But, não tínhamos botões flexíveis componentizado...
146. Hoje essa classe é usada em 58 arquivos HTML, e aparece 110 vezes.
147. Classes enxutas são amor, deixei seu preconceito de lado.
148. Imutabilidade: nos dá uma das coisas mais difíceis de se ter em CSS: confiança de que o que você escrever é o que vai ser renderizado.
149. .no-text-transform { text-transform: none !important; } .no-padding-bottom { padding-bottom: 0 !important; } .no-padding-top { padding-top: 0 !important; } Uma das formas de garantirmos a imutabilidade de uma classe é usando !important.
150. immutablecss.com
151. tachyons.io
152. funkcss.com
153. Além de evitar o problema com especificidade, CSS funcional te faz pensar melhor em componentes.
154. CSS Funcional é legal pela simplicidade.
155. Orientação a Objetos faz sentido em ambientes extremamente controlados.
156. Escolha uma abordagem em que você escreva cada vez menos CSS.
157. Mantenha sua stack simples e plugável.
158. Busque sempre estudar paradigmas.
159. Exclua CSS, isso evita que seu código apodreça.
160. O CSS pode ser seu melhor amigo. Faça projetos incríveis.
161. obrigado! @fernahh fernahh.com.br