Arquitetura e práticas de CSS, por Glauber Dutra
9 gostaram2,034 visualizações
O documento discute problemas comuns com CSS, como falta de organização e manutenibilidade, e apresenta técnicas de Sass como variáveis, nesting, extend e mixins para resolver esses problemas. Também apresenta uma estrutura de pastas e arquivos Sass para manter o código organizado e reutilizável através de imports, assim como ferramentas para documentação e teste automatizado de interfaces para garantir consistência e qualidade do código CSS.
Arquitetura e práticas de CSS, por Glauber Dutra
- 1. Arquitetura e práticas de CSS Glauber Ramos
- 6. Problemas com CSS Normalmente é uma bagunça É dificil de manter É dificil de modificar Não tem organização Código muito especifico Código não reusável Código não testável · · · · · · ·
- 10. Sass Variáveis $textColor: #123AD3; .button { color: $textColor; } SASS .button { color: #123AD3; } CSS
- 12. Sass Nesting .button { font-size: 1em; .icon { color: blue; } } SASS .button { font-size: 1em; } .button .icon { color: blue; } CSS
- 14. Sass Extend .button { font-size: 1em; } .button_primary { @extend .button; width: 300px; } SASS .button, .button_primary { font-size: 1em; } .button_primary { width: 300px; } CSS
- 17. CSS3 Mixins Typography Mixins Utilities Mixins Maneira fácil de criar sprites · · · ·
- 22. Base body { font-family: Arial, sans-serif; max-width: 1000px; background: #333; font-size: 16px; } table { margin: 0 auto; } ul { margin: 0; } h1, h2, h3 { margin: 1em; } SASS
- 29. Estrutura |-- stylesheets/ | |-- modules/ | |-- _base.scss | |-- _buttons.scss | |-- _search.scss | |-- _media.scss | |-- _header.scss | |-- _footer.scss | |-- _variables.scss | |-- _framework.scss FILE SYSTEM
- 30. _framework.scss // base @import "variables" @import "base" // layout @import "header" @import "footer" // modules @import "buttons" @import "search" @import "media" SASS
- 38. Live Style Guide Documentação de interface Mantém sua interface consistente Acelera o desenvolvimento Ferramenta de teste para sua interface · · · ·
- 41. CSS Critic Testes automatizados Baseados em screenshots Usa phantom js Fácil de integrar com ferramentas de build (jenkins, bamboo, cruise control, etc...) Ainda estado alpha · · · · ·