O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes Altere suas preferências de anúncios quando desejar.
Como manter seu CSS
escalável e organizado.
Como manter seu CSS
escalável e organizado.
Como manter seu CSS
escalável e organizado.
olá!
github.com/eder
@edereduardo
software engineer
@
Aplicações de pequena escala.
style.css
Aplicações de larga escala.
global.css | general.css | all.css
Pré-processadores: usar ou não usar?
Pré-processadores: usar ou não usar?
Sim, mas só se for agora!!!
Pré-processadores: usar ou não usar?
Pré-processadores: usar ou não usar?
Pré-processadores: usar ou não usar?
cacildis!!!!
1. CSS and Inline Comments
2. Local and Global Variables
3. Placeholders for Extends
4. Ampersands for a Parent Selector
5...
Organização:
Muitos pontos de entrada Único ponto de entrada
Organização:
único ponto de
entrada
application.scss
SMACSS
https://smacss.com/
módulos & componentes
../modules/_boxes.scss
../sections/_faq.scss
../sections/_account.scss
convenção & nomenclatura
BEM
A metodologia BEM foi desenvolvido no Yandex com os seguintes objetivos em mente:
Desenvolvimento rápido e resultados dura...
.wedding-home_container {
…
}
Domínio Contexto Bloco | elemento
.wedding-home_container--campaign {
@extend .wedding-home_...
front-end deve conhecer
design de software?
Sim, CSS tem muita similaridade com a
programação.
S.O.L.I.D
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...
Single responsibility principle:
O Módulo deve ter seu comportamento
contido e isolado.
Open/closed principle
Módulo deve ser capaz de estender um
comportamento de uma classe, sem
modificá-lo.
Dependency inversion principle
Módulo deve depender de abstração...
classes de um nível alto não devem
depender de classes...
Mas se ….
Devo usar framework ?
Designer front-end
Tipografia
Style guide:
http://designmodo.github.io/Flat-UI/
Obrigado !!!
Como manter seu css escalável  e organizado. - Eder Eduardo
Como manter seu css escalável  e organizado. - Eder Eduardo
Como manter seu css escalável  e organizado. - Eder Eduardo
Como manter seu css escalável  e organizado. - Eder Eduardo
Como manter seu css escalável  e organizado. - Eder Eduardo
Como manter seu css escalável  e organizado. - Eder Eduardo
Como manter seu css escalável  e organizado. - Eder Eduardo
Como manter seu css escalável  e organizado. - Eder Eduardo
Como manter seu css escalável  e organizado. - Eder Eduardo
Como manter seu css escalável  e organizado. - Eder Eduardo
Como manter seu css escalável  e organizado. - Eder Eduardo
Próximos SlideShares
Carregando em…5
×

Como manter seu css escalável e organizado. - Eder Eduardo

302 visualizações

Publicada em

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

Publicada em: Internet
  • Seja o primeiro a comentar

Como manter seu css escalável e organizado. - Eder Eduardo

  1. 1. Como manter seu CSS escalável e organizado.
  2. 2. Como manter seu CSS escalável e organizado.
  3. 3. Como manter seu CSS escalável e organizado.
  4. 4. olá! github.com/eder @edereduardo
  5. 5. software engineer @
  6. 6. Aplicações de pequena escala. style.css
  7. 7. Aplicações de larga escala. global.css | general.css | all.css
  8. 8. Pré-processadores: usar ou não usar?
  9. 9. Pré-processadores: usar ou não usar? Sim, mas só se for agora!!!
  10. 10. Pré-processadores: usar ou não usar?
  11. 11. Pré-processadores: usar ou não usar?
  12. 12. Pré-processadores: usar ou não usar?
  13. 13. cacildis!!!!
  14. 14. 1. CSS and Inline Comments 2. Local and Global Variables 3. Placeholders for Extends 4. Ampersands for a Parent Selector 5. Control Directives & Expressions
  15. 15. Organização: Muitos pontos de entrada Único ponto de entrada
  16. 16. Organização: único ponto de entrada application.scss
  17. 17. SMACSS https://smacss.com/
  18. 18. módulos & componentes
  19. 19. ../modules/_boxes.scss ../sections/_faq.scss ../sections/_account.scss
  20. 20. convenção & nomenclatura
  21. 21. BEM
  22. 22. 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.
  23. 23. .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
  24. 24. front-end deve conhecer design de software?
  25. 25. Sim, CSS tem muita similaridade com a programação.
  26. 26. S.O.L.I.D
  27. 27. 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.
  28. 28. Single responsibility principle: O Módulo deve ter seu comportamento contido e isolado.
  29. 29. Open/closed principle Módulo deve ser capaz de estender um comportamento de uma classe, sem modificá-lo.
  30. 30. 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.
  31. 31. Mas se ….
  32. 32. Devo usar framework ?
  33. 33. Designer front-end
  34. 34. Tipografia
  35. 35. Style guide: http://designmodo.github.io/Flat-UI/
  36. 36. Obrigado !!!

×