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


html { box-sizing: border-box; }

*, *::before, *::after { box-sizing: inherit; }

body { background: #bada55; }

input[type=text] { border: 2px solid #444; }


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 .


#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; }


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 .


.sidebar.is-expanded { opacity: 1; }

.button.is-disabled { cursor: not-allowed; background: lightgray; opacity: .75; pointer-events: none; /* capeta */ }


SMACSS → Theme

Técnicas → SMACSS → Theme

Utilizado apenas em aplicações que possuem opções de variação visual


/* 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; }


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


BEM → Element

Técnicas → BEM → Element

›❯ Parte de um bloco com uma função específica; ›❯ Não possui um contexto próprio.


BEM → Modifier

Técnicas → BEM → Modifier

Uma propriedade de um bloco ou elemento que altera seu comportamento


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.


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


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 .


/* 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 {}


/* 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); } }


https://github.com/suitcss/componentsⓞ

Outras abordagens

http://www.csstyle.ioⓞ

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>



Component



Option



Tweaks



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; } }

https://amcss.github.ioⓞ

https://amcss.github.io

Utiliza atributos HTML para definir estilos

Outras Abordagens → AMCSS

<a am-Button>Inscrever-se no Meetup CSS SP</a>

 <a am-Button="primary large”>Informações</a> <a am-Button="info small”>Cancelar inscrição</a>


.btn [am-Button] {}

.btn-primary [am-Button~="primary"] {}

.btn-large [am-Button~="large"] {}

http://uilang.comⓞ

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ⓞ

http://gridstylesheets.org

Utiliza o algoritmo Cassowary Constraint Solver para lidar com layouts

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; }


Depende de um runtime (que roda em um web worker) e de um pré-processador


http://getbootstrap.com/cssⓞ

http://getbootstrap.com/css

Framework CSS à frente de seu tempo

Outras Abordagens → Bootstrap

Ensinou e popularizou boas práticas de arquitetura CSS modular


Conceito de helper classes


Conceito de modificadores incrementais


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


Conceito de estados


<button class="btn btn-primary btn-lg active">Primary button</button> <button class="btn btn-default btn-lg" disabled>Button</button>


CSS na Magnetis

https://github.com/magnetis/styleguideⓞ

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

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.


“

http://www.shopify.comⓞ

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>


Pense no seu time na hora de tomar decisões de arquitetura


Documente seu código!


/* ================================================================= 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> */


Coisas mudam. O tempo todo.


Seu código precisa ser flexível e adaptável


Foque em processos e resultados, não em ferramentas ou frameworks


@rafaelrinaldi

Muito obrigado

arquitetura css

Design