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

296 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
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
296
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • kkkkkkkkk
  • 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 !!!

    ×