Antes de aplicar qualquer metodologia de escrita ou
usar outra tecnologia, primeiro precisamos entender
princípios básicos de CSS.
Slide 55
Slide 55 text
PRINCÍPIOS BÁSICOS DE CSS
Slide 56
Slide 56 text
PRINCÍPIOS BÁSICOS DE CSS
Especificidade
Slide 57
Slide 57 text
PRINCÍPIOS BÁSICOS DE CSS
Especificidade Efeito Cascata
Slide 58
Slide 58 text
PRINCÍPIOS BÁSICOS DE CSS
Especificidade Efeito Cascata Herança
Slide 59
Slide 59 text
A ESPECIFICIDADE
CSS
Slide 60
Slide 60 text
A ESPECIFICIDADE
CSS
2
3
1
Slide 61
Slide 61 text
A ESPECIFICIDADE
CSS
2
3
1 !IMPORTANT
Slide 62
Slide 62 text
A ESPECIFICIDADE
Especificidade de seletores
- CSS inline: 1000 pontos;
- ID: 100 pontos;
- Classes, pseudo-elementos e atributos: 10 pontos;
- Elementos: 1 ponto.
Slide 63
Slide 63 text
Sempre que você usa !important,
você quebra a especificidade.
Slide 64
Slide 64 text
EFEITO CASCATA
Técnica utilizada para definir o estilo a um seletor mesmo em caso de
conflitos.
O coração do CSS
Slide 65
Slide 65 text
EFEITO CASCATA
Definindo o peso de uma regra
- Importância;
- Origem;
- Especificidade;
- Ordem da declaração.
Slide 66
Slide 66 text
HERANÇA
Herença? OO?
Assim como você herda métodos e atributos de objetos, no CSS você herda
as regras de um elemento pai.
Slide 67
Slide 67 text
/*
* Todo o conteúdo textual do documento
* terá 16px de tamanho, pois herdam do
* `body`.
*/
body {
font-size: 16px;
}
Slide 68
Slide 68 text
HERANÇA
height, width, margin, padding
Propriedades que se referem ao box-model não aceitam herança, porém
podemos forçar com o valor inherit.
Slide 69
Slide 69 text
Super poderes para o CSS
Pré-processadores deram super poderes para desenvolvedores escreverem
CSS. Em nosso contexto, @extend e mixins nos trazem benefícios, mas que
devem ser usados com bastante cautela.
Slide 70
Slide 70 text
@extend
Permite estender placeholders e classes, porém, muitos autores
desencorajam a usar esse recurso.
Concatenação de classes
O uso de composição/concatenação de classes é muito usado em
frameworks de CSS. O popular Bootstrap faz bastante uso dessa
abordagem.
Revisando:
Problemas comuns com CSS
Especificidade
Slide 90
Slide 90 text
Revisando:
Problemas comuns com CSS
Especificidade
Efeito Cascata
Slide 91
Slide 91 text
Revisando:
Problemas comuns com CSS
Especificidade
Efeito Cascata
Herança
Slide 92
Slide 92 text
A melhor forma de resolver problemas com CSS é
dividir para conquistar, ou seja:
Criar componentes!
Slide 93
Slide 93 text
Componentes devem ser
auto-suficientes, capazes de
encapsular funcionalidades,
permitir uma API de acesso.
Componente
Slide 94
Slide 94 text
Componentes devem ser
auto-suficientes, capazes de
encapsular funcionalidades,
permitir uma API de acesso.
Componente
RequiredInterface
Slide 95
Slide 95 text
Componentes devem ser
auto-suficientes, capazes de
encapsular funcionalidades,
permitir uma API de acesso.
Componente
ProvidedInterface
ProvidedInterface
RequiredInterface
Slide 96
Slide 96 text
Componentes JS X Componentes CSS
Lembre-se: o conceito de componentes CSS é diferente
dos componentes JavaSscript.
Slide 97
Slide 97 text
React é uma das melhores
(quiça a melhor) bibliotecas
que lidam com estado de
componentes.
Slide 98
Slide 98 text
VirtualDOM
Trata-se de uma árvore JavaScript composta por
componentes e elementos React.
Slide 99
Slide 99 text
VirtualDOM
Slide 100
Slide 100 text
VirtualDOM
Slide 101
Slide 101 text
VirtualDOM
this.setState();
Slide 102
Slide 102 text
VirtualDOM
Slide 103
Slide 103 text
React Components > Inline Styles
Inline Styles é uma forma de especificar estilos para
um componente através de um objeto, onde a chave
é a representação de uma regra em camelCase e
seu valor é o valor do estilo.
Inline Styles good parts
- É uma forma de isolar regras (no global scope);
- Mais facilidade pra lidar com estados;
- Faz todo sentido quando lidamos com visualização de dados.
Slide 107
Slide 107 text
- Não é cacheável;
- Depende 100% de JavaScript;
- Difícil de ter controle em relação a cascata e herança.
Inline Styles bad parts
Slide 108
Slide 108 text
CSS Modules nada mais é
que um arquivo de CSS
com escopo local.
https://github.com/css-modules/css-modules
“Se você pudesse resumir
CSS Modules em uma frase,
qual seria?”
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
1º
GET /index.html
CSS Modules > Dependências > HTTP2 Server Push
Slide 118
Slide 118 text
1º
GET /index.html
index.html
CSS Modules > Dependências > HTTP2 Server Push
Slide 119
Slide 119 text
1º
GET /index.html
index.html
CSS Modules > Dependências > HTTP2 Server Push
Slide 120
Slide 120 text
1º
GET /index.html
colors.css
button.css
index.html
CSS Modules > Dependências > HTTP2 Server Push
Slide 121
Slide 121 text
CSS Modules good parts
- É possível lidar com escopo local;
- Fácil de lidar com estados;
- Possui uma API de importação e exportação de regras;
- Possui integração com Módulos JavaScript <3.
Slide 122
Slide 122 text
- Depende de tarefas de build;
CSS Modules bad parts
- É uma tecnologia nova e com futuro incerto.
Slide 123
Slide 123 text
Um dica: use mais recursos nativos
do browser do que soluções
baseadas em JavaScript.
Slide 124
Slide 124 text
Vanilla Components CSS > BEM
Slide 125
Slide 125 text
Abrir
Slide 126
Slide 126 text
Abrir
bloco
Slide 127
Slide 127 text
Abrir
bloco
elemento
Slide 128
Slide 128 text
Fechar
bloco
Slide 129
Slide 129 text
Fechar
bloco
modificador
Slide 130
Slide 130 text
Vanilla Components CSS > SMACSS
Slide 131
Slide 131 text
Vanilla Components CSS > SMACSS
Foi criado para resolver os problemas do Yahoo Mail.
É dividido em base, layout, module, state. Não é
apenas um sistema de escrita, é uma metodologia.
Slide 132
Slide 132 text
...
Comentar
módulo
Slide 133
Slide 133 text
...
Comentar
módulo módulo com estado
Slide 134
Slide 134 text
...
Comentar
módulo módulo com estado
tema
Slide 135
Slide 135 text
Vanilla CSS good parts
- A curva de aprendizado é fácil;
- Dependência zero de outas ferramentas;
- Já usado e validado por grandes produtos.
Slide 136
Slide 136 text
- Não resolve o problema com escopo global de seletores.
- É custoso de manter e fácil de ser violado;
Vanilla CSS bad parts
Slide 137
Slide 137 text
OH: se pós-processarmos nosso CSS, podemos usar
features do futuro!