O documento discute problemas comuns com CSS, como falta de organização e manutenibilidade, e apresenta técnicas de Sass como variáveis, nesting, extend e mixins para resolver esses problemas. Também apresenta uma estrutura de pastas e arquivos Sass para manter o código organizado e reutilizável através de imports, assim como ferramentas para documentação e teste automatizado de interfaces para garantir consistência e qualidade do código CSS.

1. Arquitetura e práticas de CSS
Glauber Ramos

6. 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
·
·
·
·
·
·
·

9. Sass
Variáveis
$textColor:#123AD3;
.button{
color:$textColor;
}
SASS

10. Sass
Variáveis
$textColor: #123AD3;
.button {
color: $textColor;
}
SASS
.button {
color: #123AD3;
}
CSS

11. Sass
Nesting
.button{
font-size:1em;
.icon{
color:blue;
}
}
SASS

12. Sass
Nesting
.button {
font-size: 1em;
.icon {
color: blue;
}
}
SASS
.button {
font-size: 1em;
}
.button .icon {
color: blue;
}
CSS

13. Sass
Extend
.button{
font-size:1em;
}
.button_primary{
@extend.button;
width:300px;
}
SASS

14. Sass
Extend
.button {
font-size: 1em;
}
.button_primary {
@extend .button;
width: 300px;
}
SASS
.button, .button_primary {
font-size: 1em;
}
.button_primary {
width: 300px;
}
CSS

15. Sass
Mixins
@mixinbutton{
font-size:1em;
}
.button{
@includebutton;
}
SASS

16. Sass
Mixins
@mixinbutton{
font-size:1em;
}
.button{
@includebutton;
}
SASS
.button{
font-size:1em;
}
CSS

17. CSS3 Mixins
Typography Mixins
Utilities Mixins
Maneira fácil de criar sprites
·
·
·
·

22. 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

29. Estrutura
|-- stylesheets/
| |-- modules/
| |-- _base.scss
| |-- _buttons.scss
| |-- _search.scss
| |-- _media.scss
| |-- _header.scss
| |-- _footer.scss
| |-- _variables.scss
| |-- _framework.scss
FILE SYSTEM

30. _framework.scss
// base
@import "variables"
@import "base"
// layout
@import "header"
@import "footer"
// modules
@import "buttons"
@import "search"
@import "media"
SASS

38. Live Style Guide
Documentação de interface
Mantém sua interface consistente
Acelera o desenvolvimento
Ferramenta de teste para sua interface
·
·
·
·

41. 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
·
·
·
·
·