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 es...
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: bl...
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 {...
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...
Estrutura
|-- stylesheets/
| |-- modules/
| |-- _base.scss
| |-- _buttons.scss
| |-- _search.scss
| |-- _media.scss
| |-- ...
_framework.scss
// base
@import "variables"
@import "base"
// layout
@import "header"
@import "footer"
// modules
@import ...
Live Style Guide
Documentação de interface
Mantém sua interface consistente
Acelera o desenvolvimento
Ferramenta de teste ...
CSS Critic
Testes automatizados
Baseados em screenshots
Usa phantom js
Fácil de integrar com ferramentas de build (jenkins...
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSS, por Glauber Dutra
Upcoming SlideShare
Loading in...5
×

Arquitetura e práticas de CSS, por Glauber Dutra

1,326

Published on

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

Arquitetura e práticas de CSS, por Glauber Dutra

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

    Clipping is a handy way to collect important slides you want to go back to later.

×