Slide 1
Slide 1 text
ARQUITETURA CSS
@rafaelrinaldi
Slide 2
Slide 2 text
@rafaelrinaldi
Slide 3
Slide 3 text
https://magnetis.com.br
⡗
Slide 4
Slide 4 text
https://magnetis.com.br
⡗
Estamos contratando!
Slide 5
Slide 5 text
https://sp.femug.com
⡗
FEMUG
Slide 6
Slide 6 text
Disclaimer
Slide 7
Slide 7 text
peter_griffin_css.gif
Não vou utilizar o gif to Peter Griffin durante a palestra!
Slide 8
Slide 8 text
Desenvolver interfaces para a web é muito mais do que um
problema exclusivo do CSS
Slide 9
Slide 9 text
Culpa do CSS vs. nossa culpa
Slide 10
Slide 10 text
Culpa do CSS
Slide 11
Slide 11 text
›❯ Não é muito expressivo;
›❯ Ordem de definição de dependências;
›❯ Especificidade;
›❯ Cheio de truques.
Slide 12
Slide 12 text
Nossa culpa
Slide 13
Slide 13 text
›❯ Falta de conhecimento sobre o proprio projeto;
›❯ Caos na estrutura;
›❯ Documentação inexistente ou muito ruim;
›❯ Não analisar o que já existe antes de criar algo do zero.
Slide 14
Slide 14 text
Conteúdo
Apresentação (e agora também animações)
Comportamento e interações mais complexas
http://alistapart.com/article/understandingprogressiveenhancement
⡗
Slide 15
Slide 15 text
Desenvolver interfaces é um trabalho complexo
Slide 16
Slide 16 text
CSS funciona. Poderia ser muito pior!
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Técnicas
Slide 19
Slide 19 text
Técnicas Frameworks / Bibliotecas
≠
Slide 20
Slide 20 text
OOCSS
https://github.com/stubbornella/oocss/wiki
⡗
Slide 21
Slide 21 text
https://github.com/stubbornella/oocss/wiki
⡗
Object Oriented CSS
Slide 22
Slide 22 text
Influenciado pelo paradigma da orientação a objetos
Técnicas → OOCSS
Slide 23
Slide 23 text
CSS “object”
Técnicas → OOCSS
Slide 24
Slide 24 text
Padrão visual que se repete
e que pode ser abstraído em um contexto próprio
Técnicas → OOCSS
Slide 25
Slide 25 text
Separar estrutura de marcação de variações visuais
Técnicas → OOCSS
Slide 26
Slide 26 text
Separar o conteúdo seu contexto
Técnicas → OOCSS
Slide 27
Slide 27 text
SMACSS
http://smacss.com
⡗
Slide 28
Slide 28 text
Scalable and Modular Architecture for CSS
http://smacss.com
⡗
Slide 29
Slide 29 text
Feito para resolver problemas específicos do Yahoo! Mail
Técnicas → SMACSS
Slide 30
Slide 30 text
›❯ Base;
›❯ Layout;
›❯ Module;
›❯ State;
›❯ Theme.
Técnicas → SMACSS
Slide 31
Slide 31 text
SMACSS → Base
Técnicas → SMACSS → Base
Slide 32
Slide 32 text
Regras padrão de estilo
Técnicas → SMACSS → Base
Slide 33
Slide 33 text
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
background: #bada55;
}
input[type=text] {
border: 2px solid #444;
}
Técnicas → SMACSS → Base
Slide 34
Slide 34 text
SMACSS → Layout
Técnicas → SMACSS → Layout
Slide 35
Slide 35 text
›❯ Utilizado por elementos fixos da aplicação;
›❯ Seletor único, não reutilizável;
›❯ Variações são representadas por classes com o prefixo l .
Técnicas → SMACSS → Layout
Slide 36
Slide 36 text
#header {
font-size: 2em;
color: fuchsia;
width: 100%;
height: 15em;
/* Dica: não precisa especificar unidade p/ line height */
line-height: 1.5;
}
#sidebar {
font-size: .75em;
color: gray;
float: right;
}
.l-inverse #sidebar {
float: left;
}
Técnicas → SMACSS → Layout
Slide 37
Slide 37 text
SMACSS → Modules
Técnicas → SMACSS → Modules
Slide 38
Slide 38 text
›❯ Trechos de código reutilizáveis;
›❯ Partes modulares do design;
›❯ Padrões.
Técnicas → SMACSS → Modules
Slide 39
Slide 39 text
SMACSS → State
Técnicas → SMACSS → State
Slide 40
Slide 40 text
›❯ Como os módulos irão se apresentar em estados específicos;
›❯ Representado por classes com o prefixo is .
Técnicas → SMACSS → State
Slide 41
Slide 41 text
.sidebar.is-expanded {
opacity: 1;
}
.button.is-disabled {
cursor: not-allowed;
background: lightgray;
opacity: .75;
pointer-events: none; /* Capeta */
}
Técnicas → SMACSS → State
Slide 42
Slide 42 text
SMACSS → Theme
Técnicas → SMACSS → Theme
Slide 43
Slide 43 text
Utilizado para abstrair propriedades visuais
Técnicas → SMACSS → Theme
Slide 44
Slide 44 text
/* No arquivo do componente botão */
.button {
border: 1px solid;
}
/* No arquivo de tema do botão */
.button {
border-color: fuchsia;
background: seagreen;
font-family: 'Ubuntu Mono', monospace;
}
Técnicas → SMACSS → Theme
Slide 45
Slide 45 text
BEM
http://bem.info
⡗
Slide 46
Slide 46 text
Block Element Modifier
http://bem.info
⡗
Slide 47
Slide 47 text
Feito para resolver problemas específicos do Yandex
Técnicas → BEM
Slide 48
Slide 48 text
›❯ Facilitar a manutenção de projetos de longa duração;
›❯ Facilidade de entendimento do código;
›❯ Diminuir curva de aprendizado em novos membros do time;
›❯ Reutilização de código.
Técnicas → BEM
Slide 49
Slide 49 text
BEM → Block
Técnicas → BEM → Block
Slide 50
Slide 50 text
Entidade independente que é capaz de conter outros blocos
Técnicas → BEM → Block
Slide 51
Slide 51 text
Técnicas → BEM → Block
Slide 52
Slide 52 text
Técnicas → BEM → Block
Slide 53
Slide 53 text
BEM → Element
Técnicas → BEM → Element
Slide 54
Slide 54 text
›❯ Parte de um bloco com uma função específica;
›❯ Não possui um contexto próprio.
Técnicas → BEM → Element
Slide 55
Slide 55 text
Técnicas → BEM → Element
Slide 56
Slide 56 text
Técnicas → BEM → Element
Slide 57
Slide 57 text
BEM → Modifier
Técnicas → BEM → Modifier
Slide 58
Slide 58 text
Uma propriedade de um bloco ou elemento
que altera seu comportamento
Técnicas → BEM → Modifier
Slide 59
Slide 59 text
Técnicas → BEM → Modifier
Slide 60
Slide 60 text
Técnicas → BEM → Modifier
Slide 61
Slide 61 text
BEM → Nomenclatura
Técnicas → BEM → Nomenclatura
Slide 62
Slide 62 text
›❯ Utiliza-se hífen para separar palavras em nomes longos;
›❯ Underscore duplo para separar um bloco de um elemento;
›❯ PascalCase e camelCase são aceitos.
Técnicas → BEM → Nomenclatura
Slide 64
Slide 64 text
SUIT CSS
https://suitcss.github.io
⡗
Slide 65
Slide 65 text
Criado por desenvolvedores do Twitter
numa tentativa de focar numa arquitetura
baseada em componentes
Técnicas → SUIT CSS
Slide 66
Slide 66 text
SUIT CSS → Nomenclatura
Técnicas → SUIT CSS → Nomenclatura
Slide 67
Slide 67 text
›❯ Utiliza-se camelCase para separar palavras em nomes longos;
›❯ Utilitários devem começar com o prefixo u .
Técnicas → SUIT CSS → Nomenclatura
Slide 68
Slide 68 text
/* Definição de um componente */
.MyComponent {}
/* Definição de um estado */
.MyComponent.is-animating {}
/* Definição de um modificador */
.MyComponent--modifier {}
/* Definição de subelementos */
.MyComponent-part {}
.MyComponent-anotherPart {}
Técnicas → SUIT CSS → Nomenclatura
Slide 69
Slide 69 text
Slide 70
Slide 70 text
/* Inline de imports procura por libs instaladas via NPM */
@import "normalize.css";
/* Atalhos para lidar com media queries */
@custom-media --wide-screen (min-width: 80em);
/* Valores padrão */
:root {
--base-font-size: 16px;
}
@media (--wide-screen) {
html {
/* Utiliza Autoprefixer p/ lidar c/ vendor prefixes */
font-size: calc(var(--base-font-size) * 2);
}
}
Técnicas → SUIT CSS → Nomenclatura
Slide 71
Slide 71 text
https://github.com/suitcss/components
⡗
Slide 72
Slide 72 text
itcss
http://itcss.io
⡗
Slide 73
Slide 73 text
inverted triangle css
http://itcss.io
⡗
Slide 74
Slide 74 text
Abordagem que visa escrever CSS baseado na
ordem de especificidade
Técnicas → itcss
Slide 75
Slide 75 text
Abordagem que visa escrever CSS baseado na
ordem de especificidade
Técnicas → itcss
Slide 76
Slide 76 text
Técnicas → itcss
Especificidade baixa
Especificidade alta
Slide 77
Slide 77 text
Técnicas → itcss
Settings
Tools
Generic
Base
Objects
Trumps
Components
Slide 78
Slide 78 text
›❯ Settings: variáveis e configurações;
›❯ Tools: mixins e funções;
›❯ Generic: resets, configuração de box sizing, etc;
›❯ Base: estilos atrelados a tags, sem o uso de classes;
›❯ Objects: padrões visuais que se repetem;
›❯ Components: elementos de interface com contexto específico;
›❯ Trumps: overrides (geralmente utiliza-se !important ).
Técnicas → itcss
Slide 79
Slide 79 text
›❯ Evita redundância na descrição de regras de estilo;
›❯ Elimina problemas com especificidade;
›❯ Estrutura granular;
›❯ Elimina a necessidade de “escrever CSS para remover CSS”.
Técnicas → itcss
Slide 80
Slide 80 text
Outras abordagens
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
http://www.csstyle.io
⡗
Slide 83
Slide 83 text
Utiliza mixins de Sass para definir estilos
Outras Abordagens → csstyle
Slide 89
Slide 89 text
Outras Abordagens → csstyle
@include component(button) {
background: #6bd9ed;
padding: 15px;
@include option(action){
color: #1f1f1f;
background: #a7e040;
padding-top: 0;
}
@include part(icon){
font-size: 34px;
position: relative;
top: 10px;
}
@include tweak(rounded) {
border-radius: 10px;
}
}
Slide 90
Slide 90 text
https://amcss.github.io
⡗
Slide 91
Slide 91 text
Utiliza atributos HTML para definir estilos
Outras Abordagens → AMCSS
Slide 92
Slide 92 text
Outras Abordagens → AMCSS
Inscrever-se no Seminário Locaweb
Cancelar inscrição
Slide 93
Slide 93 text
A mágica está no seletor ~= que nos permite selecionar
qualquer atributo que contenha uma lista de regras
separadas por espaço
Outras Abordagens → AMCSS
Slide 94
Slide 94 text
Outras Abordagens → AMCSS
.btn [am-Button] {}
.btn-primary [am-Button~="primary"] {}
.btn-large [am-Button~="large"] {}
Slide 95
Slide 95 text
http://uilang.com
⡗
Slide 96
Slide 96 text
Uma linguagem própria para lidar com interface
Outras Abordagens → uilang
Slide 97
Slide 97 text
Exemplo uilang
/* Definição de estilos e transições */
#notification {
transition: .8s
}
#notification.hidden {
opacity: 0
}
Você tem três mensagens não lidas.
Esconder
clicking on ".hide" adds class "hidden" on "#notification"
Outras Abordagens → uilang
Slide 98
Slide 98 text
http://gridstylesheets.org
⡗
Slide 99
Slide 99 text
Utiliza o algoritmo Cassowary Constraint Solver
para lidar com layouts
Outras Abordagens → Grid Style Sheets
Slide 100
Slide 100 text
Outras Abordagens → Grid Style Sheets
~Cassowary Constraint Solver~
Slide 101
Slide 101 text
p {
color: purple;
line-height: >= 16;
line-height: <= ::window[height] / 12;
}
#product {
$col-width: == ::[width] / 12 !require;
$col-left: == ::[left] + ::[$col-width];
.price {
left: == ::parent[$col-left];
width: == ::parent[$col-width];
}
.description {
left: == ::parent[$col-left] + ::parent[$col-width];
}
}
.sprite {
z-index: >= #bg[z-index] >= 50;
}
Outras Abordagens → Grid Style Sheets
Slide 102
Slide 102 text
Depende de um runtime (que roda em um web worker)
e de um pré-processador
Outras Abordagens → Grid Style Sheets
Slide 103
Slide 103 text
http://getbootstrap.com/css
⡗
Slide 104
Slide 104 text
Framework CSS à frente de seu tempo
Outras Abordagens → Bootstrap
Slide 105
Slide 105 text
Ensinou e popularizou boas práticas
de arquitetura CSS modular
Outras Abordagens → Bootstrap
Slide 106
Slide 106 text
Conceito de modificadores incrementais
Outras Abordagens → Bootstrap
Slide 107
Slide 107 text
Conceito de estados
Outras Abordagens → Bootstrap
Slide 108
Slide 108 text
CSS na Magnetis
Slide 109
Slide 109 text
https://github.com/magnetis/styleguide
⡗
Slide 110
Slide 110 text
Uma adaptação das partes que julgamos
boas em algumas técnicas populares
CSS na Magnetis
Slide 111
Slide 111 text
CSS na Magnetis
Slide 112
Slide 112 text
CSS na Magnetis
›❯ Conceito de categorização do SMACSS;
›❯ Conceito de estados do SMACSS;
›❯ Conceito de elementos do BEM;
›❯ Conceito de modificadores do SUIT CSS.
Slide 113
Slide 113 text
CSS na Magnetis
›❯ Sass com a sintaxe SCSS;
›❯ Autoprefixer;
›❯ Sistema de grid Susy;
›❯ Breakpoint;
›❯ SVG;
›❯ Rails (partials & Sprockets = ❤);
›❯ Bower.
Slide 114
Slide 114 text
/* Componente sidebar */
.accordion {}
/* Componente sidebar no estado expandido */
.accordion.is-expanded {}
/* Modificador `big` do componente botão */
.button--big {}
/* Componente `menu` */
.menu {}
/* Componente `menu-item` */
.menu-item {}
/* Para definir estados, utilizamos `is` */
.menu-item.has-icon {}
/* Elemento `icon` dentro do componente `menu` */
.menu-item__icon {}
CSS na Magnetis
Slide 115
Slide 115 text
app
├── assets
│ └── stylesheets
│ ├── application.scss
│ ├── base
│ │ ├── _breakpoints.scss
│ │ ├── _defaults.scss
│ │ ├── _grid.scss
│ │ ├── _typography.scss
│ │ └── _variables.scss
│ ├── components
│ │ ├── _button.scss
│ │ ├── _dropdown.scss
│ │ ├── _gallery.scss
│ │ └── _link.scss
│ ├── helpers
│ │ ├── _classes.scss
│ │ ├── _functions.scss
│ │ ├── _mixins.scss
│ │ └── _placeholders.scss
│ └── layout
│ ├── _footer.scss
│ ├── _header.scss
│ └── sections
│ ├── _dashboard.scss
│ └── _homepage.scss
├── bower.json
└── vendor
└── assets
└── bower
├── normalize-css
└── susy
Slide 116
Slide 116 text
//= require 'normalize-css'
@import
// Estilos e configurações base
'base/variables',
'base/grid',
'base/breakpoints',
'base/typography',
'base/deafults',
// Utilitários
'helpers/*',
// Componentes
'components/*',
// Arquivos de layout
'layout/**/*';
CSS na Magnetis
Slide 117
Slide 117 text
Pontos positivos
Slide 118
Slide 118 text
Todos no time conseguem falar a mesma língua
Pontos positivos
Slide 119
Slide 119 text
Facilita o uso de ferramentas
e a criação de um guia de estilo
Pontos positivos
Slide 120
Slide 120 text
Desenvolvimento de interface baseado em componentes ❤
Pontos positivos
Slide 121
Slide 121 text
Evita depender de como o markup está estruturado
na hora de criar estilos
Pontos positivos
Slide 122
Slide 122 text
navigation ul li a {
/* Valores hexadecimais sempre em minúsculo, por favor */
color: #c0ffee;
}
Pontos positivos
Slide 124
Slide 124 text
Força uma análise contextual da interface
Pontos positivos
Slide 125
Slide 125 text
Maior flexibilidade na hora de lidar com design responsivo
Pontos positivos
Slide 126
Slide 126 text
Não existe bala de prata
Slide 127
Slide 127 text
Have a convention, document it, and stick to it.
Não existe bala de prata
“
Slide 128
Slide 128 text
http://www.shopify.com
⡗
Slide 130
Slide 130 text
Não existe bala de prata
Slide 131
Slide 131 text
Não existe bala de prata
Slide 132
Slide 132 text
Onde está seu Deus agora?
Não existe bala de prata
Slide 133
Slide 133 text
Pense no seu time na hora de tomar decisões de arquitetura
Não existe bala de prata
Slide 134
Slide 134 text
Documente seu código!
Não existe bala de prata
Slide 135
Slide 135 text
/* ==============================================================
Grid layout
==============================================================
*/
/**
* Column layout with horizontal scroll.
*
* This creates a single row of full-height, non-wrapping columns
* that can be browsed horizontally within their parent.
*
* Example HTML:
*
*
*
*
*
*
*/
Não existe bala de prata
Slide 136
Slide 136 text
Coisas mudam o tempo todo
Não existe bala de prata
Slide 137
Slide 137 text
Não existe bala de prata
Slide 138
Slide 138 text
Seu código precisa ser flexível e adaptável
Não existe bala de prata
Slide 139
Slide 139 text
Foque em processos e resultados,
não em ferramentas ou frameworks
Não existe bala de prata
Slide 140
Slide 140 text
@rafaelrinaldi
Muito obrigado