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

····

·