SlideShare uma empresa Scribd logo
1 de 67
Baixar para ler offline
Caipirinha
CSS
Andréa Zambrana
front-end @ via varejo
@akfzambrana
http://andreazambrana.com.br
@frontladiesabc
facebook.com/front-ladies-abc
@abc_developers
2017.abcdevelopers.org
@trainingcentr
trainingcenter.io
O que é síndrome
do impostor?
Você não é capaz!
Voz babaca
A ideia
Como surge?
Problema
ou necessidade
Procuramos
algo pronto
Não somos bons o
suficiente para
criar algo
Encontramos
algo pronto
Não resolve 100%
Adaptamos
à nossa realidade
Por isso que
estou aqui hoje
Necessidade
específica
App/sistema que
cresce todo dia
Ou seja, muito grande
Aproximadamente
40 devs
Frontenders e backenders
Pelo menos
quatro brands
Quem manja
de CSS?
Se não tiver
cuidado com o CSS
Por que
caipirinha CSS?
Caipirinha (drink)
É uma delicia
Quase todas as
pessoas gostam
É bem brasileira
Divertida
Flexibilidade
Pinga
Vodka
Cachaça
Saque
Morango
Kiwi
Manga
Amora
Agrada
quase todo mundo
Arquiteturas
CSS mais
conhecidas
OOCSS
Object Oriented CSS
Atomic CSS
DRY
Don't Repeat Yourself
Block Element Modifier
BEM
SMACSS
Scalable and Modular Architecture
for CSS
Inverted Triangly architecture for
CSS
ITCSS
Reasonable System for CSS
Stylesheet Structure
RSCSS
Coerência
entre tamanho e
manutenibilidade
Quanto maior o
projeto, menor a
manutenibilidade
Não tem
bala de prata
Time
Necessidade
Tamanho do projeto
Tempo
Misturar
arquiteturas
Agrade e atenda
nossa necessidade
Caipirinha
CSS
Principios básicos
Atomic design
elementos componentes grandes
componentes
Especificidade
Explicitude
Alcance
Triângulo invertido do ITCSS
Configurações
Ferramentas
Genêricos
Elementos
Objetos
Componentes
Trumps
templates páginas
Configurações
Ferramentas
Genêricos
Elementos
Objetos
Componentes
Trumps
Templates
Páginas
Configurações
Ferramentas
Genêricos
Elementos
Objetos
Componentes
Trumps
Templates
Páginas
Prefixos
Prefixos
.has-button
.is-visible
.qa-go-shop
Custom attributes
<input is-size="large">
<div is-size="medium">
Metodologia
de nomenclatura
BEM, SMACSS, RSCSS, etc
Pode tirar ou
colocar ingredientes
Projetos
porte medio+
A melhor parte
Pode utilizar
qualquer
preprocessador
Configurações
Ferramentas
Genêricos
Elementos
Objetos
Componentes
Trumps
Templates
Páginas
Configurações
Ferramentas
Genêricos
Elementos
Objetos
Componentes
Trumps
Templates
Páginas
Obrigada!
@akfzambranaDrupal Camp SP
2017

Mais conteúdo relacionado

Mais de Andréa Zambrana

Version all the things - Workshop
Version all the things - WorkshopVersion all the things - Workshop
Version all the things - WorkshopAndréa Zambrana
 
Version all the things [Workflows com Git]
Version all the things [Workflows com Git]Version all the things [Workflows com Git]
Version all the things [Workflows com Git]Andréa Zambrana
 
Sass maps, my precious! 2.0
Sass maps, my precious! 2.0Sass maps, my precious! 2.0
Sass maps, my precious! 2.0Andréa Zambrana
 
Curso front-end - Aula 004 - Comandos git (cont.)
Curso front-end - Aula 004 - Comandos git (cont.)Curso front-end - Aula 004 - Comandos git (cont.)
Curso front-end - Aula 004 - Comandos git (cont.)Andréa Zambrana
 
Curso front-end - Aula 003 - Comandos git
Curso front-end - Aula 003 - Comandos git Curso front-end - Aula 003 - Comandos git
Curso front-end - Aula 003 - Comandos git Andréa Zambrana
 
Curso front-end - Aula 002 - Git
Curso front-end - Aula 002 - GitCurso front-end - Aula 002 - Git
Curso front-end - Aula 002 - GitAndréa Zambrana
 
Curso front-end - Aula 001
Curso front-end - Aula 001Curso front-end - Aula 001
Curso front-end - Aula 001Andréa Zambrana
 
b ou strong eis a questão! HTML semântico, o santo graal do front-end =]
 b ou strong eis a questão! HTML semântico, o santo graal do front-end =] b ou strong eis a questão! HTML semântico, o santo graal do front-end =]
b ou strong eis a questão! HTML semântico, o santo graal do front-end =]Andréa Zambrana
 
Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?Andréa Zambrana
 

Mais de Andréa Zambrana (12)

Version all the things - Workshop
Version all the things - WorkshopVersion all the things - Workshop
Version all the things - Workshop
 
Viajando no front
Viajando no frontViajando no front
Viajando no front
 
Version all the things [Workflows com Git]
Version all the things [Workflows com Git]Version all the things [Workflows com Git]
Version all the things [Workflows com Git]
 
Sass maps, my precious! 2.0
Sass maps, my precious! 2.0Sass maps, my precious! 2.0
Sass maps, my precious! 2.0
 
Curso front-end - Aula 004 - Comandos git (cont.)
Curso front-end - Aula 004 - Comandos git (cont.)Curso front-end - Aula 004 - Comandos git (cont.)
Curso front-end - Aula 004 - Comandos git (cont.)
 
Curso front-end - Aula 003 - Comandos git
Curso front-end - Aula 003 - Comandos git Curso front-end - Aula 003 - Comandos git
Curso front-end - Aula 003 - Comandos git
 
Curso front-end - Aula 002 - Git
Curso front-end - Aula 002 - GitCurso front-end - Aula 002 - Git
Curso front-end - Aula 002 - Git
 
Curso front-end - Aula 001
Curso front-end - Aula 001Curso front-end - Aula 001
Curso front-end - Aula 001
 
Sass maps, my precious!
Sass maps, my precious!Sass maps, my precious!
Sass maps, my precious!
 
Sass - css bomba[do]
Sass - css bomba[do]Sass - css bomba[do]
Sass - css bomba[do]
 
b ou strong eis a questão! HTML semântico, o santo graal do front-end =]
 b ou strong eis a questão! HTML semântico, o santo graal do front-end =] b ou strong eis a questão! HTML semântico, o santo graal do front-end =]
b ou strong eis a questão! HTML semântico, o santo graal do front-end =]
 
Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?
 

Caipirinha CSS - Uma arquitetura flexível para projetos CSS