Arquitetura e práticas de CSS, por Glauber Dutra
-
Upload
thoughtworks -
Category
Technology
-
view
1.284 -
download
5
description
Transcript of Arquitetura e práticas de CSS, por Glauber Dutra
Arquitetura e práticas de CSSGlauber Ramos
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
·······
SassVariáveis
$textColor: #123AD3;
.button { color: $textColor; }
SASS
SassVariáveis
$textColor: #123AD3;
.button { color: $textColor; }
SASS
.button { color: #123AD3; }
CSS
SassNesting
.button { font-size: 1em;
.icon { color: blue; } }
SASS
SassNesting
.button { font-size: 1em;
.icon { color: blue; } }
SASS
.button { font-size: 1em; }
.button .icon { color: blue; }
CSS
SassExtend
.button { font-size: 1em; }
.button_primary { @extend .button; width: 300px; }
SASS
SassExtend
.button { font-size: 1em; }
.button_primary { @extend .button; width: 300px; }
SASS
.button, .button_primary { font-size: 1em; }
.button_primary { width: 300px; }
CSS
SassMixins
@mixin button { font-size: 1em; }
.button { @include button; }
SASS
SassMixins
@mixin button { font-size: 1em; }
.button { @include button; }
SASS
.button { font-size: 1em; }
CSS
CSS3 MixinsTypography MixinsUtilities MixinsManeira 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 interfaceMantém sua interface consistenteAcelera o desenvolvimentoFerramenta de teste para sua interface
····
CSS Critic
Testes automatizadosBaseados em screenshotsUsa phantom jsFácil de integrar com ferramentas de build (jenkins, bamboo,cruise control, etc...)Ainda estado alpha
····
·