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

Bfcf5c88d40733a45ce754e6ce225a8b?s=47 Eduardo Matos
September 25, 2015

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.

Bfcf5c88d40733a45ce754e6ce225a8b?s=128

Eduardo Matos

September 25, 2015
Tweet

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
  7. None
  8. EXISTEM MUITOS FRAMEWORKS

  9. TODOS ❤ PRÉ-PROCESSADORES

  10. None
  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)

  15. None
  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; }
  22. None
  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);
  24. None
  25. @import "compass"; .btn { @include opacity(.5); }

  26. ABRA O OLHO PRO OUTPUT!

  27. ABSTRAÇÃO EXCESSIVA

  28. None
  29. None
  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