O que não te contaram sobre pré-processadores

É indiscutível o quanto é essencial o uso de pré-processadores de CSS hoje em dia. Além de prover várias funcionalidades que o CSS não tem por padrão (variáveis, funções, etc.) os pré-processadores trazem novas formas de organizar e estruturar as classes e propriedades. Mas e a parte ruim disso? Como evitar os problemas que eles podem trazer é a temática dessa palestra.

Transcript

1. O QUE NÃO TE CONTARAM SOBRE PRÉ-PROCESSADORES
2. @eduardojmatos eduardomatos.me OI, EU SOU O EDU
3. Soluções de comunicação que aproximam médicos e pacientes
4. PRIMEIRAMENTE ESSA PALESTRA NÃO É uma apologia sobre o uso ou não uso de pré-processadores a única e absoluta opinião sobre pré-processadores
5. PRÉ-PROCESSADORES SÃO LEGAIS • tem variáveis; • tem mixins; • tem operações; • tem nested properties; • tem functions; • tem expressões;
6. A MAIORIA DE NÓS JÁ USA EM PRATICAMENTE TODOS OS PROJETOS
8. EXISTEM MUITOS FRAMEWORKS
9. TODOS ❤ PRÉ-PROCESSADORES
11. MAS E AÍ? O QUE ESTÃO ME ESCONDENDO?
12. TOOLING
13. lessc styles.less styles.css npm install -g less sudo apt-get install --yes nodejs brew install node OSX ruby -e "$(curl -fsSL https:// raw.githubusercontent.com/Homebrew/install/ master/install)" Linux (Ubuntu)
14. sass style.scss OSX gem install sass / Linux (Ubuntu)
16. OK, EU SOU DEV!
17. MAS E OS OUTROS DO TIME?
18. http://csspre.com/compile/
19. CSS OUTPUT
20. .box { background: #eee; border: 1px solid #ccc; .heading { font-size: 2em; } } .box2 { @extend .box; padding: 10px; }
21. .box, .box2 { background: #eee; border: 1px solid #ccc; } .box .heading, .box2 .heading { font-size: 2em; } .box2 { padding: 10px; }
23. @include rounded(false, 9px, false, 9px) @include roundcorners((top-right, bottom-left), 9px); @include linear-gradient(to right, magenta, red, orange, yellow, green, blue, purple);
25. @import "compass"; .btn { @include opacity(.5); }
26. ABRA O OLHO PRO OUTPUT!
27. ABSTRAÇÃO EXCESSIVA
30. COMPILATION TIME
31. 3 min de compilação
32. VERSIONAMENTO DO ARQUIVO COMPILADO • sim?
 Precisa sempre garantir que, quando um outro developer alterar algo, precisa compilar (resolvemos isso com um `watch`); • não?
 precisa ter uma rotina de build e adicionar a compilação nisso;
33. FALSA SENSAÇÃO DE ORGANIZAÇÃO • Pré-processadores não fazem mágica estrutural; • Sem um code standard e/ou um style guide as coisas tendem a ficar bagunçadas;
34. http://alistapart.com/article/a-vision-for-our-sass
35. HTTP://HOWTOCODE.COM.BR/CURSOS/CSS
36. OMG DEVO PARAR DE USAR ENTÃO?
37. NOPE! A maioria dos problemas aconteceriam com CSS “vanilla”; Pré-processadores só potencializam algumas más práticas;
38. DEFINA COM SUA EQUIPE ALGUMAS REGRINHAS DE “CONVIVÊNCIA" DO CSS DISCUTA PADRÕES DE CÓDIGO DISSEMINE CULTURA DE DESENVOLVIMENTO
39. NÃO CULPE LINGUAGEM OU FERRAMENTAS! NÃO SEJA XIITA!
40. eduardo.matos@medicinia.com.br
 eduardoj.matos@gmail.com @eduardojmatos http://eduardomatos.me OBRIGADO ;) bit.ly/sobre-pre-processadores