Slide 1
Slide 1 text
Organizando scripts
e styles sem perder a
sanidade
Slide 2
Slide 2 text
Anderson Nascimento
@theandersonn
Slide 3
Slide 3 text
Por que?
Slide 4
Slide 4 text
❏ Diminuir a quantidade de requests;
❏ Facilitar o entendimento do código;
❏ Facilitar a reutilização de trechos em comum;
❏ Facilitar a manutenção;
❏ Melhorar o fluxo do trabalho em equipe.
Por que?
Slide 5
Slide 5 text
Enxugando o carregamento de scripts do
plugin Contact Form 7
Slide 6
Slide 6 text
Carregamento inteligente com a função enqueue
Slide 7
Slide 7 text
Reutilizando trechos de código
// the default loop
// slider products
// pagination html
// header menu html
Slide 8
Slide 8 text
CSS Orientado a objetos (OOCSS)
Simplificando… O objetivo desta metodologia é evitar a repetição de código
Soluções propostas:
❏ Modular;
❏ Poucas requisições HTTP;
❏ Manutenível, semântico e padronizado.
Slide 9
Slide 9 text
CSS Orientado a objetos (OOCSS)
Os 2 princípios mais importantes são:
❏ Separar estrutura e skin;
❏ Separar contêiner e conteúdo.
Slide 10
Slide 10 text
OOCSS, SMACSS, BEM,
DRY CSS, SUIT CSS,
ATOMIC DESIGN, RSCSS
Metodologias
Slide 11
Slide 11 text
Escolher um pré processador -> ou não :( |o| \o/
SASS, LESS,
STYLUS
Pré processadores CSS
Slide 12
Slide 12 text
O que esses caras podem fazer por mim?
❏ Utilizar variáveis;
❏ Utilizar mixins;
❏ Usar funções;
❏ Aninhamento de regras;
❏ Operações aritméticas;
❏ Estender classes com heranças.
CSS com super poderes!
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Task runner [?][!]
São ferramentas que se destinam a automatizar tarefas rotineiras que devem
acontecer em determinados momento do desenvolvimento.
❏ Compilação do SASS para CSS;
❏ Concatenação e minificação de CSS e JS;
❏ Minificação de imagens;
❏ Etc...
2 tasks runners amplamente utilizados
❏ Grunt
❏ Gulp
Slide 15
Slide 15 text
Categorização e
organização do assets
js
sass
images
Slide 16
Slide 16 text
“Never let the fear of striking out keep
you from playing the game”
Babe Ruth
Slide 17
Slide 17 text
Obrigado!
@theandersonn