Antes de tudo, essa não é mais uma
palestra sobre SMACSS, BEM ou
DRYCSS.
Slide 7
Slide 7 text
Motivação
O CSS e seu ecossistema
sempre foram distantes da
computação.
Slide 8
Slide 8 text
linguagem
Slide 9
Slide 9 text
linguagem
comunidade
Slide 10
Slide 10 text
linguagem
comunidade design
Slide 11
Slide 11 text
a linguagem.
Slide 12
Slide 12 text
1959
FLOW-MATIC
Primeira linguagem de programação semelhante ao idioma
inglês (build for humans).
Slide 13
Slide 13 text
Grace Murray Hopper
Slide 14
Slide 14 text
Grace Murray Hopper
- Criou o primeiro compilador
Slide 15
Slide 15 text
Grace Murray Hopper
- Criou o primeiro compilador
- Desenvolveu a Flow-Matic
Slide 16
Slide 16 text
Grace Murray Hopper
- Criou o primeiro compilador
- Desenvolveu a Flow-Matic
- Criou o termo “bug”
Slide 17
Slide 17 text
1959
C
Linguagem imperativa e procedural. Foi criada para o
desenvolvimento do Unix.
1972
Slide 18
Slide 18 text
1959
SmallTalk
É considerada a primeira linguagem orientada objetos. Foi
um marco para sua época.
1972 1980
Slide 19
Slide 19 text
1959
...CSS
1972 1980 1996
Slide 20
Slide 20 text
1959
...CSS
1972 1980 1996
~ 4 décadas!
Slide 21
Slide 21 text
“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”
Slide 22
Slide 22 text
“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”
Slide 23
Slide 23 text
A simplicidade do CSS foi
decisiva para o seu
sucesso.
Slide 24
Slide 24 text
a comunidade.
Slide 25
Slide 25 text
Designers
Em 2013, representavam ~16,8% dos profissionais que
trabalhavam com web no Brasil.
Slide 26
Slide 26 text
Comunidade jovem
~76% dos profissionais tem menos de 30 anos,
sendo que quase metade tem menos de 25 anos!
Slide 27
Slide 27 text
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/
Slide 28
Slide 28 text
Fragmentação
Além de já ser uma comunidade bastante específica,
estamos nos dividindo entre “ui developers” e
“javascript developers”.
Slide 29
Slide 29 text
o design.
Slide 30
Slide 30 text
O piloto.
Graças a evolução do design que o CSS evoluiu. As
features do CSS3 vieram de demandas do design.
Slide 31
Slide 31 text
linguagem
comunidade design
Slide 32
Slide 32 text
linguagem
comunidade design
javascript
Slide 33
Slide 33 text
HTML
Slide 34
Slide 34 text
HTML
CSS
Slide 35
Slide 35 text
HTML
CSS
JavaScript
Slide 36
Slide 36 text
JavaScript
CSS
HTML
Slide 37
Slide 37 text
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.
Slide 38
Slide 38 text
O mercado mudou.
A web agora é uma ótima
plataforma para aplicações
complexas.
Slide 39
Slide 39 text
Documentos
Grupo de páginas que
seguem o mesmo padrão de
comportamento e estilo.
Slide 40
Slide 40 text
/home
Slide 41
Slide 41 text
/home /products
Slide 42
Slide 42 text
/home /products /product/1
Slide 43
Slide 43 text
Aplicações
Ao invés de várias páginas,
geralmente é apenas uma com
estados diferentes.
Slide 44
Slide 44 text
/signup
Slide 45
Slide 45 text
/signup /step/1
Slide 46
Slide 46 text
/signup /step/1 /step/2
Slide 47
Slide 47 text
A ciência.
Aprender boas práticas e
paradigmas nos ajudam a
evitar cenários caóticos.
/* ==========================
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
Slide 56
Slide 56 text
Outra característica forte do paradigma
imperativo é permitir que o
desenvolvedor controle o fluxo de
execução.
Slide 57
Slide 57 text
Lorem ipsum
dolor sit amet,
consectetur
adipisicing
elit.
Slide 58
Slide 58 text
body {
color: green;
}
Lorem ipsum
dolor sit amet,
consectetur
adipisicing
elit.
Slide 59
Slide 59 text
Lorem ipsum
dolor sit amet,
consectetur
adipisicing
elit.
Brand
Slide 60
Slide 60 text
Lorem ipsum
dolor sit amet,
consectetur
adipisicing
elit.
Brand
header {
color: white !important;
}
Slide 61
Slide 61 text
Caos!
CSS sempre foi conhecido
por ser difícil de escalar e
dar manutenção.
Slide 62
Slide 62 text
Além do caos e todos, vieram piadas
que já perderam graça há mais de 5
anos…
Slide 63
Slide 63 text
Além do caos e todos, vieram piadas
que já perderam graça há mais de 5
anos…
Slide 64
Slide 64 text
DRY
Cada parte de um sistema deve ter uma
representação única e livre de ambiguidades.
Apesar de úteis, os pré-processadores
possuem um problema que vários
softwares tiveram: estrutura monolítica.
Slide 92
Slide 92 text
monolito
Slide 93
Slide 93 text
monolito microserviços
Slide 94
Slide 94 text
Além de problemas de escalabilidade,
estruturas monolíticas exigem um
grande conhecimento da base de
código.
Slide 95
Slide 95 text
A era dos pós-processadores.
Pós-processar o CSS nos
permite contribuir com a
evolução da comunidade.
Slide 96
Slide 96 text
PostCSS
Slide 97
Slide 97 text
PostCSS
linter
Slide 98
Slide 98 text
PostCSS
linter
autoprefixer
Slide 99
Slide 99 text
PostCSS
linter
autoprefixer
transpiler
Slide 100
Slide 100 text
PostCSS
linter
autoprefixer
transpiler
.{ }
Slide 101
Slide 101 text
PostCSS
linter
autoprefixer
transpiler
.{ }
Slide 102
Slide 102 text
PostCSS
linter
autoprefixer
transpiler
.{ }
Slide 103
Slide 103 text
PostCSS é a crista da onda. Possui mais
de 200 plugins, é bem aceito pela
comunidade e future proof!
Slide 104
Slide 104 text
A era pós CSS3.
A evolução das specs CSS
estão rápidas e próximas
dos approaches.
Slide 105
Slide 105 text
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.
Slide 106
Slide 106 text
OOCSS foi importante para a sua época.
Porém, desde 2011 não há mais
atualizações em sua especificação.
Slide 107
Slide 107 text
O paradigma de Orientação a Objetos
não se limita a implementação sugerida
pelo OOCSS.
Slide 108
Slide 108 text
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.
Slide 109
Slide 109 text
Single Responsibility Principle: diz que
todas nossas abstrações devem ter uma
única responsabilidade.
:root {
--fold: {
/*...*/
}
}
.Card::before {
@apply --fold;
}
Lorem ipsum
dolor sit amet,
consectetur
adipisicing
elit.
Slide 134
Slide 134 text
Lembre-se: custom properties funcionam
da mesma forma que as outras, ou seja,
são manipuladas pelo efeito cascata.
Slide 135
Slide 135 text
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.
Slide 136
Slide 136 text
Composição: Assim como você compõe
pequenas funções, você pode compor
pequenas classes.
Slide 137
Slide 137 text
“O melhor approach para escrever CSS
é escrever o menos CSS possível.”
Slide 138
Slide 138 text
EXCLUIR
Slide 139
Slide 139 text
EXCLUIR
Slide 140
Slide 140 text
EXCLUIR
Slide 141
Slide 141 text
EXCLUIR
Slide 142
Slide 142 text
O caso .size-flex.
Slide 143
Slide 143 text
Precisávamos de uma classe que
colocasse 100% de largura em botões.
But, não tínhamos botões flexíveis
componentizado...
Slide 144
Slide 144 text
No content
Slide 145
Slide 145 text
No content
Slide 146
Slide 146 text
Hoje essa classe é usada em 58
arquivos HTML, e aparece 110 vezes.
Slide 147
Slide 147 text
Classes enxutas são amor, deixei seu
preconceito de lado.
Slide 148
Slide 148 text
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.
Slide 149
Slide 149 text
.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.
Slide 150
Slide 150 text
immutablecss.com
Slide 151
Slide 151 text
tachyons.io
Slide 152
Slide 152 text
funkcss.com
Slide 153
Slide 153 text
Além de evitar o problema com
especificidade, CSS funcional te faz pensar
melhor em componentes.
Slide 154
Slide 154 text
CSS Funcional é legal pela
simplicidade.
Slide 155
Slide 155 text
Orientação a Objetos faz
sentido em ambientes
extremamente controlados.
Slide 156
Slide 156 text
Escolha uma abordagem em
que você escreva cada vez
menos CSS.
Slide 157
Slide 157 text
Mantenha sua stack simples e
plugável.
Slide 158
Slide 158 text
Busque sempre estudar
paradigmas.
Slide 159
Slide 159 text
Exclua CSS, isso evita que seu
código apodreça.
Slide 160
Slide 160 text
O CSS pode ser seu melhor
amigo. Faça projetos incríveis.