arquitetura e práticas de css, por glauber dutra
DESCRIPTION
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 estiloTRANSCRIPT
![Page 1: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/1.jpg)
Arquitetura e práticas de CSSGlauber Ramos
![Page 2: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/2.jpg)
![Page 3: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/3.jpg)
![Page 4: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/4.jpg)
![Page 5: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/5.jpg)
![Page 6: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/6.jpg)
Problemas com CSS
Normalmente é uma bagunçaÉ dificil de manterÉ dificil de modificarNão tem organizaçãoCódigo muito especificoCódigo não reusávelCódigo não testável
·······
![Page 7: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/7.jpg)
![Page 8: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/8.jpg)
![Page 9: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/9.jpg)
SassVariáveis
$textColor: #123AD3;
.button { color: $textColor; }
SASS
![Page 10: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/10.jpg)
SassVariáveis
$textColor: #123AD3;
.button { color: $textColor; }
SASS
.button { color: #123AD3; }
CSS
![Page 11: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/11.jpg)
SassNesting
.button { font-size: 1em;
.icon { color: blue; } }
SASS
![Page 12: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/12.jpg)
SassNesting
.button { font-size: 1em;
.icon { color: blue; } }
SASS
.button { font-size: 1em; }
.button .icon { color: blue; }
CSS
![Page 13: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/13.jpg)
SassExtend
.button { font-size: 1em; }
.button_primary { @extend .button; width: 300px; }
SASS
![Page 14: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/14.jpg)
SassExtend
.button { font-size: 1em; }
.button_primary { @extend .button; width: 300px; }
SASS
.button, .button_primary { font-size: 1em; }
.button_primary { width: 300px; }
CSS
![Page 15: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/15.jpg)
SassMixins
@mixin button { font-size: 1em; }
.button { @include button; }
SASS
![Page 16: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/16.jpg)
SassMixins
@mixin button { font-size: 1em; }
.button { @include button; }
SASS
.button { font-size: 1em; }
CSS
![Page 17: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/17.jpg)
CSS3 MixinsTypography MixinsUtilities MixinsManeira fácil de criar sprites
····
![Page 18: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/18.jpg)
![Page 19: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/19.jpg)
![Page 20: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/20.jpg)
![Page 21: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/21.jpg)
![Page 22: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/22.jpg)
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
![Page 23: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/23.jpg)
![Page 24: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/24.jpg)
![Page 25: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/25.jpg)
![Page 26: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/26.jpg)
![Page 27: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/27.jpg)
![Page 28: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/28.jpg)
![Page 29: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/29.jpg)
Estrutura
|-- stylesheets/ | |-- modules/ | |-- _base.scss | |-- _buttons.scss | |-- _search.scss | |-- _media.scss | |-- _header.scss | |-- _footer.scss | |-- _variables.scss | |-- _framework.scss
FILE SYSTEM
![Page 30: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/30.jpg)
_framework.scss
// base @import "variables" @import "base"
// layout @import "header" @import "footer"
// modules @import "buttons" @import "search" @import "media"
SASS
![Page 31: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/31.jpg)
![Page 32: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/32.jpg)
![Page 33: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/33.jpg)
![Page 34: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/34.jpg)
![Page 35: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/35.jpg)
![Page 36: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/36.jpg)
![Page 37: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/37.jpg)
![Page 38: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/38.jpg)
Live Style Guide
Documentação de interfaceMantém sua interface consistenteAcelera o desenvolvimentoFerramenta de teste para sua interface
····
![Page 39: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/39.jpg)
![Page 40: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/40.jpg)
![Page 41: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/41.jpg)
CSS Critic
Testes automatizadosBaseados em screenshotsUsa phantom jsFácil de integrar com ferramentas de build (jenkins, bamboo,cruise control, etc...)Ainda estado alpha
····
·
![Page 42: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/42.jpg)
![Page 43: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/43.jpg)
![Page 44: Arquitetura e práticas de CSS, por Glauber Dutra](https://reader033.vdocuments.site/reader033/viewer/2022052903/557a8e30d8b42ab7638b4f27/html5/thumbnails/44.jpg)