Download - Arquitetura CSS
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ⓞ
https://github.com/stubbornella/oocss/wikiⓞ
Object Oriented CSS
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
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>
Component
Outras Abordagens → csstyle
<a class="button --action +rounded +glass"> Register Now <span class="button__icon --rocket"></span> </a>
Option
Outras Abordagens → csstyle
<a class="button --action +rounded +glass"> Register Now <span class="button__icon --rocket"></span> </a>
Tweaks
Outras Abordagens → csstyle
<a class="button --action +rounded +glass"> Register Now <span class="button__icon --rocket"></span> </a>
Parts
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; } }
https://amcss.github.ioⓞ
Utiliza atributos HTML para definir estilos
Outras Abordagens → AMCSS
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"] {}
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
Outras Abordagens → Grid Style Sheets
~Cassowary Constraint Solver~
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
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.
/* 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
@rafaelrinaldi
Muito obrigado