Como manter seu CSS escalável com Compass, SMACSS, BEM e outros guias de estilos. Por Eder Eduardo

1. Como manter seu CSS
escalável e organizado.

2. Como manter seu CSS
escalável e organizado.

3. Como manter seu CSS
escalável e organizado.

4. olá!
github.com/eder
@edereduardo

5. software engineer
@

9. Aplicações de pequena escala.
style.css

11. Aplicações de larga escala.
global.css | general.css | all.css

13. Pré-processadores: usar ou não usar?

14. Pré-processadores: usar ou não usar?
Sim, mas só se for agora!!!

15. Pré-processadores: usar ou não usar?

16. Pré-processadores: usar ou não usar?

17. Pré-processadores: usar ou não usar?

18. cacildis!!!!

20. 1. CSS and Inline Comments
2. Local and Global Variables
3. Placeholders for Extends
4. Ampersands for a Parent Selector
5. Control Directives & Expressions

22. Organização:
Muitos pontos de entrada Único ponto de entrada

23. Organização:
único ponto de
entrada
application.scss

24. SMACSS
https://smacss.com/

25. módulos & componentes

28. ../modules/_boxes.scss
../sections/_faq.scss
../sections/_account.scss

29. convenção & nomenclatura

30. BEM

31. A metodologia BEM foi desenvolvido no Yandex com os seguintes objetivos em mente:
Desenvolvimento rápido e resultados duradouros . Os projetos devem ser criados
rapidamente, utilizando uma arquitetura que garanta sustentabilidade e longevidade
para o desenvolvimento.
Yandex é uma das maiores empresas de internet na Europa, que operam o motor de busca mais
popular da Rússia.

32. .wedding-home_container {
…
}
Domínio Contexto Bloco | elemento
.wedding-home_container--campaign {
@extend .wedding-home_container;
background-color: blue;
}
Domínio Contexto Bloco | elemento Modificador

33. front-end deve conhecer
design de software?

34. Sim, CSS tem muita similaridade com a
programação.

35. S.O.L.I.D

36. S.O.L.I.D
É um acrônimo dos cinco primeiros princípios da programação orientada a objetos
e design de código identificados por Robert C. Martin (ou Uncle Bob) por volta do
ano 2000. O acrônimo SOLID foi introduzido por Michael Feathers, após observar
que os cinco princípios poderiam se encaixar nesta palavra.

37. Single responsibility principle:
O Módulo deve ter seu comportamento
contido e isolado.

38. Open/closed principle
Módulo deve ser capaz de estender um
comportamento de uma classe, sem
modificá-lo.

39. Dependency inversion principle
Módulo deve depender de abstração...
classes de um nível alto não devem
depender de classes de um nível mais
baixo.

40. Mas se ….

42. Devo usar framework ?

43. Designer front-end

44. Tipografia

45. Style guide:
http://designmodo.github.io/Flat-UI/

47. Obrigado !!!