SlideShare uma empresa Scribd logo
1 de 129
Baixar para ler offline
ARQUITETURA CSS 
@rafaelrinaldi
ⓞ https://magnetis.com.br
ⓞ https://magnetis.com.br 
Estamos contratando!
ⓞ https://sp.femug.com 
FEMUG
Disclaimer
Não vou utilizar o gif to Peter Griffin durante a palestra! 
peter_griffin_css.gif
Desenvolver interfaces para a web é muito mais do que um 
problema exclusivo do CSS
Conteúdo 
Apresentação (e agora também animações) 
Comportamento e interações mais complexas 
ⓞ http://alistapart.com/article/understandingprogressiveenhancement
CSS funciona. Poderia ser muito pior!
Técnicas
Técnicas ≠ Frameworks / Bibliotecas
OOCSS 
ⓞ https://github.com/stubbornella/oocss/wiki
Object Oriented CSS 
ⓞ https://github.com/stubbornella/oocss/wiki
Influenciado pelo paradigma da orientação a objetos 
Técnicas → OOCSS
CSS “object” 
Técnicas → OOCSS
Padrão visual que se repete 
e que pode ser abstraído em um contexto próprio 
Técnicas → OOCSS
Separar estrutura de marcação de variações visuais 
Técnicas → OOCSS
Separar o conteúdo seu contexto 
Técnicas → OOCSS
SMACSS 
ⓞ http://smacss.com
Scalable and Modular Architecture for CSS 
ⓞ http://smacss.com
Feito para resolver problemas específicos do Yahoo! Mail 
Técnicas → SMACSS
›❯ Base; 
›❯ Layout; 
›❯ Module; 
›❯ State; 
›❯ Theme. 
Técnicas → SMACSS
SMACSS → Base 
Técnicas → SMACSS → Base
Regras padrão de estilo 
Técnicas → SMACSS → Base
html { 
box-sizing: border-box; 
} 
*, 
*::before, 
*::after { 
box-sizing: inherit; 
} 
body { 
background: #bada55; 
} 
input[type=text] { 
border: 2px solid #444; 
} 
Técnicas → SMACSS → Base
SMACSS → Layout 
Técnicas → SMACSS → Layout
›❯ 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
#header { 
font-size: 2em; 
color: fuchsia; 
width: 100%; 
height: 15em; 
line-height: 1.5; /* dica: não precisa especificar unidade aqui */ 
} 
#sidebar { 
font-size: .75em; 
color: gray; 
float: right; 
} 
.l-inverse #sidebar { 
float: left; 
} 
Técnicas → SMACSS → Layout
SMACSS → Modules 
Técnicas → SMACSS → Modules
›❯ Trechos de código reutilizáveis; 
›❯ Partes modulares do design; 
›❯ Padrões. 
Técnicas → SMACSS → Modules
SMACSS → State 
Técnicas → SMACSS → State
›❯ Como os módulos irão se apresentar em estados específicos; 
›❯ Representado por classes com o prefixo is . 
Técnicas → SMACSS → State
.sidebar.is-expanded { 
opacity: 1; 
} 
.button.is-disabled { 
cursor: not-allowed; 
background: lightgray; 
opacity: .75; 
pointer-events: none; /* capeta */ 
} 
Técnicas → SMACSS → State
SMACSS → Theme 
Técnicas → SMACSS → Theme
Utilizado apenas em aplicações que possuem 
opções de variação visual 
Técnicas → SMACSS → Theme
/* 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
BEM 
ⓞ http://bem.info
Block Element Modifier 
ⓞ http://bem.info
Feito para resolver problemas específicos do Yandex 
Técnicas → BEM
›❯ 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
BEM → Block 
Técnicas → BEM → Block
Entidade independente que é capaz de conter outros blocos 
Técnicas → BEM → Block
Técnicas → BEM → Block
Técnicas → BEM → Block
BEM → Element 
Técnicas → BEM → Element
›❯ Parte de um bloco com uma função específica; 
›❯ Não possui um contexto próprio. 
Técnicas → BEM → Element
Técnicas → BEM → Element
Técnicas → BEM → Element
BEM → Modifier 
Técnicas → BEM → Modifier
Uma propriedade de um bloco ou elemento 
que altera seu comportamento 
Técnicas → BEM → Modifier
Técnicas → BEM → Modifier
Técnicas → BEM → Modifier
BEM → Nomenclatura 
Técnicas → BEM → Nomenclatura
›❯ 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
<ul class="list list_size_big list_type_links"> 
<li class=“list__item”> 
<a href="/meetup-css">Meetup CSS</a> 
</li> 
<li class="list__item list__item_state_active”> 
<a href=“/femug-sp">FEMUG-SP</a> 
</li> 
</ul> 
Técnicas → BEM → Nomenclatura
SUIT CSS 
ⓞ https://suitcss.github.io
Criado por desenvolvedores do Twitter 
numa tentativa de mudar para uma arquitetura 
baseada em componentes 
Técnicas → SUIT CSS
SUIT CSS → Nomenclatura 
Técnicas → SUIT CSS → Nomenclatura
›❯ Utiliza-se camelCase para separar palavras em nomes longos; 
›❯ Utilitários devem começar com o prefixo u . 
Técnicas → SUIT CSS → Nomenclatura
/* 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
<div class="u-cf"> 
<a class="u-floatLeft" href="{{url}}"> 
<img class="u-block" src="{{src}}" alt=""> 
</a> 
<p class="u-sizeFill u-textBreak"> 
</p> 
</div> 
Técnicas → SUIT CSS → Nomenclatura
/* Faz o inline de imports procurando por libs instaladas via NPM */ 
@import "normalize.css"; 
/* Atalhos para lidar com media queries */ 
@custom-media --wide-screen (min-width: 80em); 
/* Valores default */ 
:root { 
--base-font-size: 16px; 
} 
@media (--wide-screen) { 
html { 
/* Utiliza Autoprefixer para lidar c/ vendor prefixes por padrao */ 
font-size: calc(var(--base-font-size) * 2); 
} 
} 
Técnicas → SUIT CSS → Nomenclatura
ⓞ https://github.com/suitcss/components
Outras abordagens
ⓞ http://www.csstyle.io
Utiliza mixins de Sass para definir estilos 
Outras Abordagens → csstyle
<a class="button --action +rounded +glass"> 
Register Now 
<span class="button__icon --rocket"></span> 
</a> 
Outras Abordagens → csstyle
<a class="button --action +rounded +glass"> 
Register Now 
<span class="button__icon --rocket"></span> 
</a> 
Outras Abordagens → csstyle 
Component
<a class="button --action +rounded +glass"> 
Register Now 
<span class="button__icon --rocket"></span> 
</a> 
Outras Abordagens → csstyle 
Option
<a class="button --action +rounded +glass"> 
Register Now 
<span class="button__icon --rocket"></span> 
</a> 
Outras Abordagens → csstyle 
Tweaks
<a class="button --action +rounded +glass"> 
Register Now 
<span class="button__icon --rocket"></span> 
</a> 
Outras Abordagens → csstyle 
Parts
@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; 
} 
} 
Outras Abordagens → csstyle
ⓞ https://amcss.github.io
Utiliza atributos HTML para definir estilos 
Outras Abordagens → AMCSS
<!-- Botão padrão --> 
<a am-Button>Inscrever-se no Meetup CSS SP</a> 
<!-- Variações do botão --> 
<a am-Button="primary large”>Informações</a> 
<a am-Button="info small”>Cancelar inscrição</a> 
Outras Abordagens → AMCSS
.btn [am-Button] {} 
.btn-primary [am-Button~="primary"] {} 
.btn-large [am-Button~="large"] {} 
Outras Abordagens → AMCSS
ⓞ http://uilang.com
Uma linguagem própria para lidar com interface 
Outras Abordagens → uilang
<!doctype html> 
<title>Exemplo uilang</title> 
<script src=uilang.js></script> 
<style> 
/* Definição de estilos e transições */ 
#notification { 
transition: .8s 
} 
#notification.hidden { 
opacity: 0 
} 
</style> 
<div id=notification> 
<p>Você tem três mensagens não lidas.</p> 
<button class=hide>Esconder</button> 
</div> 
<code> 
clicking on ".hide" adds class "hidden" on "#notification" 
</code> 
Outras Abordagens → uilang
ⓞ http://gridstylesheets.org
Utiliza o algoritmo Cassowary Constraint Solver 
para lidar com layouts 
Outras Abordagens → Grid Style Sheets
~Cassowary Constraint Solver~ 
Outras Abordagens → Grid Style Sheets
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
Depende de um runtime (que roda em um web worker) 
e de um pré-processador 
Outras Abordagens → Grid Style Sheets
ⓞ http://getbootstrap.com/css
Framework CSS à frente de seu tempo 
Outras Abordagens → Bootstrap
Ensinou e popularizou boas práticas 
de arquitetura CSS modular 
Outras Abordagens → Bootstrap
Conceito de helper classes 
Outras Abordagens → Bootstrap
<p class="text-muted"></p> 
<p class="text-primary"></p> 
<p class="text-success"></p> 
<p class="text-info"></p> 
<p class="text-warning"></p> 
<p class="text-danger"></p> 
Outras Abordagens → Bootstrap
Conceito de modificadores incrementais 
Outras Abordagens → Bootstrap
<button type="button" class="btn btn-default">Default</button> 
<button type="button" class="btn btn-primary">Primary</button> 
<button type="button" class="btn btn-success">Success</button> 
<button type="button" class="btn btn-info">Info</button> 
Outras Abordagens → Bootstrap
Conceito de estados 
Outras Abordagens → Bootstrap
<button class="btn btn-primary btn-lg active">Primary button</button> 
<button class="btn btn-default btn-lg" disabled>Button</button> 
Outras Abordagens → Bootstrap
CSS na Magnetis
ⓞ https://github.com/magnetis/styleguide
Uma adaptação das partes que julgamos 
boas em algumas técnicas populares 
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. 
CSS na Magnetis
›❯ Sass com a sintaxe SCSS; 
›❯ Autoprefixer; 
›❯ Sistema de grid Susy; 
›❯ Breakpoint; 
›❯ SVG; 
›❯ Rails (partials & Sprockets = ❤); 
›❯ Bower. 
CSS na Magnetis
/* 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`, `has`, `should` e `can` */ 
.menu-item.has-icon {} 
/* Elemento `icon` dentro do componente `menu` */ 
.menu-item__icon {} 
CSS na Magnetis
Pontos positivos
Todos no time conseguem falar a mesma língua 
Pontos positivos
Facilita o uso de ferramentas 
e a criação de um guia de estilo 
Pontos positivos
Desenvolvimento de interface baseado em componentes ❤ 
Pontos positivos
Resolve problemas de “depth of applicability” 
Pontos positivos 
profundidade de aplicabilidade
Evita depender de como o markup está estruturado 
na hora de criar estilos 
Pontos positivos
<style> 
navigation ul li a { 
color: #c0ffee; /* valores hexadecimais sempre em minúsculo, pfv */ 
} 
</style> 
<navigation> 
<ul> 
<li><a href="/meetup-css">Meetup CSS</a></li> 
<li><a href="/femug-sp">FEMUG-SP</a></li> 
</ul> 
</navigation> 
Pontos positivos
<style> 
.navigation-list-link { 
color: #coffee; 
} 
</style> 
<navigation> 
<ul> 
<li> 
<a class="navigation-list-link" href="/meetup-css">Meetup CSS</a> 
</li> 
<li> 
<a class="navigation-list-link" href=“/femug-sp">FEMUG-SP</a> 
</li> 
</ul> 
</navigation> 
Pontos positivos
A ideia de componentes pequenos e com pouca responsabilidade 
evita problemas de performance na renderização da página e 
também problemas com especificidade de seletores 
Pontos positivos
Navegadores começam a renderizar a página 
antes mesmo do documento estar completamente carregado, 
fazendo uma leitura da direita pra esquerda 
Pontos positivos
Evitar excesso de detalhes nos seletores 
é uma boa prática 
Pontos positivos
ul#menu > li { 
text-align: right; 
} 
Pontos positivos
Força uma análise contextual antes de programar 
Pontos positivos
Maior flexibilidade na hora de lidar com design responsivo 
Pontos positivos
Não existe bala de prata
Have a convention, document it, and stick to it. 
“ 
Não existe bala de prata
ⓞ http://www.shopify.com
<div class="nav__bar is-moved-by-drawer headroom headroom--verytop 
headroom--top"> 
<div class="nav nav--main" id="ShopifyMainNav"> 
<nav class="page-width"> 
<button type="button" class="icon nav__hamburger"> 
<span class="visuallyhidden">Mobile Navigation</span> 
</button> 
<div class="nav__logo-wrapper"> 
<a class="icon nav__logo--full-color" href="/"> 
<span class="visuallyhidden">Home</span> 
</a> 
</div> 
</nav> 
</div> 
</div> 
Não existe bala de prata
Não existe bala de prata
Não existe bala de prata
Pense no seu time na hora de tomar decisões de arquitetura 
Não existe bala de prata
Documente seu código! 
Não existe bala de prata
/* ================================================================= 
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: 
* 
* <div class="grid"> 
* <div class="cell cell-3"></div> 
* <div class="cell cell-3"></div> 
* <div class="cell cell-3"></div> 
* </div> 
*/ 
Não existe bala de prata
Coisas mudam. O tempo todo. 
Não existe bala de prata
Seu código precisa ser flexível e adaptável 
Não existe bala de prata
Foque em processos e resultados, 
não em ferramentas ou frameworks 
Não existe bala de prata
Muito obrigado 
@rafaelrinaldi

Mais conteúdo relacionado

Mais procurados

Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
Léo Dias
 

Mais procurados (19)

Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
 
CSS com SASS e SMACSS faz BEM
CSS com SASS e SMACSS faz BEMCSS com SASS e SMACSS faz BEM
CSS com SASS e SMACSS faz BEM
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
CSS - Módulo Básico de WEB
CSS - Módulo Básico de WEBCSS - Módulo Básico de WEB
CSS - Módulo Básico de WEB
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
Css - por Nícolas Lazarte Kaqui
Css - por Nícolas Lazarte Kaqui Css - por Nícolas Lazarte Kaqui
Css - por Nícolas Lazarte Kaqui
 
html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujo
 
Arquitetura CSS - Uma rápida introdução
Arquitetura CSS - Uma rápida introduçãoArquitetura CSS - Uma rápida introdução
Arquitetura CSS - Uma rápida introdução
 
Curso de HTML5 - Aula01
Curso de HTML5 - Aula01Curso de HTML5 - Aula01
Curso de HTML5 - Aula01
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 
HTML/CSS Patterns
HTML/CSS PatternsHTML/CSS Patterns
HTML/CSS Patterns
 
Material css parte I
Material css parte IMaterial css parte I
Material css parte I
 
Padroes Web
Padroes WebPadroes Web
Padroes Web
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 

Destaque

Thau arq 1 aula 1 - principios arquitetura moderna
Thau arq 1  aula 1 - principios arquitetura modernaThau arq 1  aula 1 - principios arquitetura moderna
Thau arq 1 aula 1 - principios arquitetura moderna
Cristiane Kröhling Bernardi
 

Destaque (15)

Arquitectura contemporânea
Arquitectura contemporâneaArquitectura contemporânea
Arquitectura contemporânea
 
Estilo internacional 2013
Estilo internacional 2013Estilo internacional 2013
Estilo internacional 2013
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informação
 
Estilo Internacional
Estilo InternacionalEstilo Internacional
Estilo Internacional
 
Trabalho teoria e historia da arquitetura frank lloyd wright.
Trabalho teoria e historia da arquitetura frank lloyd wright.Trabalho teoria e historia da arquitetura frank lloyd wright.
Trabalho teoria e historia da arquitetura frank lloyd wright.
 
Bauhaus
BauhausBauhaus
Bauhaus
 
Bauhaus & Estilo Internacional
Bauhaus & Estilo InternacionalBauhaus & Estilo Internacional
Bauhaus & Estilo Internacional
 
Obras Mies Van Der Rohe
Obras Mies Van Der RoheObras Mies Van Der Rohe
Obras Mies Van Der Rohe
 
Estilo Internacional
Estilo InternacionalEstilo Internacional
Estilo Internacional
 
Estilo internacional
Estilo internacionalEstilo internacional
Estilo internacional
 
História do Design - Mov.Moderno.Bauhaus - Hd07
História do Design - Mov.Moderno.Bauhaus - Hd07História do Design - Mov.Moderno.Bauhaus - Hd07
História do Design - Mov.Moderno.Bauhaus - Hd07
 
Mies van der Rohe
Mies van der RoheMies van der Rohe
Mies van der Rohe
 
Thau arq 1 aula 1 - principios arquitetura moderna
Thau arq 1  aula 1 - principios arquitetura modernaThau arq 1  aula 1 - principios arquitetura moderna
Thau arq 1 aula 1 - principios arquitetura moderna
 
Estilo internacional 1920
 Estilo internacional 1920 Estilo internacional 1920
Estilo internacional 1920
 
Estilo internacional
Estilo internacionalEstilo internacional
Estilo internacional
 

Semelhante a Arquitetura CSS

Básico em (X)HTML e CSS
Básico em (X)HTML e CSSBásico em (X)HTML e CSS
Básico em (X)HTML e CSS
Kako Botasso
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
RubenManhia
 

Semelhante a Arquitetura CSS (20)

Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com Sass
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
 
don't repeat yourself front-ender
don't repeat yourself front-enderdon't repeat yourself front-ender
don't repeat yourself front-ender
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
HTML & CSS - Aula 5
HTML & CSS - Aula 5HTML & CSS - Aula 5
HTML & CSS - Aula 5
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
 
Básico em (X)HTML e CSS
Básico em (X)HTML e CSSBásico em (X)HTML e CSS
Básico em (X)HTML e CSS
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Html5
Html5Html5
Html5
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
 
Less
LessLess
Less
 
CSS {Grid} Layout: It's evolution baby
CSS {Grid} Layout: It's evolution babyCSS {Grid} Layout: It's evolution baby
CSS {Grid} Layout: It's evolution baby
 
Um guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + LessUm guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + Less
 
Wicket 2008
Wicket 2008Wicket 2008
Wicket 2008
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Css For Beginners
Css For BeginnersCss For Beginners
Css For Beginners
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Práticas para Melhorar o seu Desenvolvimento Front-End
Práticas para Melhorar o seu Desenvolvimento Front-EndPráticas para Melhorar o seu Desenvolvimento Front-End
Práticas para Melhorar o seu Desenvolvimento Front-End
 
CSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
CSS in JS - Escrevendo CSS no JavaScript - Dan VitorianoCSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
CSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
 

Arquitetura CSS

  • 2.
  • 7. Não vou utilizar o gif to Peter Griffin durante a palestra! peter_griffin_css.gif
  • 8. Desenvolver interfaces para a web é muito mais do que um problema exclusivo do CSS
  • 9. Conteúdo Apresentação (e agora também animações) Comportamento e interações mais complexas ⓞ http://alistapart.com/article/understandingprogressiveenhancement
  • 10. CSS funciona. Poderia ser muito pior!
  • 12. Técnicas ≠ Frameworks / Bibliotecas
  • 14. Object Oriented CSS ⓞ https://github.com/stubbornella/oocss/wiki
  • 15. Influenciado pelo paradigma da orientação a objetos Técnicas → OOCSS
  • 17. Padrão visual que se repete e que pode ser abstraído em um contexto próprio Técnicas → OOCSS
  • 18. Separar estrutura de marcação de variações visuais Técnicas → OOCSS
  • 19. Separar o conteúdo seu contexto Técnicas → OOCSS
  • 21. Scalable and Modular Architecture for CSS ⓞ http://smacss.com
  • 22. Feito para resolver problemas específicos do Yahoo! Mail Técnicas → SMACSS
  • 23. ›❯ Base; ›❯ Layout; ›❯ Module; ›❯ State; ›❯ Theme. Técnicas → SMACSS
  • 24. SMACSS → Base Técnicas → SMACSS → Base
  • 25. Regras padrão de estilo Técnicas → SMACSS → Base
  • 26. html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { background: #bada55; } input[type=text] { border: 2px solid #444; } Técnicas → SMACSS → Base
  • 27. SMACSS → Layout Técnicas → SMACSS → Layout
  • 28. ›❯ 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
  • 29. #header { font-size: 2em; color: fuchsia; width: 100%; height: 15em; line-height: 1.5; /* dica: não precisa especificar unidade aqui */ } #sidebar { font-size: .75em; color: gray; float: right; } .l-inverse #sidebar { float: left; } Técnicas → SMACSS → Layout
  • 30. SMACSS → Modules Técnicas → SMACSS → Modules
  • 31. ›❯ Trechos de código reutilizáveis; ›❯ Partes modulares do design; ›❯ Padrões. Técnicas → SMACSS → Modules
  • 32. SMACSS → State Técnicas → SMACSS → State
  • 33. ›❯ Como os módulos irão se apresentar em estados específicos; ›❯ Representado por classes com o prefixo is . Técnicas → SMACSS → State
  • 34. .sidebar.is-expanded { opacity: 1; } .button.is-disabled { cursor: not-allowed; background: lightgray; opacity: .75; pointer-events: none; /* capeta */ } Técnicas → SMACSS → State
  • 35. SMACSS → Theme Técnicas → SMACSS → Theme
  • 36. Utilizado apenas em aplicações que possuem opções de variação visual Técnicas → SMACSS → Theme
  • 37. /* 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
  • 39. Block Element Modifier ⓞ http://bem.info
  • 40. Feito para resolver problemas específicos do Yandex Técnicas → BEM
  • 41. ›❯ 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
  • 42. BEM → Block Técnicas → BEM → Block
  • 43. Entidade independente que é capaz de conter outros blocos Técnicas → BEM → Block
  • 44. Técnicas → BEM → Block
  • 45. Técnicas → BEM → Block
  • 46. BEM → Element Técnicas → BEM → Element
  • 47. ›❯ Parte de um bloco com uma função específica; ›❯ Não possui um contexto próprio. Técnicas → BEM → Element
  • 48. Técnicas → BEM → Element
  • 49. Técnicas → BEM → Element
  • 50. BEM → Modifier Técnicas → BEM → Modifier
  • 51. Uma propriedade de um bloco ou elemento que altera seu comportamento Técnicas → BEM → Modifier
  • 52. Técnicas → BEM → Modifier
  • 53. Técnicas → BEM → Modifier
  • 54. BEM → Nomenclatura Técnicas → BEM → Nomenclatura
  • 55. ›❯ 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
  • 56. <ul class="list list_size_big list_type_links"> <li class=“list__item”> <a href="/meetup-css">Meetup CSS</a> </li> <li class="list__item list__item_state_active”> <a href=“/femug-sp">FEMUG-SP</a> </li> </ul> Técnicas → BEM → Nomenclatura
  • 57. SUIT CSS ⓞ https://suitcss.github.io
  • 58. Criado por desenvolvedores do Twitter numa tentativa de mudar para uma arquitetura baseada em componentes Técnicas → SUIT CSS
  • 59. SUIT CSS → Nomenclatura Técnicas → SUIT CSS → Nomenclatura
  • 60. ›❯ Utiliza-se camelCase para separar palavras em nomes longos; ›❯ Utilitários devem começar com o prefixo u . Técnicas → SUIT CSS → Nomenclatura
  • 61. /* 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
  • 62. <div class="u-cf"> <a class="u-floatLeft" href="{{url}}"> <img class="u-block" src="{{src}}" alt=""> </a> <p class="u-sizeFill u-textBreak"> </p> </div> Técnicas → SUIT CSS → Nomenclatura
  • 63. /* Faz o inline de imports procurando por libs instaladas via NPM */ @import "normalize.css"; /* Atalhos para lidar com media queries */ @custom-media --wide-screen (min-width: 80em); /* Valores default */ :root { --base-font-size: 16px; } @media (--wide-screen) { html { /* Utiliza Autoprefixer para lidar c/ vendor prefixes por padrao */ font-size: calc(var(--base-font-size) * 2); } } Técnicas → SUIT CSS → Nomenclatura
  • 66.
  • 68. Utiliza mixins de Sass para definir estilos Outras Abordagens → csstyle
  • 69. <a class="button --action +rounded +glass"> Register Now <span class="button__icon --rocket"></span> </a> Outras Abordagens → csstyle
  • 70. <a class="button --action +rounded +glass"> Register Now <span class="button__icon --rocket"></span> </a> Outras Abordagens → csstyle Component
  • 71. <a class="button --action +rounded +glass"> Register Now <span class="button__icon --rocket"></span> </a> Outras Abordagens → csstyle Option
  • 72. <a class="button --action +rounded +glass"> Register Now <span class="button__icon --rocket"></span> </a> Outras Abordagens → csstyle Tweaks
  • 73. <a class="button --action +rounded +glass"> Register Now <span class="button__icon --rocket"></span> </a> Outras Abordagens → csstyle Parts
  • 74. @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; } } Outras Abordagens → csstyle
  • 76. Utiliza atributos HTML para definir estilos Outras Abordagens → AMCSS
  • 77. <!-- Botão padrão --> <a am-Button>Inscrever-se no Meetup CSS SP</a> <!-- Variações do botão --> <a am-Button="primary large”>Informações</a> <a am-Button="info small”>Cancelar inscrição</a> Outras Abordagens → AMCSS
  • 78. .btn [am-Button] {} .btn-primary [am-Button~="primary"] {} .btn-large [am-Button~="large"] {} Outras Abordagens → AMCSS
  • 80. Uma linguagem própria para lidar com interface Outras Abordagens → uilang
  • 81. <!doctype html> <title>Exemplo uilang</title> <script src=uilang.js></script> <style> /* Definição de estilos e transições */ #notification { transition: .8s } #notification.hidden { opacity: 0 } </style> <div id=notification> <p>Você tem três mensagens não lidas.</p> <button class=hide>Esconder</button> </div> <code> clicking on ".hide" adds class "hidden" on "#notification" </code> Outras Abordagens → uilang
  • 83. Utiliza o algoritmo Cassowary Constraint Solver para lidar com layouts Outras Abordagens → Grid Style Sheets
  • 84. ~Cassowary Constraint Solver~ Outras Abordagens → Grid Style Sheets
  • 85. 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
  • 86. Depende de um runtime (que roda em um web worker) e de um pré-processador Outras Abordagens → Grid Style Sheets
  • 88. Framework CSS à frente de seu tempo Outras Abordagens → Bootstrap
  • 89. Ensinou e popularizou boas práticas de arquitetura CSS modular Outras Abordagens → Bootstrap
  • 90. Conceito de helper classes Outras Abordagens → Bootstrap
  • 91. <p class="text-muted"></p> <p class="text-primary"></p> <p class="text-success"></p> <p class="text-info"></p> <p class="text-warning"></p> <p class="text-danger"></p> Outras Abordagens → Bootstrap
  • 92. Conceito de modificadores incrementais Outras Abordagens → Bootstrap
  • 93. <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> Outras Abordagens → Bootstrap
  • 94. Conceito de estados Outras Abordagens → Bootstrap
  • 95. <button class="btn btn-primary btn-lg active">Primary button</button> <button class="btn btn-default btn-lg" disabled>Button</button> Outras Abordagens → Bootstrap
  • 98. Uma adaptação das partes que julgamos boas em algumas técnicas populares CSS na Magnetis
  • 99. ›❯ Conceito de categorização do SMACSS; ›❯ Conceito de estados do SMACSS; ›❯ Conceito de elementos do BEM; ›❯ Conceito de modificadores do SUIT CSS. CSS na Magnetis
  • 100. ›❯ Sass com a sintaxe SCSS; ›❯ Autoprefixer; ›❯ Sistema de grid Susy; ›❯ Breakpoint; ›❯ SVG; ›❯ Rails (partials & Sprockets = ❤); ›❯ Bower. CSS na Magnetis
  • 101. /* 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`, `has`, `should` e `can` */ .menu-item.has-icon {} /* Elemento `icon` dentro do componente `menu` */ .menu-item__icon {} CSS na Magnetis
  • 102.
  • 104. Todos no time conseguem falar a mesma língua Pontos positivos
  • 105. Facilita o uso de ferramentas e a criação de um guia de estilo Pontos positivos
  • 106. Desenvolvimento de interface baseado em componentes ❤ Pontos positivos
  • 107. Resolve problemas de “depth of applicability” Pontos positivos profundidade de aplicabilidade
  • 108. Evita depender de como o markup está estruturado na hora de criar estilos Pontos positivos
  • 109. <style> navigation ul li a { color: #c0ffee; /* valores hexadecimais sempre em minúsculo, pfv */ } </style> <navigation> <ul> <li><a href="/meetup-css">Meetup CSS</a></li> <li><a href="/femug-sp">FEMUG-SP</a></li> </ul> </navigation> Pontos positivos
  • 110. <style> .navigation-list-link { color: #coffee; } </style> <navigation> <ul> <li> <a class="navigation-list-link" href="/meetup-css">Meetup CSS</a> </li> <li> <a class="navigation-list-link" href=“/femug-sp">FEMUG-SP</a> </li> </ul> </navigation> Pontos positivos
  • 111. A ideia de componentes pequenos e com pouca responsabilidade evita problemas de performance na renderização da página e também problemas com especificidade de seletores Pontos positivos
  • 112. Navegadores começam a renderizar a página antes mesmo do documento estar completamente carregado, fazendo uma leitura da direita pra esquerda Pontos positivos
  • 113. Evitar excesso de detalhes nos seletores é uma boa prática Pontos positivos
  • 114. ul#menu > li { text-align: right; } Pontos positivos
  • 115. Força uma análise contextual antes de programar Pontos positivos
  • 116. Maior flexibilidade na hora de lidar com design responsivo Pontos positivos
  • 117. Não existe bala de prata
  • 118. Have a convention, document it, and stick to it. “ Não existe bala de prata
  • 120. <div class="nav__bar is-moved-by-drawer headroom headroom--verytop headroom--top"> <div class="nav nav--main" id="ShopifyMainNav"> <nav class="page-width"> <button type="button" class="icon nav__hamburger"> <span class="visuallyhidden">Mobile Navigation</span> </button> <div class="nav__logo-wrapper"> <a class="icon nav__logo--full-color" href="/"> <span class="visuallyhidden">Home</span> </a> </div> </nav> </div> </div> Não existe bala de prata
  • 121. Não existe bala de prata
  • 122. Não existe bala de prata
  • 123. Pense no seu time na hora de tomar decisões de arquitetura Não existe bala de prata
  • 124. Documente seu código! Não existe bala de prata
  • 125. /* ================================================================= 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: * * <div class="grid"> * <div class="cell cell-3"></div> * <div class="cell cell-3"></div> * <div class="cell cell-3"></div> * </div> */ Não existe bala de prata
  • 126. Coisas mudam. O tempo todo. Não existe bala de prata
  • 127. Seu código precisa ser flexível e adaptável Não existe bala de prata
  • 128. Foque em processos e resultados, não em ferramentas ou frameworks Não existe bala de prata