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

Arquitetura e práticas de CSS, por Glauber Dutra

on

  • 1,140 views

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

Statistics

Views

Total Views
1,140
Views on SlideShare
1,096
Embed Views
44

Actions

Likes
6
Downloads
11
Comments
0

3 Embeds 44

https://twitter.com 39
http://www.slideee.com 4
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Arquitetura e práticas de CSS, por Glauber Dutra Arquitetura e práticas de CSS, por Glauber Dutra Presentation Transcript

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