• Like
Arquitetura e práticas de CSS, por Glauber Dutra
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Arquitetura e práticas de CSS, por Glauber Dutra

  • 1,201 views
Published

Palestra apresentada no frontinpoa 2013 (http://frontinpoa.com.br/) e the developers conference 2013 …

Palestra apresentada no frontinpoa 2013 (http://frontinpoa.com.br/) e the developers conference 2013 (http://www.thedevelopersconference.com.br/tdc/2013/portoalegre/trilha-ux-front-end#programacao)

Com o avanço das tecnologias web e principalmente das folhas de estilo (CSS), diversas novidades apareceram: animações, pré-processadores, variáveis, novos frameworks e o que antes eram apenas possível ser feito com imagens agora é suportado direto no browser. Dessa maneira novos desafios apareceram, folhas de estilo começaram a se tornar muito grandes e uma organização é necessária. Separar os arquivos de acordo com a sua responsabilidade, pensar em componentes reutilizáveis e guia de estilos é muito importante. Práticas já utilizadas em linguagens de programação agora também são utilizadas nas folhas de estilo

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,201
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
16
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Arquitetura e práticas de CSS Glauber Ramos
  • 2. 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 · · · · · · ·
  • 3. Sass Variáveis $textColor:#123AD3; .button{ color:$textColor; } SASS
  • 4. Sass Variáveis $textColor: #123AD3; .button { color: $textColor; } SASS .button { color: #123AD3; } CSS
  • 5. Sass Nesting .button{ font-size:1em; .icon{ color:blue; } } SASS
  • 6. Sass Nesting .button { font-size: 1em; .icon { color: blue; } } SASS .button { font-size: 1em; } .button .icon { color: blue; } CSS
  • 7. Sass Extend .button{ font-size:1em; } .button_primary{ @extend.button; width:300px; } SASS
  • 8. Sass Extend .button { font-size: 1em; } .button_primary { @extend .button; width: 300px; } SASS .button, .button_primary { font-size: 1em; } .button_primary { width: 300px; } CSS
  • 9. Sass Mixins @mixinbutton{ font-size:1em; } .button{ @includebutton; } SASS
  • 10. Sass Mixins @mixinbutton{ font-size:1em; } .button{ @includebutton; } SASS .button{ font-size:1em; } CSS
  • 11. CSS3 Mixins Typography Mixins Utilities Mixins Maneira fácil de criar sprites · · · ·
  • 12. 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
  • 13. Estrutura |-- stylesheets/ | |-- modules/ | |-- _base.scss | |-- _buttons.scss | |-- _search.scss | |-- _media.scss | |-- _header.scss | |-- _footer.scss | |-- _variables.scss | |-- _framework.scss FILE SYSTEM
  • 14. _framework.scss // base @import "variables" @import "base" // layout @import "header" @import "footer" // modules @import "buttons" @import "search" @import "media" SASS
  • 15. Live Style Guide Documentação de interface Mantém sua interface consistente Acelera o desenvolvimento Ferramenta de teste para sua interface · · · ·
  • 16. 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 · · · · ·