É 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.

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